Quickly Understand getStaticPaths in Next.js

3 min readJul 31, 2022

What does getStaticPaths actually do?

We use getStaticPaths to define a list of path so Next.js can pre-render all the paths at build time.

Build time is not the same as request time.

The build time refers to that moment when Next.js builds your site on their server so that it is ready for serving to your browser.

If you want to read more about build time here.

When we use getStaticProps and getStaticPaths in Next.js, we are actually telling Next.js to pre-render our site (i.e. get all the initial data we need for the site and combine it into our HTML, then serve it to the browser).

If you are thinking of switching to a career in tech or changing to a new tech job, here are some job sites you can get started with:

Photo by Mukuko Studio on Unsplash

Do something today!

How do we use getStaticPaths?

We use getStaticPaths at the bottom of a page in Next.js.

Remember a page in Next.js lives in the “pages” folder not the components folder.

Important note — only use getStaticProps, getStaticPaths or getServerSideProps in your Pages.js files in your Next.js project not your React components.

It would look something like this:

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  }
}

We use getStaticProps and getStaticPaths together. So if you have used getStaticPaths you need to use getStaticPaths.

Can I see a full example, please?

Yes, since you asked so nicely here it is, my fellow coder.

Let’ say you have a url path on your site at the following:

pages/posts/[id].js

This is a page that shows all the posts for a particular id — that’s why we use [id] to represent that the id is dynamic.

At the top of the page you will have this:

export default function Post({ post }) {
  // Render post...
}

Under that you will have:

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  }
}
// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  }
}

Just imagine you have thousands of paths and pages to pre-render, this can be really slow and this is one of the biggest drawbacks of using getStaticPaths and getStaticProps.

Tip: if you have a lot of pages and the data is always been updated on those pages, it is better to use getServerSideProps (all HTML will be generated at runtime).

Personally, I have the following rules:

Where possible use getStaticPaths and getStaticProps for initial site generation, meaning the site users see when they first visit your site in their browser
Use getServerSideProps for all other situations
And of course sometimes, use client-side data fetching — this is when you fetch data to your site from the browser

We are writing a more details guide on the topic of data fetching in Next.js so subscribe to our Medium blog if you want to be notified of when that comes out.

We publish short tech tutorials on a weekly basis so consider subscribing to our Medium Blog.

Until next time — keep coding while moving small steps forward on this coding adventure of yours.

But more importantly, stay focused!

Quickly Understand getStaticPaths in Next.js

Written by Remote Upskill