Fallback Pages for Dynamic Routes

Utilize the getStaticPaths fallback option to serve a fallback page while static pages for dynamic routes are being generated.

import { useRouter } from 'next/router';

export default function Page({ data }) {
  const router = useRouter();
  
  // Check if the page is still loading
  if (router.isFallback) {
    // You can render a loading spinner or a placeholder here
    return <div>Loading...</div>;
  }

  // Once the page has loaded, render the page with data
  return <div>{data.title}</div>;
}

This snippet is for a page component in Next.js. It uses the useRouter hook from Next.js to detect if the current page is a fallback page. If the page is still generating (isFallback is true), it renders a loading message. Once the generation is completed, it renders the actual page content.

export async function getStaticPaths() {
  return {
    // Define the paths you want to pre-render
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
      // etc.
    ],
    // Enable fallback mode to generate pages on-demand
    // after the initial build
    fallback: true,
  };
}

This snippet demonstrates the getStaticPaths function in Next.js used for dynamic routes. The function defines a list of paths to generate at build time. By setting fallback to true, it enables on-demand generation of pages for paths not defined in the list. During this generation, the router will use the isFallback state to serve a fallback page.