如何使用nextjs处理获取URL

Question

所以我试图将我的nextjs应用程序部署到vercel，但它在代码的索引获取URL部分一直失败。在页面目录的index.js文件中，我有以下代码：

export async function getStaticProps() {
const res = await fetch(`${process.env.ROOT}/api/users`)
const users = await res.json()
return {props: {users: users.users}}
}
export default Index;

它从CCD_ 2中提取相对URL

module.exports = {
env: {
ROOT: process.env.NODE_ENV === 'production' ? `https://vercel.com/myaccount/myappname` : `http://localhost:3000`
}
};

FetchError: invalid json response body at https://vercel.com/myaccount/myappname持续故障

有没有更好的方法可以做到这一点，或者弄清楚我应该为生产指定什么URL？它在开发时运行良好

Answer 1

为了回答这个问题，您正试图在api路由生成之前从其检索数据，因为getStaticProps是在生成时使用的，因此会出现错误。在任何情况下，您都不应该在getStaticProps或getServerSideProps中从自己的api路由中获取数据，而是重用api路由中的代码，直接在getStaticProps(用于构建时(或getServerSideProps(用于服务器端生成(中检索数据。另一种方法是使用客户端数据获取(见下文(。

为了补充讨论，有几种方法可以在Next.js:中填充组件数据

getStaticProps:

这是您可以在构建时获取数据的地方，例如使用fetch或读取文件，通常用于基本不变的数据，例如博客文章、文章。如果你的网站完全由静态页面组成，你可以将它们导出为静态文件(HTML和JSON(，并将它们缓存在CDN上以提高性能，这就是Vercel自动为你做的。

getServerSideProps:

这是用于服务器端在每个页面请求时呈现和提取数据。如果您需要在每个请求中提供唯一的数据，例如显示用户特定的数据，则可以使用此选项。在Vercel中，每个请求都将由无服务器功能提供服务，您可以使用Cache-Control标头手动将它们缓存在CDN中：https://vercel.com/docs/edge-network/caching

客户端数据提取：

您也可以使用ajax调用客户端，例如在您的组件中使用fetch，通常是在需要进行更动态的用户交互时。在这种情况下，定义一些客户端可以使用的/api路由可能会有所帮助。

出于性能原因，Vercel建议使用getStaticProps和客户端数据提取，这可能是一个有用的指南：https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation，但在某些用例中，服务器端渲染可能是必要的，例如，如果您希望您的网站在没有启用javascript的情况下工作。

进一步参考：https://nextjs.org/docs/basic-features/data-fetching