My First Post
Another example of a single segment dynamic route with a different slug.
Slug: my-first-postType: Single Segment [slug]
[slug], catch-all [...slug], and optional catch-all [[...slug]].generateStaticParams to pre-render dynamic routes at build time.notFound() to handle invalid params gracefully.params prop in page components.generateMetadata for dynamic SEO.1export async function generateStaticParams() {2const posts = await getPosts();3return posts.map((post) => ({4slug: post.slug,5}));6}78export default async function Page({9params,10}: {11params: Promise<{ slug: string }>;12}) {13const { slug } = await params;14const post = await getPost(slug);1516if (!post) {17notFound();18}1920return <Article post={post} />;21}
| Type | Folder | Example URL | params.slug |
|---|---|---|---|
| Single | [slug] | /post/hello | "hello" |
| Catch-all | [...slug] | /docs/a/b/c | ["a","b","c"] |
| Optional | [[...slug]] | /shop | undefined |
| Optional | [[...slug]] | /shop/a/b | ["a","b"] |
[slug] in action.Use `generateStaticParams` to pre-render and `notFound()` for invalid paths.
| Topic | Guidance |
|---|---|
| Types | Single, catch-all, optional catch-all |
| Data | Use params and generateStaticParams for SSG |
| Errors | Call notFound() when data is missing |
params.slug = "my-first-post"Another example of a single segment dynamic route with a different slug.