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

问题描述

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

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

我想保留此文件结构并使用动态路由。例如，“ PagetoRenderOnDynamicRoute.js”的路由将类似于“ / page / pageType /：pageId / otherSlug /：slug”。

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

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

我尝试使用next-routes，但遇到了许多问题，包括：使用getStaticProps或getServerSideProps时返回404，刷新页面时返回404，手动键入url时返回404。

有人知道我可以保持现有文件结构并且使用动态路由的方法吗？我愿意接受任何选择，包括在您知道上述问题的有效解决方案的情况下继续尝试其他方法。感谢您的帮助！

解决方法

由于Next.js chat的帮助，我找到了一个答案，建议使用Next.js提供的内置rewrites功能，简而言之，这是我的实现方式：

1. 已更新为Next.js版本9.5.3
2. 像这样设置我的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' },];
};

1. 确保我的自定义服务器使用的是{.3}中显示的Next.js处理程序。
2. 使用docs将我的动态链接添加到需要的地方：

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

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