This is a demonstration of a blog post detail page using a semantic slug in the URL.
Why Slugs Matter
Using a slug instead of a numeric ID is a web development best practice because:
- SEO Optimization: Search engines crawl keywords in the URL.
- User Experience: Users can tell what the page is about before clicking.
- Persistance: Even if database IDs change, the slug remains constant.
How it's implemented
In this Next.js application, we use a dynamic route folder. The framework automatically passes the URL segment to the page component as a parameter.
Example Code
// File: src/app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
const post = await getPostBySlug(slug);
return <article>{/* ... */}</article>;
}
