next.js getStaticPaths 列出每个路径还是仅列出附近的路径？

使用 Next.js 导出静态页面，我在动态路由中得到了这样的结果pages/[id].js我放入的任何路径getStaticPaths将创建部分。凉爽的。

列出每一页是否更好：

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

或者这有什么关系吗？

对于动态路由示例posts/[id].js getStaticPaths需要定义一个路径列表，以便Next.js在构建时预渲染所有指定的路径。

功能getStaticPaths需要返回一个对象pathsproperty 是一个包含路由参数和属性的数组fallback这是真的还是假的。如果fallback对于未从函数返回的任何路径设置为 falsegetStaticPaths不会被预渲染，因此导致404 page.

如果您提前知道需要渲染的所有路径，则可以设置fallback为 false。这是一个例子..

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

 }

假设你有一条路线/posts/[id].js来自数据库，每天都会创建新帖子。在这种情况下，您可以返回已经存在的路径来预渲染一些页面。并设置fallback to true根据请求，Next.js 将提供页面的后备版本，而不是显示404未从函数返回的路径的页面getStaticPaths，然后在后台，nextjs会调用getStaticProps获取请求的路径并将数据作为 JSON 提供，该数据将用于在浏览器中呈现页面。

这是一个例子，

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
   }   

 }

附： - 使用时fallback set to true你需要在你的中渲染某种后备组件NextPage否则当你尝试从 props 访问数据时，它会抛出类似的错误cannot read property ...x of undefined

你可以像这样渲染后备，

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

const router = useRouter();

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