Dynamic Route Segments in Next.js 14

Demonstrate how to use the new App Router to handle dynamic routes, such as fetching user details with a dynamic user ID from the URL.

import { fetchUserDetails } from '../lib/api'; // import a hypothetical function 

export default async function UserPage({ params }) {
  const userId = params.userId;
  const userDetails = await fetchUserDetails(userId);
  return <div>
    <h1>User Details</h1>
    {/* Render user details */}
    <p>Name: {userDetails.name}</p>
    <p>Email: {userDetails.email}</p>
    {/* more user details here */}
  </div>;
}

export function getServerPageProps({ params }) {
  return { params };
}

This code represents a page component in Next.js that uses the new App Router to handle a dynamic route. It fetches user details based on a dynamic user ID provided in the URL. The `fetchUserDetails` is a hypothetical function that you must replace with an actual API call to get the user data. The `getServerPageProps` function is used to pass the dynamic `params` received from the URL to the page component. This is where you would handle server-side operations like data fetching in Next.js 14.

// pages/user/[userId].js
// File name indicates the dynamic segment `userId`

export { default, getServerPageProps } from '../../components/UserPage';

This code represents the file structure required by Next.js to handle dynamic routing. The file is named `[userId].js` inside the `pages/user` directory, which indicates that `userId` is a dynamic segment of the route. The file re-exports the page component and the `getServerPageProps` from a separate component file, following the new file-system-based routing in Next.js 14.