如果您正在创建一个动态页面，例如：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数组）
• 指示当某个页面时要做什么，例如：NextJS缓存中不存在“产品/myProduct 123”（返回fallback类型）

动态路由下一个J
页面/用户/[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

使用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

如果你使用getStaticPaths，你告诉next.js你想要预生成那个页面，但是因为你在动态页面中使用它，next.js不知道它需要创建多少页面。
使用getStaticPaths，我们获取数据库。如果我们正在渲染博客，我们获取数据库来决定我们有多少博客，什么是idOfBlogPost，然后基于这些信息，getStaticPath将预先生成页面。
另外，getStaticProps并不只是在构建时运行，如果添加revalidate:numberOfSeconds，next.js将在“numberOfSeconds”时间后重新创建包含新鲜数据的新页面。

当我尝试在我的next.js项目中使用getStaticProps时，我得到了同样的错误。

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 ------------
}

您正在呈现动态路径，因此请使用getServerSideProps（）而不是getStaticProps（）