Javascript 基于Route参数的服务器端呈现动态页面

我从Next.js开始，看完文档后，我不知道如何获得route param

code

inside

getstaticpath

方法，如下所示

code

在任何情况下都是未知的，它可以是任何东西

我不想在组件内部调用api并使用useEffect获取数据

文件：pages/post/[code].js

import React from 'react';
import apiCall from 'api/something';

export default ({post}) => {
     return <>
        render components here based on prop `post`
    </>
}

export async function getStaticPaths() {
    // How to get [code] from the route here, which can be used below?
    return { 
        paths: // NEED [code] HERE from current route,
        fallback: false
    }
} 

export async function getStaticProps(ctx) {
    return {
        props: { 
         // [ctx.code] resolved from current route with the help of getStaticPaths,
         post: apiCall(ctx.code) 
        }
    }
}

但当我执行

下一次导出时它失败了

声明：

无法导出带有

getServerSideProps

的页面。请参见此处的更多信息：

在进一步调查了这个错误之后，这对我来说是不可行的，因为我的应用程序托管在Heroku上

---

我试图在服务器端根据route参数

code

呈现html和数据。但现在无法这样做。

据我所知，您希望在构建时静态生成动态路由

为此，您需要通过指定所有

代码

，让Next.js知道要生成哪些页面

export async function getStaticPaths() {
    // you don't need here a code from current route
    // but you need to specify all known post codes
    return { 
        paths: [
          { params: { code: '1' } },
          { params: { code: '2' } },
          { params: { code: '3' } },
        ]
        fallback: false
    }
}

每次更改帖子时，您都需要重新构建应用程序

---

如果您不想每次都重新构建项目，请使用

getServerSideProps

。然后在请求时获取数据。您无法导出它，因为它需要Node.js服务器。

函数

getStaticPaths

的目的是生成一个路径列表，生成时将为其呈现静态HTML。例如，对于10篇文章的列表，如果您知道文章的id，您可以提前生成10篇

posts/[id]

路由

更多详细信息中

getstaticpath

如何处理动态路由..

假设您有一个动态路由

/posts/[postId]

如果您选择使用静态生成，您必须生成一个路径列表，其中包含

postId

作为路由参数，对于返回的每个路径，将调用函数

getStaticProps

，以在构建时查询数据。例如

// for /post/[postId]
export const getStaticPaths = async () => {
   // you can get how many ever postIds are know ahead of time 
   // and return as paths with fallback set to true
   const posts = // queried data from db or fetched from remote API

   const paths = posts.map(post => { params:{ postId: post.id.toString() }})

   return {
      paths,
      fallback: true
   }

}

// in your page Component check for fallback and render a loading indicator
import { useRouter } from 'next/router';

const MyPage = (props) => {
  // before you do anything
  const router = useRouter();

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

  // rest of your page logic

}

///for/post/[posted]
export const getstaticpath=async（）=>{
//如果你提前知道所有的帖子
常量路径=[
{params:{postId:'1234'}}，//请记住postId必须是字符串
{params:{postId:'3792'}}，
{params:{postId:'1749'}}，
]
返回{
路径，
fallback:false//我们正在禁用回退，因为我们提前知道所有路径
}
}
//对于返回的每个路径，将在构建时调用getStaticProps
导出常量getStaticProps=async（上下文）=>{
//您可以访问从中返回的postId参数
//在这里获取静态路径
const postId=context.params.postId
//现在您可以从postId查询数据并作为道具返回
返回{
props://查询的数据
}
}

如果未从函数返回的任何路由路径的

getStaticPaths

nextjs的

fallback

设置为

false

any，则nextjs将只显示

404

错误页面

如何使用

回退：true

为事先未知的路由参数生成静态页面

如果您知道一些帖子的

postId

，并且

posts

的数据不经常更改，您可以选择生成

回退

属性设置为

true

的页面，这将为未从函数

getStaticPaths

返回的路径显示页面的回退版本。在请求页面时，nextjs将调用

getStaticProps

，并将数据作为JSON发送，用于在浏览器中呈现页面。 例如

// for /post/[postId]
export const getStaticPaths = async () => {
   // you can get how many ever postIds are know ahead of time 
   // and return as paths with fallback set to true
   const posts = // queried data from db or fetched from remote API

   const paths = posts.map(post => { params:{ postId: post.id.toString() }})

   return {
      paths,
      fallback: true
   }

}

// in your page Component check for fallback and render a loading indicator
import { useRouter } from 'next/router';

const MyPage = (props) => {
  // before you do anything
  const router = useRouter();

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

  // rest of your page logic

}

请记住，如果选择使用

getServerSideProps

，函数将根据每个请求进行调用，因此到第一个字节的时间将更长

---

根据不同的用例，您还可以使用静态生成，通过使用nextjs团队提供的

swr

获取客户端数据。

您在getStaticProps中没有获得ctx.code吗？？？@pritesh我使用了

getServerSideProps

，这在问题本身中提到的下一次导出中失败，我需要利用

getServerSideProps

功能，但它在导出下一个应用程序时抛出。请再次完全检查我的问题。我知道您需要

下一次导出

，并且在使用

getServerSideProps

时失败当您从页面导出

getServerSideProps

时，“下一次导出”将始终失败，因为函数

getServerSideProps

需要一个

nodejs

服务器才能运行。这就是为什么我建议，如果没有增量数据需求，可以使用

getstaticpath

，并将

fallback

设置为

true

。在你的

next.config.js

中可能会有另一个使用

getInitialProps

和

exportPathMap

的解决方案，我认为这不是一个好的解决方案。我如何在next.js之上实现Node.js服务器，并使其导出SSR构建？@boop\u the\n，你可以在Node.js环境中运行next.js内置服务器-请参阅。无法导出SSR生成，因为服务器端渲染需要服务器。

// for /post/[postId]
export const getServerSideProps = async (context) => {

  // you also have access to the param postId from the context
  const postId = context.params.postId

  // query the data based on the postId and return as props
  return {
    props: // queried data
  }  

}