如何使用 Zeit.co 将动态 url 加载为静态的 nextjs 应用程序？答案

【问题标题】：How to load dynamic url as static with Zeit.co for nextjs app?如何使用 Zeit.co 将动态 url 加载为静态的 nextjs 应用程序？
【发布时间】：2020-07-24 19:59:39
【问题描述】：

我有一个 nextjs 应用程序，我的 server.js 上有这个应用程序：

 server.get('/recipes/:urlId', (req, res) => {
      const actualPage = '/recipe'
      const queryParams = { urlId: req.params.urlId }
      app.render(req, res, actualPage, queryParams)
    })

所以基本上每当我尝试访问 /recipes/{something} 时，它都会使用 queryParams 呈现页面。这稍后用于调用一个 api，该 api 在将其显示给用户之前将获取实际的食谱信息。

如果用户从应用程序中导航，它工作正常，我可以正确传递参数，一切正常。

但如果我得到 url 并将其直接粘贴到 url 上，我会得到 404 而不是配方。

在本地运行它工作正常，但是当我将它部署到 Zeit 时，我遇到了这个问题。我需要在那里配置什么吗？它是使用我在本地应用程序上设置的 server.js 还是使用其他东西？

【问题讨论】：

标签： reactjs next.js vercel

【解决方案1】：

问题是 url 使服务器搜索文件夹配方并搜索您通过 urlId 传递的文件夹。

有两种方法可以做到这一点。

1) 所以你必须告诉服务器不要查找文件夹，只需将任何 url 的 url 重定向到 index.html 页面

或者

2) 可以使用hash策略让url有#location path

在此处查看其他解决方案Router not working。

或者你可以添加htaccess文件，因为服务器端更改可能是不可能的

【讨论】：