Error: getStaticPaths is required for dynamic SSG pages and is missing for "xxx". NextJS

Question

I am getting this error "Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'" when I try to create my page in NextJS.

I don't want to generate any static page on build time. So why do I need to create a 'getStaticPaths' function?

Journalize

Answer 1

If you are creating a dynamic page eg: product/[slug].tsx then even if you don't want to create any page on build time you need to create a getStaticPaths method to set the fallback property and let NextJS know what to do when the page you are trying to get doesn't exist.

export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {

    return {
        paths: [], //indicates that no page needs be created at build time
        fallback: 'blocking' //indicates the type of fallback
    }
}

getStaticPaths does mainly two things:

• Indicate which paths should be created on build time (returning a paths array)

• Indicate what to do when a certain page eg: "product/myProduct123" doesn't exist in the NextJS Cache (returning a fallback type)

Journalize

hi, i'm usign your code, en locally this works fine, but when I run "npm run build" and start de app "npm start", the page that have a dynamic path returns 500 in nextjs side. :C – Mantinea

Answer 2

Dynamic Routing Next Js

pages/users/[id].js

import React from 'react'

const User = ({ user }) => {
  return (
    <div className="row">
      <div className="col-md-6 offset-md-3">
        <div className="card">
          <div className="card-body text-center">
            <h3>{user.name}</h3>
            <p>Email: {user.email} </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const users = await res.json()

  const paths = users.map((user) => ({
    params: { id: user.id.toString() },
  }))

  return { paths, fallback: false }
}


export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
  const user = await res.json()

  return { props: { user } }
}

export default User

Ruff

but what do you do when you refresh the page and lose the id and it cannot fetch any data anymore? – Gati

Answer 3

For rendering dynamic route use getServerSideProps() instead of getStaticProps()

For Example:

export async function getServerSideProps({
locale,
}: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Record<string, unknown>>> {

return {
    props: {
        ...(await serverSideTranslations(locale || 'de', ['common', 'employees'], nextI18nextConfig)),
    },
  }
}

You can check here as well

Goodly

false, as said by stackoverflow.com/users/1870780/juliomalves - "Using getStaticProps is perfectly fine with dynamic routes, as long as getStaticPaths is also used. Using getServerSideProps will no longer statically generate the pages, and will use SSR instead." – Faze

Answer 4

if you are using getStaticPaths, you are telling next.js that you want to pregenerate that page. However since you used it inside a dynamic page, next.js does not know in advance how many pages it has to create.

with getStaticPaths, we fetch the database. If we are rendering blogs, we fetch the database to decide how many blogs we have, what would be idOfBlogPost and then based on this information, getStaticPath will pre-generate pages.

also, getStaticProps does not run only during the build time. If you add revalidate:numberOfSeconds, next.js will recreate new page with fresh data after "numberOfSeconds" time.

Myself

Answer 5

I got the same error when i try to use getStaticProps for my next.js project. this one worked for me.

   export default function componentName(props) {
return(
<div></div>
)

 export async function getStaticPaths(ctx) {
    
    
    
        return {
            paths: [], //indicates that no page needs be created at build time
            fallback: 'blocking' //indicates the type of fallback
        }
    }

export async function getStaticProps(ctx) {
//-----------api call ------------
}

Whorehouse

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Vidavidal

Answer 6

You're rendering a dynamic route so use getServerSideProps() instead of getStaticProps()

Disconnect

Using getStaticProps is perfectly fine with dynamic routes, as long as getStaticPaths is also used. Using getServerSideProps will no longer statically generate the pages, and will use SSR instead. – Recollected