发布NextJS项目时动态路由不工作

z9gpfhce  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(133)

我在我的nextjs项目中使用了这段代码,它在开发者模式下运行得很好,但当我在服务器上发布时就不起作用了

...Object.fromEntries(fs.readdirSync('./public/assets/data/pages/').map(i => [`/ac/${i}`, { page: '/ac/[id]' } ]))

这个代码在下一个。config.js
如果需要,这是完整的代码

const fs = require("fs");
const path = require("path");
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  distDir: "build",
  trailingSlash: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      "/": { page: "/" },
      "/ac/asrar_archived": { page: "/ac/[id]" },
      "/ac/eqbal": { page: "/ac/[id]" },
      "/ac/fum": { page: "/ac/[id]" },
      "/ac/hakimtoos": { page: "/ac/[id]" },
      
       ...Object.fromEntries(fs.readdirSync('./public/assets/data/pages/').map(i => [`/ac/${i}`, { page: '/ac/[id]' } ]))
    };
  },

此代码的手动路由部分工作正常,但发布时动态部分不工作
我搜索这个问题,但没有找到

qxsslcnc

qxsslcnc1#

Dynamic routing in Next.js doesn't work (404 error)可能重复。
引用自link:

  • “为了让你的动态路由工作,如果你使用SSG,你需要使用getStaticPaths和getStaticProps函数来预渲染所有的路径(以及每个路径的内容)"*

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths
因此,与其在next中预先定义路径,config.js您应该在动态页面文件中导出(并预定义路径)getStaticPaths和getStaticProps。

相关问题