0

我目前在“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。

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

4

1 回答 1

0

感谢Next.js 聊天的帮助，我找到了答案，建议使用 Next.js 提供的内置重写功能，简而言之，我是这样实现的：

  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. 确保我的自定义服务器使用 Next.js 处理程序，如他们的文档中所示。
  2. 使用next/link在我需要的地方添加我的动态链接：

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

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

于 2020-10-08T23:16:21.617 回答