使用动态路由，同时使用 Next.js 维护现有文件结构

Question

我目前在 'src' 目录中有这样一个文件结构：

|____pages
| |____FirstPage
| | |____First.js
| | |____index.js
| |____SecondPage
| | |____Second.js
| | |____index.js
| |____FirstDynamicRoutePage
| | |____PageToRenderOnDynamicRoute.js
| | |____index.js

我想保留这个文件结构并使用动态路由。例如， 'PageToRenderOnDynamicRoute.js" will be something like '/page/pageType/:pageId/otherSlug/:slug'.

的路由

我知道我可以使用 Next.js 提供的动态路由，但我不想使用必要的文件结构：

| |____page
| | |____pageType
| | | |____[pageId]
| | | | |____otherSlug
| | | | | |____[slug].js

我试过使用next-routes，但运行遇到很多问题，包括：使用getStaticProps或getServerSideProps时返回404，刷新页面时返回404，url时返回404手动输入。

有谁知道可以让我现有的文件结构 AND 使用动态路由的方法吗？我对任何选择持开放态度，包括如果您知道上述问题的可行解决方案，则继续尝试下一条路线。感谢您的帮助！

Answer 1

感谢 Next.js 提供的 Next.js chat, it was recommended to use the built-in rewrites 功能的帮助，我找到了答案，简而言之，我是这样实现的：

已更新至 Next.js 版本 9.5.3
像这样设置我的 next.config.js 文件：

const withSass = require('@zeit/next-sass')
const withTM = require('next-transpile-modules');
const withCSS = require("@zeit/next-css");
const withImages = require('next-images')

const myModule = module.exports = withImages(withSass(withCSS(withTM({
  transpileModules: ['react-bulma-components'],
  sassLoaderOptions: {
    includePaths: ["./src"]
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['css-loader'],
      },
    ],
  },
}))));

myModule.rewrites = async () => {
  return [
      { source: '/page/pageType/:slug*', destination: '/FirstDynamicRoutePage' },
  ];
};

确保我的自定义服务器使用 Next.js 处理程序，如他们的 docs 所示。
使用next/link在我需要的地方添加我的动态link：

   <Link href={`/page/pageType/${props.pageId}/otherSlug/${props.slug}`}>
        <a>
          {props.name}
        </a>
</Link>

就是这样！希望这个答案可以帮助其他有同样问题的人。

使用动态路由，同时使用 Next.js 维护现有文件结构

Use dynamic routes while maintaining existing file structure with Next.js

reactjs

next.js

dynamic-routing