问题标签 [nextjs-rewrites]

我一直在尝试让重写在 NextJS 中为我​​的 API 路径工作。这是为了避免 CORS 问题。

我遵循了来自NextJs CORS issue的解决方案。

它在本地主机上工作，但在生产环境中不起作用（我在 Vercel 本身上部署）。

我基本上尝试了所有类型的重写：

此重写在 localhost 上有效，但在生产环境中，重写停止工作，API 调用转至/api/:path*自身。

我在使用重写和查询参数时遇到问题。我将在下面进一步描述。如果我在解释过程中的任何时候失去了你，请随时要求澄清。

预期结果

我想要实现的是本地化下一个/链接并传递一个查询参数来填写 url 的动态部分。

设置

我将我的设置拆分为几个文件，pathnames.js其中包含所有路径和翻译。（不会只显示整个文件的必要部分）

然后是next.config.js我定义重写的地方。（不会只显示整个文件的必要部分）

这就是我制作本地化链接的方式

getLocalizedRoute函数返回示例

当前结果

好了，就是这么设置。

1. 现在，每当您按下链接时，下一步将首先抛出一个错误，您可以在下面的屏幕截图中看到该错误。

2. 然后它将开始“重新加载”浏览器并继续路由到正确的路径而不会出现问题。

3. 在生产上，这可以正常工作，但您仍然会看到浏览器重新加载，这并不理想。

4. 唯一有效的是路由没有重写和本地化，只是路由到i.e.: /shops/lommel. 这又是不理想的，因为客户依赖于本地化的网址。

我在 NextJs 中有一个多域网站。我想根据域和设备类型获取数据。现在我可以识别域，但我想让用户代理重写规则并在 getStaticProps 函数中使用它。这是我在 next.config.js 文件中的规则。

你知道如何在重写中捕获用户代理吗？还是您有其他解决方案？我想识别设备类型（移动设备、平板电脑或桌面设备）并根据它们呈现不同的 DOM。

我有一点问题：我正在尝试在 NextJS 中设置一个重写，它将自动将查询字符串发送到目的地。但是，我能找到的唯一示例是命名参数。在这种情况下，可能有任意数量的参数，所以我需要一种制作通配符的方法（我认为这可能吗？）

我要做的是以下几点：

当然这不起作用，所以我调查了has但我无法锻炼如何在没有名称参数的情况下使其工作

我正在尝试使用 Vercel next.js 的新边缘功能，但它不适用于生产，总是给出 404 错误。

我按照这个例子，没有任何效果。

也许是因为我使用的是 i18n？

我的 _middleware.js 文件如下所示：

在我使用这种结构的页面下：

请帮我找到解决方案。

非常感谢

我有两个 Nextjs 应用程序：

1_ webapp - 混合

2_ 博客 - 静态（与下一次导出一起导出）

它们是单独部署的。

我想将 webapp 链接到外部博客应用程序。当用户在 webapp 中点击“博客”时，应该会登陆博客静态应用。为此，我正在尝试使用 Nextjs rewrites。

在我的 webapp 中，next.config.js我这样做：

然后在next.config.js我的博客应用程序中：

问题是：

• 当我在 azure static web 应用程序上部署博客应用程序时，index.html（我的博客应用程序的主页）可以在下面https://myblog.azurestaticapps.net而不是下面访问，https://myblog.azurestaticapps.net/blog这意味着没有加载 css 和 js

blog-app/index.html中的js请求示例：/blog/_next/static/chunks/main-d3b8bc8211fdf94f30b0.js

可以在这里看看：https ://purple-coast-094447810.azurestaticapps.net/

我exportPathMap在 Nextjs 中阅读并尝试使用它，但在我的构建文件夹中我得到了

• index.html在我的根文件夹中
• /blog我的根目录中的文件夹是空的。里面根本没有文件。我就是这样使用它的：

我知道 Nextjs 的这个例子 - 带有区域：https ://github.com/vercel/next.js/tree/canary/examples/with-zones但这是为动态应用程序制作的，而不是静态导出的。

我正在将 NextJS 用于我想要完全静态呈现的网站。而且我还希望启用使用 NextJS 链接的客户端导航。有一个特定的页面，我在其上打开一个 iFrame，其中 src 属性在客户端进行评估。对于某些页面，我想在 iFrame 下方显示一些文本，并且我将这些文本映射到数据库中的某些 URL。对于所有其他 URL（没有映射到数据库中的任何文本），我想显示相同的（我们称其为页面的默认值）HTML。

示例：在数据库中我有：{ '/foo/bar', 'FOO BAR', '/baz/test': 'BAZ TEST' }

因为/foo/bar我想在FOO BAR下面渲染 iFrame 和文本。

对于/some/other/path, （基本上是除and/another/path之外的所有其他路径）我只想渲染一个默认请求的页面，以节省磁盘空间。原因是我会有 20 到 30 页的文本和 10k 的没有文本的页面。/foo/bar/baz/test

我尝试将重写规则与fallback: 'false'页面上的选项一起使用，但对于这种特定情况，似乎没有正确的组合。

我尝试了什么：

[...slug.ts] （用文本渲染 iFrame）fallback: 'false'和 getStaticPaths ['/foo/bar', 'baz/test'] 的返回值以及 [default.ts] （只渲染 iFrame ) 我在 next.config.js 中尝试了两种不同的配置设置：

尝试1： rewrites() { return [{'source': '/:slug*', 'destination': '/default'] }

尝试2： rewrites() { return { 'fallback': [{'source': '/:slug*', 'destination': '/default'}]} }

这些似乎都不起作用，我开始想也许我在这里使用了完全错误的方法。有什么建议么？

我正在使用NextJS来构建我们的前端。NextJS API仅提供基本检查，然后重定向到适当的微服务。但我正在努力寻找合适的方法。

由于我们使用的是 Next 12，我认为next.config rewrites非常合适，但我需要req在重写之前使用 Authorization 标头来增加。

这甚至可能吗？或者，对于这种情况，也许有更好的解决方案，我认为这是一个相当常见的场景，将中间端重定向到正确的 API。

我是下一个新手，我面临以下问题，我很乐意为您提供帮助

在我的下一个应用程序中，我在 api 请求期间使用重写来绕过 cors。

我的申请中有以下路线

但是当我向 api 发出请求时，部分页面 url 被替换为对 api 的请求。

这是我的要求：

但是，如果我在没有指定语言环境的情况下提出请求，一切都会好起来的。此外，如果路由没有嵌套，例如只是“/checkout”，那么一切正常。对于本地化，我使用 i18n。我对这个问题感到沮丧，请帮助。

如何从 Next-Auth RestApi 重定向获取路由，例如 /api/auth/session

我尝试在 next.config 中进行重写，但它完全破坏了 Next-Auth

我尝试在 auth 文件夹中添加一个 _middeware 文件，但这也破坏了 Next-Auth