问题标签 [nextjs-dynamic-routing]

• 最小复制站点：https ://nextjs-paths-issue.vercel.app/
• 最小复制代码：https ://github.com/saadq/nextjs-encoding-issue
  • 主页
  • 食物页面

我正在尝试遍历一组食物对象并根据其标题为每个对象创建静态页面。这适用于大多数食物，但如果食物标题包含/，则导航到页面（例如“好草莓/猕猴桃甜点”页面）将抛出 404。

在主页中，我在创建Link时对 URL 进行了编码，然后在getStaticPaths函数中，我paths使用相同的编码链接创建了。但是，它在部署时似乎不起作用。

该页面在运行时确实在本地工作npm run dev，但在实际输出构建中似乎存在问题。我可以做些什么来允许带有编码斜杠的路径工作吗？

主页

食物页面

我正在使用 Next.js 构建 LMS。到目前为止，我的项目结构是localhost/courses/1. 每门课程将有 7 页。仪表板、作业、TestAndQuizzes、成绩簿、资源、公告和名册。我已经准备好所有组件和页面。因此，如果我手动转到localhost/courses/1/assignmentsorlocalhost/courses/1323/roster等​​，则可以正常工作。

我想要做的是：当我点击作业链接时，我需要转到该特定课程的作业页面 - 类似于localhost/courses/1/assignments. 目前，我已将 URL 硬编码为，/courses/1/[page]因此如果我单击 assignments 它将转到，localhost/courses/1/assignment或者如果我单击 roster 它将转到localhost/courses/1/roster.

如何使该路线动态化，以便当用户单击课程中的一个选项卡时，它会将他们带到该特定课程的该页面？

我抬头看了看next/link，next/router但我仍然无法做到这一点。有什么帮助吗？

编辑：这是我的文件夹结构：

就像我上面说的，现在我已经使用链接来发送某人到/courses/1/assignment例如。

如果您想查看它托管在My app的网站。

将我的 Next.JS 版本升级到 Next 11.1.2 后，我的主页正在重定向我 404 not found 。而其他路线按预期工作。

我的 app.js 中没有任何特定的东西会阻止我的主页。任何帮助将不胜感激。

我可以创建动态后端路由吗？我正在创建和图像主机。我希望用户能够将他们的图像保存在这样的域下的服务器上http://localhost/<random_id>，链接的示例是http://localhost/a3Fafght5，我在网上环顾四周，我找不到任何关于创建动态后端路由的信息，然后当我做了找到它说我需要使用getStaticPaths来声明所有可能的 id 的一件事。当我构建项目时，我不知道 id 会是什么，我需要能够用它查询数据库并检查它是否存在并从那里做事。

我不知道如何从 Next.js 重定向中检索原始 URL 请求。实际上，代码在我的本地服务器上按预期工作，但信息在生产中消失了。

我的next.config.ts包括：

在本地运行时，我有以下内容：

所以这里一切都很好，我可以使用referer。

不幸的是，我无法从生产中的请求中检索原始 URL；我唯一得到的是：

如果有人知道我如何获取初始 URL 以便正确转发，我将不胜感激。

我正在开发一个多语言静态构建（下一个导出）Next.js 站点。我不能使用下一个国际化，所以我不得不一起破解一个解决方案，主要基于这个nextjs-18n-static-page-starter

我的页面结构如下所示：

我想在自定义文档中设置 html lang 属性。有什么方法可以在文档级别从 url 动态提取它？

我有这个 hacky 解决方案，但是当用户在应用程序中更改他们的语言时它不会更新（它会正确重定向到新的 url）：

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

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

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

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

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

请帮我找到解决方案。

非常感谢

我想在 next.js 中创建一个嵌套布局。我还有一个包含组件Header的父布局。Footer我在_app.js文件中使用该布局。

_app.js 文件

Sidebar.js

现在我有一个带有组件的文档页面。Sidebar现在我不想Sidebar在每个文档页面上呈现组件。我想创建一个仅在特定路线中呈现的嵌套布局。在我的情况下，嵌套layout应该在/docs路径中呈现。现在我在pages/docs目录中有这样的页面=>

现在我想要一个包含 parent 的嵌套布局Layout。嵌套布局可能包含一个Sidebar组件。

我正在使用 NextJS 和 MaterialUI，我有一些代码可以显示一张卡片，里面有一些文本和按钮。

卡片组件示例

卡片的某些部分会将用户带到页面 A。本质上，单击卡片上的任何位置（标题、文本、空白区域）时，用户应该被重定向到该页面。

但问题是仅在单个按钮上使用链接标签是不够的，空格会变得未使用。

我尝试的是嵌套整个 Card 组件（在 MaterialUi 中制作）。虽然单击任意位置（也包括空白区域）会将用户重定向到页面 A，但单击喜欢、评论、分享等按钮以及应该显示弹出菜单的 3 点按钮也会重定向到该页面，这是不可取的。

那么，有没有一种干净的方法来防止某些组件在嵌套在 and/or 标记内时充当链接？即使将鼠标悬停在按钮上也不应该在任何浏览器的左下方显示链接。除此以外的任何替代方案onClick: {(e) => e.stopPropogation()}都是优选的。

我有一个使用 NextJS 作为包装器的应用程序，并且我利用了NextJS 的动态路由功能。由于dns.com/path/page未呈现，我在将其部署到 CloudFront 时遇到了问题，而 CloudFront 期望它是dns.com/path/page.html. 我通过应用这个lambda-edge-nice-url解决方案来解决它。它现在可以正常工作。但是，还有一个问题：NextJS 的动态路由。dsn.com/path/subpath/123应该可以工作，因为 123 是一个动态参数。但是，这不起作用。In 仅在我访问时返回页面dns.com/path/subpath/[id]，这当然是不正确的，因为 [id] 不是我要加载的参数。

最奇怪的是：如果我尝试直接访问上面所说的 URL，它会失败。但是，在应用程序内部，我有重定向用户的按钮和链接，并且可以正常工作。

从应用程序内部导航（router.push在其回调内部的按钮）：

尝试直接访问网址：

谁能帮我正确路由请求？