如何将我的降价内容正确映射到 Next.js 中的动态 URL？

Question

我想要以下 URL 结构：

URL	Role
/	markdown contents of /index.md
/about	markdown contents of /about.md
/cookies	markdown contents of /cookies.md
/privacy-policy	markdown contents of /privacy-policy.md
/category1	category1 index page
/category1/post1	markdown contents of /category1/post1.md
/category1/post2	markdown contents of /category1/post2.md
/category2	category2 index page
/category2/post1	markdown contents of /category2/post1.md
/category2/post2	markdown contents of /category2/post2.md

我想避免在根目录中为我的内容创建单独的 .js 文件（所以没有 /about.js、/cookies.js 等），但如果我尝试像这样...

pages/
    index.js
    [root_article_id].js
    [category]/
        index.js
        [category_article_id].js

... 然后 Next.js 抱怨，因为它无法决定我何时请求 URL /about 是否应该使用 [category]/index.js 或 [root_article_id].js，尽管我觉得应该先调用后者，如果它不想处理请求（即如果我的 markdown 目录的根目录中没有 about.md），那么它应该回退到 [category]/index.js，如果 [category].js 吐出来，它仍然可以将请求传递给 404 处理程序。

为此构建 Next.js 文件的正确方法是什么？我真的需要在根内容目录中为我的降价文件设置单独的 .js 文件吗？

Answer 1

What's the correct way of structuring Next.js files for this? Do I really need to have separate .js files for my markdown files in the root content directory?

这是最简单的方法，因为您必须以某种方式告诉 nextjs 您希望哪些页面成为文章。但是，如果想避免这样做，可以使用 rewrites.

如果您知道所有文章（或类别），这就是您 next.config.js:

中所需要的

module.exports = {
  rewrites() {
    return [
      {
        source: "/about",
        destination: "/article/about",
      },
      {
        source: "/cookies",
        destination: "/article/cookies",
      },
      {
        source: "/privacy-policy",
        destination: "/article/privacy-policy",
      },
    ];
  },
};

然后制作article/[root_article_id]页。请注意，重写并不意味着重定向。该页面将在 /about 中可用，但 nextjs 将像对 /article/about 的请求一样处理它。这意味着这些页面也可以从 article/about 获得，但如果出于某些必要原因，这可能会被阻止。

是否应该重写文章或类别取决于哪一个是动态的。如果从您知道所有可能值的意义上说，两者都不是真正动态的，则您应该选择可能值较少的那个。

如果类别和文章都是动态的，则需要使用middleware (beta)进行重写。在您的中间件中，您获得了请求，并且您需要以某种方式确定所请求的 url 是文章还是类别页面。如何做到这一点显然取决于您存储数据的位置和方式。