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

Question

我想要以下 URL 结构：

网址	角色
/	/index.md 的 markdown 内容
/关于	/about.md 的 markdown 内容
/饼干	/cookies.md 的 markdown 内容
/隐私政策	/privacy-policy.md 的 markdown 内容
/类别1	类别 1 索引页
/类别1/帖子1	/category1/post1.md 的 markdown 内容
/类别1/帖子2	/category1/post2.md 的 markdown 内容
/类别2	类别2索引页
/类别2/帖子1	/category2/post1.md 的 markdown 内容
/类别2/帖子2	/category2/post2.md 的 markdown 内容

.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.jsor [root_article_id].js，即使我觉得应该首先调用后者，以及它是否不想处理该请求（即如果我的 markdown 目录的根目录中没有about.md），那么它应该回退到，如果将其吐出，[category]/index.js它仍然可以将请求传递给 404 处理程序。[category].js

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

Answer 1

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

这是最简单的方法，因为你必须以某种方式告诉 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，但如果出于某种必要原因，这可能可以被阻止。

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

如果类别和文章都是动态的，则需要使用中间件（测试版）进行重写。在你的中间件中，你得到了 req，并且你需要以某种方式决定请求的 url 是文章还是类别页面。如何完成此操作显然取决于您存储数据的位置和方式。