Using React Server Components with Dynamic Routing

Create a dynamic route with Next.js that renders content based on URL parameters using server components to server-render data specific to each route.

import { createServerComponent } from 'next/server';

export default createServerComponent(async ({ params }) => {
  const { slug } = params;
  const data = await fetchDataBasedOnSlug(slug);
  return <YourComponent data={data} />;
});

This server component handles dynamic routes by extracting the 'slug' URL parameter and fetching data based on it, then passes that data to a React component ('YourComponent') to render on the server.

import { createNextPath } from 'next/paths';

export const config = { runtime: 'nodejs' };
export const path = createNextPath('/:slug');

This sets up the dynamic route by using Next.js routing. The ':slug' placeholder in the 'createNextPath' function indicates that any string can match that segment of the route. The 'config' object sets the runtime to 'nodejs' to designate that this is a server component.

import Link from 'next/link';

const Navigation = () => (
  <nav>
    <ul>
      <li>
        <Link href="/dynamic-route-1">Route 1</Link>
      </li>
      <li>
        <Link href="/dynamic-route-2">Route 2</Link>
      </li>
      {/* More dynamic links */}
    </ul>
  </nav>
);

export default Navigation;

This is a navigation component that contains Next.js Link components, which are used to navigate between dynamic routes in the application. These links correspond to the dynamic routes that we set up with the server components.

async function fetchDataBasedOnSlug(slug) {
  // Replace by actual data fetching logic based on the slug
  const response = await fetch(`https://myapi.com/data/${slug}`);
  const data = await response.json();
  return data;
}

This is an example helper function to simulate fetching data based on the URL parameter 'slug'. This could be an API call or any asynchronous operation to retrieve data that will then be rendered by a server component.