如何处理 next.js 路由中的尾部斜杠?

2024-03-11

我正在尝试设置 next.js 应用程序,但在处理带有尾部斜杠的路由时遇到问题。因此,例如,如果我有这样的页面结构:

pages
 - index.js
 - blog
   - index.js
   - [slug].js

然后去/给我基础index.js, 即将/blog给我blog/index.js,并且要去/blog/my-post给我blog/[slug].js- 到目前为止,一切都很好。

但要去/blog/给我一个 404 错误,如果不完全替换 next.js 路由器,似乎根本没有办法处理这个问题 - 我什至无法重定向/blog/ to /blog。有什么办法可以解决这个问题,还是我需要一个自定义路由器?有没有一种方法可以扩展 next.js 路由器,让我可以处理这些问题,而无需完全替换它?


有一个选项Next.js 9.5 and up.

In next.config.js,添加trailingSlash config:

module.exports = {
  trailingSlash: true,
}

Source: 尾部斜杠 https://nextjs.org/docs/api-reference/next.config.js/trailing-slash

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何处理 next.js 路由中的尾部斜杠? 的相关文章

  • 在本地主机上运行时 Google Optimize 不会触发

    我正在尝试通过以下方式在 JavaScript 中获取 Google Optimize 实验数据这些说明 https support google com optimize answer 9059383 但我没有得到回调 也看不到调试器中发
  • 我可以将 NextJS 放在 localhost/next 等子文件夹中吗?

    我尝试从 Next js 构建静态文件 但我想将其放在共享主机或本地主机的子文件夹中 例如 localhost nextweb 我试图找到一些例子 但我发现只将 NextJS 放在根目录中 我的 next config js 看起来像 co
  • 禁用 JavaScript 时 SSR 不起作用

    在这里参考这张票 https github com zeit next js issues 4210 https github com zeit next js issues 4210我目前想知道为什么当您禁用 javascript 时 使
  • 如何让我的 NextJS 应用程序接受 otf 和 ttf 字体?

    我正在使用 NextJS 当我构建我的应用程序时 我的控制台返回给我 ModuleParseError 模块解析失败 意外字符 1 0 您可能需要适当的加载程序来处理此文件类型 我想知道出了什么问题 因为我已经构建了自定义 webpack
  • 使用 NextJS API 发送文件作为响应

    正如标题所示 在 NodeJs Express 中 我可以使用以下行返回一个文件作为响应 res sendFile absolute path to the file 假设我想从 NextJs 目录中的输出文件夹返回单个图像 如何使用 Ne
  • 如何将 Facebook 聊天工具添加到 Next.js?

    我尝试在 Next js 应用程序中添加 Facebook 客户聊天 但不起作用 我找不到我的代码有任何问题 如何在我的 Next js 应用程序中添加 Facebook 客户聊天 我的代码有什么错误吗 有更好的实现来解决这个问题吗 这是我
  • 如何向 NextRequest 类型添加新属性?

    我正在创建一个向 NextRequest 添加 name 属性的中间件 该属性将在 API 的其他部分中使用 import NextRequest NextResponse from next server export function
  • 连接 Apollo 和 mongodb

    我想将我的 Apollo 服务器与我的 mongoDB 连接 我知道那里有很多例子 但我陷入了异步部分 没有找到解决方案或示例 这很奇怪 我完全错了吗 我从 next js 的示例开始https github com zeit next j
  • Next js 子组件的父路由组件

    让我们想象一下我们有admin有几个页面的模块定制 settings account 这些页面中的每一个都应该有一些通用的布局 sidebar 对于标准 React 应用程序 我将做下一步来实现应用程序的这一部分 我会创建父路线 admin
  • 无法在 _app.js 中使用 getStaticProps

    我正在使用 next js 并尝试执行以下操作 获取 app js中与用户数据相关的基本数据 该数据包括标题 用于导航栏 和一些社交链接 用于页脚 在构建时将该数据传递给其他组件 例如页脚和导航栏 用于静态站点生成 为此我已经导出了getS
  • Oauth2 Google 身份验证流程 - Next.JS / Express

    我正在使用 React Next Js 前端 并尝试通过 Google 的 Oauth2 策略实现身份验证 我对这个过程感到非常困惑 目前在客户端上 我有一个 Google 登录组件 其中包含客户端 ID 并且可以检索访问令牌
  • Next.js 使用 getServerSideProps 如何将属性从页面传递到组件?

    我正在尝试获取coingecko api访问比特币的实时价格 我正在尝试将 getServerSideProps 的返回道具传递给我的
  • Cookie 未存储在浏览器中

    与 一起工作Next js and Django Rest Framework 我正在使用 JWT 对用户进行身份验证 首先 当用户成功登录页面时 会将 cookie 包含 JWT 令牌 发送到浏览器 当用户尝试访问特定页面时 此 cook
  • next-auth google 提供商无法正常工作,访问被阻止:此应用程序的请求无效

    这整个星 期我都在摸索 我已经尝试了几乎所有的方法 我正在尝试使用 next auth google 提供商 在 GCP 中 在授权网址和重定向网址中 本地主机 3000 真实域名网站 本地主机 3000 api auth callback
  • 无法从静态文件夹加载图像

    如何在 Next js 的组件中加载图像 我必须先构建项目吗 如果是 有没有办法在不先构建的情况下加载图像 无论我如何尝试 我都无法让它发挥作用 来自文档 https nextjs org docs basic features stati
  • Next.js 使用 SSR 的本地存储问题

    我有以下自定义挂钩 它将数据存储在本地存储中 import useCallback useEffect useState from react export const useLocalStorage key initialValue gt
  • 生产中未使用快速会话设置 Cookie

    我的应用程序分为客户端和服务器 客户端是托管在 Now sh 上的前端 Nextjs 应用程序 服务器是使用 Express 创建并托管在 Heroku 上的后端 因此域是 client app now sh 和 server app he
  • 将远程和本地图像与 next/image 一起使用

    我正在尝试使用next image加载本地图像以及远程图像 我有我的本地图像public assets images以及AWS S3中的远程图像 我想在上传图像之前使用占位符图像 来自本地 然后在上传后将其替换为远程图像 我已经添加了dom
  • 下一张图片不采用类属性

    我正在使用 Next js 和next image显示图像 但 CSS 在其中不起作用 该图像是 SVG 格式 我已将其放在公共文件夹中 我正在使用 Tailwind CSS 与此一起使用
  • 如何使用 Antd / Less 和 Sass / CSS 模块配置 Next.js

    我想用Next js https nextjs org 带有 Sass 和 CSS 模块但也想使用蚂蚁设计 https ant design 并希望对较小的建筑尺寸使用 Less 样式 我可以启用 CSS 模块或 Less 加载器 但不能同

