next.js getStaticPaths 列出每条路径还是仅列出附近的路径? [英] next.js getStaticPaths list every path or only those in the immediate vicinity?

问题描述

使用 Next.js 导出静态页面，我在 pages/[id].js 之类的动态路由中得到它，我在 getStaticPaths 部分中放置的任何路径都将被创建.很酷.

Using Next.js to export static pages, I get that in a dynamic route like pages/[id].js any path I put in the getStaticPaths section will be created. Cool.

列出每一页是否更好:

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

或

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

或者重要吗?

推荐答案

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

For dynamic routes example posts/[id].js getStaticPaths needs to define a list of paths so that nextjs pre-render all the specified paths at build time.

函数 getStaticPaths 需要返回一个带有 paths 属性的对象，它是一个包含路由参数和属性 fallback 的数组对或错.如果 fallback 设置为 false，则任何不是从函数返回的路径 getStaticPaths 将不会被预渲染，因此会导致 404 页面.

The function getStaticPaths needs to return an object with paths property which is an array with the route params and the property fallback which will be true or false. If fallback is set to false for any path that is not returned from the function getStaticPaths will not be pre-rendered hence resulting in a 404 page.

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

If you know all the paths that you need to render ahead of time you can set fallback to false.Here is an example..

 // 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 提供，该数据将用于在浏览器中呈现页面.

Lets says you have a route /posts/[id].js and ids coming from a database, and new posts are created every day. In this case, you can return the paths which already exist to pre-render some pages. and set fallback to true and on request, nextjs will serve a fallback version of the page instead of showing 404 page for the paths that are not returned from the function getStaticPaths, then in the background, nextjs will call getStaticProps for the requested path and serve the data as JSON which will be used to render the page in the browser.

这是一个例子，

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 设置为 true 时，您需要在 NextPage 组件中呈现某种后备组件，否则当您尝试从props，它会抛出一个错误，比如 cannot read property ...x of undefined

P.S. - When using fallback set to true you need to render some sort of fallback component in your NextPage component otherwise when you try to access the data from props, it will throw an error like cannot read property ...x of undefined

您可以像这样渲染回退，

You can render a fallback like this,

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

const router = useRouter()

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

这篇关于next.js getStaticPaths 列出每条路径还是仅列出附近的路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！