next.js getStaticPaths list every path or only those in the immediate vicinity?

Question

Using Next.js to export static pages, I get that in a dynamic route like pages/[id].js any path I put in the getStaticPaths section will be created. Cool.

Is it better to list every page:

getStaticPaths(){
  return (
    // some function to spit out a list of every possible page
  )
}

or

getStaticPaths(){
  return (
    // some function to return the next and previous page
  )
}

or does it matter?

Solution

For dynamic routes example posts/[id].js getStaticPaths needs to define a list of paths so that Next.js pre-render all the specified paths at build time.

The function getStaticPaths needs to return an object with paths property which is an array with the route params and the property fallback which will be true or false. If fallback is set to false for any path that is not returned from the function getStaticPaths will not be pre-rendered hence resulting in a 404 page.

If you know all the paths that you need to render ahead of time you can set fallback to false.Here is an example..

 // getStaticPaths for /category/[slug] where slug can only be -
 // either 'category-slug-1', 'category-slug-2' or 'category-slug-3'

 export const getStaticPaths = async () => {

   return {
      paths: [
        { params: { slug: 'category-slug-1'} },
        { params: { slug: 'category-slug-2'} },
        { params: { slug: 'category-slug-3'} }
       ],
     fallback: false // fallback is set to false because we already know the slugs ahead of time
   }   

 }

Let's says you have a route /posts/[id].js and ids coming from a database, and new posts are created every day. In this case, you can return the paths which already exist to pre-render some pages. and set fallback to true and on request, Next.js will serve a fallback version of the page instead of showing 404 page for the paths that are not returned from the function getStaticPaths, then in the background, nextjs will call getStaticProps for the requested path and serve the data as JSON which will be used to render the page in the browser.

Here is an example,

export const getStaticPaths = async () => {
   const posts = await // your database query or fetch to remote API
   
   // generate the paths
   const paths = posts.map(post => ({ 
        params: { id: post.id } // keep in mind if post.id is a number you need to stringify post.id
      })
   );

   return {
      paths,
      fallback: true
   }   

 }

P.S. - When using fallback set to true you need to render some sort of fallback component in your NextPage component otherwise when you try to access the data from props, it will throw an error like cannot read property ...x of undefined

You can render a fallback like this,

// in your page component
import {useRouter} from 'next/router';

const router = useRouter();

if (router.isFallback) {
   return <div>loading...</div>
}

Comments

[rony]

thank you for your answer, Sir. I have one question, is getStaticPaths with fallback: true is good for SEO? because the thing that it renders is Fallback page which remove the SEO performance or google robots' ability to get the blog data for example.

[subashMahapatra]

For google crawlers, fallback will not negatively affect SEO performance. But for other crawlers, this may or may not be an issue for SEO. See this discussion for more details.

[rony]

Thank you very much. If SSR won't be run with best results with getStaticPaths, why in the first place getStaticPaths used rather than performance issues? The point of SSR is to generate the content for the SEO.