随机推荐

  • 如何动态计算HTML页面表格中每一列的总计?

    我基本上会有一个表格 其中包含一周中的几天 标题行交叉 第 1 栏 周日 第 2 栏 周一等 每个单元格将输入工作时间 即8 最后一行 我希望每个单元格在将数据输入到每个单元格后动态计算其列中其上方单元格的总数 理想情况下 应在将光标移动到
  • 每个外键都有索引?

    每个外键上的索引是否都会优化查询 通常 在外键上放置索引被认为是良好的做法 这样做是因为在将 FK 表链接到包含键定义的表时 它有助于提高联接性能 这不会神奇地使您的整个查询得到优化 但它肯定有助于提高 FK 与其主键对应部分之间的连接性能
  • 如何检测 GHC 默认生成 32 位还是 64 位代码?

    我的里面有以下内容makefile https github com bsl GLFW b blob master Makefile GLFW FLAG m32 O2 Iglfw include Iglfw lib Iglfw lib co
  • jwt 令牌过期后如何注销

    我正在开发一个网络应用程序 使用node js and vue js 我正在使用进行身份验证和维护会话jwt and passport js using passport jwtstrategy 我已经完成了从创建 jwt 到保护路由的所有
  • 如何在 Python 中对编辑距离超过 80% 的单词进行分组

    假设我有一个清单 person name zakesh oldman LLC bikash goldman LLC zikash rakesh 我正在尝试以这种方式对列表进行分组 以便编辑距离 https en wikipedia org
  • 在远程计算机上运行命令

    我想使用 C 在远程计算机上的命令提示符中运行命令 根据此链接如何在远程计算机上执行命令 https stackoverflow com questions 428276 how to execute a command in a remo
  • 我需要调用[super viewDidUnload]吗?

    我见过一些Apple调用的例子 super viewDidUnload 也有一些没有 我读过一篇文章 几个月前所以我不记得网址 说打电话 super viewDidUnload 是不必要的 但除此之外没有解释 是否有明确的理由为什么或为什么
  • 分段错误 p_thread 可能存在竞争条件

    问题 我创建了子线程 TIDS 的链接列表 并希望在继续主线程之前等待所有子线程 TIDS 完成执行 基本上我有目录遍历 目录由给定的成员指定struct 每次我看到一个目录或文件时 我都会创建一个新线程并将其放入threadID进入链表
  • 通过逻辑索引为数组赋值不起作用

    在Matlab中 我想用其他值替换某个值 我知道我可以这样做 X X 0 1 如果我想将所有出现的 0 替换为 1 我有一个数组 X 其中包含范围在 0 到 9 之间的数字 我想创建一个新数组 Y 其中如果 X i 某个给定数字 例如 5
  • 将列表附加到 R 中的列表列表

    我在将数据附加到已经采用列表格式的列表时遇到问题 我有一个程序 它将在模拟循环期间导出结果对象 数据本身存储为矩阵列表 我的想法是将这些列表存储在一个列表中 然后将此列表列表保存为 R 对象以供以后分析 但是我在正确实现这一点时遇到了一些问
  • 如何在 git checkout 中使用八进制字符?

    我有一个音乐文件的 git 存储库 最近我发现有些文件被删除了 我想我不小心删除了它们 但现在我只是短暂地陶醉于我有先见之明的事实 使用 git 存储库 因此我当前的 git 状态验证它们已被删除 以下是一些清单 deleted Steve
  • 在 ASP .NET (SMTP) 中发送邮件

    我在代码文件中编写了以下代码 但它不起作用 请帮助我 protected void Button1 Click object sender EventArgs e MailMessage msgeme new MailMessage ema
  • VBA:复制时前面的零被删除

    我正在使用 VBA 创建 Excel 文件的副本 在该文件中 有一列包含前面带有零的数字 该文件的副本已创建 但该列中的数据将被删除 我需要保留前面带有零的值 我该如何用VBA解决这个问题 最好的方法是通过将 Range NumberFor
  • 带有泛型的映射数组的问题[重复]

    这个问题在这里已经有答案了 可能的重复 Java 泛型和数组初始化 https stackoverflow com questions 470198 java generics and array initialization 如何在 Ja
  • 代码在 g++ 中运行完美,但在 Xcode 中则不然 - 找不到文件

    我创建了一个包含内容的文本文件 它与 cpp 文件位于同一文件夹中 而且我已经多次确认该文件存在 当我运行 g 时 编译并运行它会找到该文件 当我在 Xcode 中运行它时 它不起作用 如果找不到该文件 include
  • int 和 NSInteger 有什么区别? [复制]

    这个问题在这里已经有答案了 可能的重复 何时使用 NSInteger 与 int https stackoverflow com questions 4445173 when to use nsinteger vs int 为什么会有 NS
  • 检查 .lib 文件的工具?

    我正在评估一些文档不足的软件 当我构建示例项目时 我收到一个链接器错误 如下所示 error LNK2019 unresolved external symbol 这个应用程序没有大量的 lib 文件 因此我可以通过反复试验来解决这个问题
  • 嵌入式非托管 DLL 无法在 ASP.NET 中加载

    我正在为 WCF 服务开发 ASP NET 主机 该服务引用 C CLI 包装器库 该库本身引用非托管 DLL 基于这个问题 https stackoverflow com questions 2907169 asp net load un
  • 亚音速 3.0.0.3 崩溃

    运行最新版本的 SubSonic 3 0 0 3 检索单个记录 更改一个字段并调用 Save 会导致以下代码中出现空引用异常 公共无效更新 IDataProvider提供者 if this dirtyColumns Count gt 0 r
  • 如何处理 next.js 路由中的尾部斜杠?

    我正在尝试设置 next js 应用程序 但在处理带有尾部斜杠的路由时遇到问题 因此 例如 如果我有这样的页面结构 pages index js blog index js slug js 然后去 给我基础index js 即将 blog给