NextJS 自定义 URL

Question

我想将我的博客从 Jekyll 转移到 NextJS 并查看如何指定自定义 URLs。我遵循了他们网站上的官方 NextJS 指南，但路由部分相对简单。从文档中，我了解到 URLs 基于 folders/files 结构，但我想在页面文件夹中为每个站点主题创建一个子文件夹，但保持 URLs 不变。类似的东西：

页（顶级文件夹）
- 投资（子文件夹）
  - 如何开始-investing.js（https://sypalo.com/how-to-start-investing <- URL 中没有投资文件夹）
- devops（子文件夹）
  - 如何升级-ubuntu.js（https://sypalo.com/how-to-upgrade-ubuntu <- URL 中没有 devops 文件夹）

在 Jekyll 中，我使用 Front Matter 为每页指定一个自定义 URL。在 NextJS 中看起来我必须使用重写，但是还有其他选择吗？另外 Link 组件有一个属性可以更改 link URL，但这只是为了显示 links 和 URLs.

Answer 1

在NextJS中，路由是由页面目录结构定义的。如果你不想要那个，你将不得不解决这个特性。您有一些选择：

使用 rewrites to map incoming request from /how-to-start-investing/ to /investing/... — note that unlike redirects，重写不会暴露目标路径，因此用户将停留在 /how-to-start-investing/ url.
在根目录中创建名为您希望如何公开路由的文件（例如 how-to-start-investing.js）。在文件内部，导出另一个组件，例如：

// how-to-start-investing.js
import { HowToStartInvesting } from "../components/investing/HowToStartInvesting";
export default HowToStartInvesting;

如果您使用这种方法，我建议您将组件放在 pages 目录之外的某个位置，这样您就不会为同一个组件设置两个 url。

Answer 2

终于让它工作了，所以为了使用自定义 URLs，我必须将重写与重定向结合起来，后者是 SEO 所必需的。

没有重定向，我可以只使用规范标签来告诉 Google 我喜欢的 URL，但从技术上讲，同一篇文章使用两个 URL 继续可用，在我的案例：

sypalo.com/how-to-start-investing
sypalo.com/investing/how-to-start-investing

所以最后的next.config.js是：

module.exports = {
   async rewrites() {
     return [
       {
         source: '/how-to-start-investing',
         destination: '/investing/how-to-start-investing'
       }
     ]
   },
   async redirects() {
    return [
      {
        source: '/investing/how-to-start-investing',
        destination: '/how-to-start-investing',
        permanent: true
      }
    ]
  }
 }

这将对所有 URL 重复。

NextJS 自定义 URL

NextJS custom URLs

reactjs

next.js