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

Question

当我尝试在 NextJS 中创建页面时出现此错误 "Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'"。

我不想在构建时生成任何静态页面。那么为什么我需要创建一个 'getStaticPaths' 函数？

Answer 1

如果您正在创建一个动态页面，例如：product/[slug].tsx 那么即使您不想在构建时创建任何页面，您也需要创建一个 getStaticPaths 方法来设置 fallback 属性并让 NextJS 知道当您尝试获取的页面不存在时该怎么做。

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主要做了两件事：

指示应在构建时创建哪些路径（返回 paths 数组）
指示当某个页面如何处理例如：“product/myProduct123”在 NextJS 缓存中不存在（返回 fallback 类型）

Answer 2

动态路由下一个 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

Answer 3

如果您使用的是 getStaticPaths，您就是在告诉 next.js 您想要预生成该页面。但是，由于您在动态页面中使用它，next.js 事先不知道它必须创建多少页面。

和getStaticPaths，我们获取数据库。如果我们正在渲染博客，我们获取数据库来决定我们有多少博客，什么是 idOfBlogPost，然后根据这些信息，getStaticPath 将预生成页面。

此外，getStaticProps 不运行仅在构建期间。如果添加 revalidate:numberOfSeconds，next.js 将在“numberOfSeconds”时间后使用新数据重新创建新页面。

Answer 4

要呈现动态路由，请使用 getServerSideProps() 而不是 getStaticProps()

例如：

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

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

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

static-site

reactjs

server-side-rendering

next.js

ssg