How do you access route params in a Server Component vs a Client Component in the App Router?

Question

Accepted Answer

Accessing route parameters in Next.js App Router differs significantly between Server Components and Client Components, especially with the Next.js 15+ change that made params a Promise. Server Components receive params as a prop automatically and must await it . Client Components can either receive params as a prop (and unwrap with React's `use()` hook) or use the dedicated `useParams()` hook for direct synchronous access . The choice depends on whether the component needs to be interactive and whether it's rendered on the server or client. ```tsx // app/products/[category]/[id]/page.tsx // Server Component (default, no 'use client') export default async function ProductPage({ params, }: { params: Promise<{ category: string; id: string }> }) { // In Next.js 15+, params is a Promise that must be awaited const { category, id } = await params; // You can now use these values for data fetching const product = await getProduct(id); return (

{product.name}

Category: {category}

); } // For static generation with known params export async function generateStaticParams() { const products = await getProducts(); return products.map((product) => ({ category: product.category, id: product.id, })); } ``` In Server Components, params are provided as a prop automatically based on the folder structure . The `await` is required in Next.js 15+ because params are now Promises, enabling streaming and partial rendering . ```tsx 'use client'; import { useParams } from 'next/navigation'; export default function ProductDetails() { // useParams returns a synchronous object, no await needed const params = useParams<{ category: string; id: string }>(); // Access values directly const { category, id } = params; return (

Product {id} in category {category}

{/* This component can use state and effects */}

); } // Usage in a parent component // app/products/[category]/[id]/page.tsx import ProductDetails from './ProductDetails'; export default async function Page({ params }: { params: Promise<{ category: string; id: string }> }) { // You can pass params to client components directly return ; // Client component uses useParams internally } ``` The `useParams` hook is the most common way for Client Components to access route parameters. It returns a synchronous object containing the current route's dynamic parameters . This hook works anywhere in the client component tree, not just in the page component. ```tsx 'use client'; import { use } from 'react'; // Client Component that receives params as a prop export default function ProductClient({ params, }: { params: Promise<{ category: string; id: string }> }) { // Unwrap the Promise using React's `use` hook const { category, id } = use(params); return (

Product {id} in {category}

); } // app/products/[category]/[id]/page.tsx export default async function Page({ params }: { params: Promise<{ category: string; id: string }> }) { // Pass the params Promise directly to the client component return ; } ``` This approach is useful when you need to use params in a Client Component that also receives other props. The `use()` hook is React's API for unwrapping Promises in components and integrates with Suspense . Server Components: Params are received as a prop named `params` (a Promise in Next.js 15+) and must be `await`ed before use . Client Components with `useParams`: Synchronous access anywhere in the component tree using the `useParams()` hook from `next/navigation` . Client Components with props: Can receive `params` as a prop (as a Promise) and unwrap with React's `use()` hook . Timing: Server Component params are available during server rendering; Client Component params are available after hydration . When using `useParams()` in a Client Component, be aware that the component will be client-side rendered. If you're concerned about performance, you can still use Server Components for the main content and only use Client Components for interactive parts that need param access. Also note that in Next.js 15+, `useParams()` remains synchronous and does not return a Promise—it's designed for client-side use where the values are already known after hydration . For query string parameters, the pattern is similar but uses `searchParams` in Server Components and `useSearchParams()` in Client Components. Note that `useSearchParams()` requires a Suspense boundary in static pages to prevent fully client-side rendering . The official Next.js documentation recommends wrapping components that use `useSearchParams` in a Suspense boundary to preserve static rendering for the rest of the page .

How do you access route params in a Server Component vs a Client Component in the App Router?

In Server Components, access params directly via the props object and await them in Next.js 15+; in Client Components, use the useParams() hook or receive params as props with React's use() to unwrap Promises

How do you access route params in a Server Component vs a Client Component in the App Router?

In Server Components, access params directly via the props object and await them in Next.js 15+; in Client Components, use the useParams() hook or receive params as props with React's use() to unwrap Promises

Scenario Questions

Follow-up Questions