next.js getStaticPaths列出每个路径或仅列出紧邻的路径？

Question

使用Next.js导出静态页面，我发现在pages/[id].js这样的动态路由中，将创建我在getStaticPaths部分中放置的任何路径。酷。

列出每个页面是否更好：

getStaticPaths(){
  return (
    // some function to spit out a list of every possible page
  )
}

或

getStaticPaths(){
  return (
    // some function to return the next and previous page
  )
}

或有关系吗？

Answer 1

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

函数getStaticPaths需要返回具有paths属性的对象，该对象是具有路由参数的数组和属性fallback，该属性为true或false。如果对于未从函数fallback返回的任何路径，将getStaticPaths设置为false，则不会预渲染任何路径，因此会导致显示404页面。

如果知道所有需要提前渲染的路径，可以将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和一个来自数据库的ID，并且每天都会创建新的帖子。在这种情况下，您可以返回已经存在的路径来预渲染某些页面。并将fallback设置为true并根据请求，nextjs将提供该页面的后备版本，而不是为未从函数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
   }   

 }

P.S。 -当使用fallback设置为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>
}