The Idea
Next.js provides a file-based routing system that supports dynamic routes (e.g., /product/[id]). You can combine this with dynamic data fetching to create flexible and scalable applications. This is particularly useful for cases like e-commerce product pages, user profiles, or any content with unique identifiers.
Example: Dynamic Product Pages
1. Set Up the Dynamic Route
Create a file named [id].tsx inside a folder like /pages/product/:
pages/product/[id].tsx
2. Fetch Data for the Dynamic Route
// pages/product/[id].tsx import { GetStaticPaths, GetStaticProps } from 'next'; type ProductProps = { product: { id: string; name: string; description: string; price: number; }; }; export default function ProductPage({ product }: ProductProps) { return ( <div> <h1>{product.name}</h1> <p>{product.description}</p> <p>Price: ${product.price}</p> </div> ); } // Generate dynamic paths for the product pages export const getStaticPaths: GetStaticPaths = async () => { const res = await fetch('https://api.example.com/products'); const products = await res.json(); // Map over the products to define paths const paths = products.map((product: { id: string }) => ({ params: { id: product.id }, })); return { paths, // Pre-render these paths at build time fallback: 'blocking', // Dynamically render other pages on request }; }; // Fetch product data for each page export const getStaticProps: GetStaticProps = async ({ params }) => { const res = await fetch(`https://api.example.com/products/${params?.id}`); const product = await res.json(); // Pass the product data as props return { props: { product }, revalidate: 10, // Revalidate every 10 seconds }; }; 3. Handle Non-existent Pages
To handle cases where the id doesn’t exist, return a notFound property in getStaticProps:
export const getStaticProps: GetStaticProps = async ({ params }) => { const res = await fetch(`https://api.example.com/products/${params?.id}`); if (res.status === 404) { return { notFound: true }; } const product = await res.json(); return { props: { product }, revalidate: 10, }; }; Key Features of This Approach:
SEO-Friendly: Pages are pre-rendered with full HTML, making them great for search engines.
Scalable: You can use fallback rendering (fallback: 'blocking') to dynamically generate pages for new data.
Real-Time Updates: Combine with revalidate to ensure the data stays fresh without manual deployments.
Error Handling: Handle 404s or other errors gracefully with notFound.
This method allows you to build highly dynamic and responsive web applications that scale easily!
Top comments (0)