时间戳

首页 > 解决方案 > 如何使用 Zeit.co 将动态 url 加载为静态的 nextjs 应用程序？

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

问题描述

我有一个 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 还是使用其他东西？

标签： reactjsnext.jsvercel

解决方案

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

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

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

或者

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

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

或者您可以添加服务器端更改的 htaccess 文件可能是不可能的

推荐阅读