reactjs - NextJS 自定义 URL

Question

我想将我的博客从 Jekyll 转移到 NextJS，并了解如何指定自定义 URL。 我遵循了他们网站上的官方 NextJS 指南，但路由部分相对简单。从文档中，我得知 URL 是基于文件夹/文件结构的，但我希望在页面文件夹中每个站点主题有一个子文件夹，但保持 URL 平坦。类似这样的事情:

• pages(顶级文件夹)
  • 投资(子文件夹)
    • how-to-start-investing.js(https://example.com/how-to-start-investing <- 网址中没有投资文件夹)
  • devops(子文件夹)
    • how-to-upgrade-ubuntu.js([https://example.com/how-to-upgrade-ubuntu <- URL 中没有 devops 文件夹)

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

Answer 1

在 NextJS 中，路由是由页面目录的结构定义的。如果您不希望这样，则必须解决该功能。您有一些选择:

1. 使用rewrites将来自 /how-to-start-investing/ 的传入请求映射到 /investing/... — 请注意，与 redirects 不同，重写不会公开目标路径，因此用户将停留在 /how-to-start-investing/ 网址上。
2. 在根目录中创建名为您希望如何公开路由的文件(例如 how-to-start-investing.js)。在文件内，导出另一个组件，例如:

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

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