#NextJS App Router - Fetch from Params
marsh berry
icy dragonBOT
Hi @marsh berry. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To fetch data from route params in the Next.js App Router, you use dynamic segments in your route structure (e.g., [slug]), and then access those params in your page or layout component via the params prop. In Next.js 15, params is a Promise, so you need to await it in an async Server Component, or use React's use() in a Client Component.
Example: Fetching from Params in a Server Component
Suppose you have a route like app/blog/[slug]/page.tsx:
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
const post = await getPost(slug) // Fetch your data here
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
)
}
Here, getPost(slug) would be your data-fetching function, using the dynamic slug from the URL. The params prop is a Promise that resolves to an object containing your dynamic segments, e.g., { slug: 'my-post' } for /blog/my-post Creating a dynamic segment Dynamic Route Segments.
Example: Fetching from Params in a Client Component
If you need to access params in a Client Component, use the useParams hook from next/navigation:
'use client'
import { useParams } from 'next/navigation'
export default function BlogPostPage() {
const { slug } = useParams<{ slug: string }>()
// Use slug to fetch data on the client if needed
return <div>Slug: {slug}</div>
}
This hook returns the current route's dynamic parameters as an object useParams.
Summary:
- In Server Components, use the
paramsprop (await it). - In Client Components, use the
useParamshook.