[难点攻破]nextjs动态路由missing “generateStaticParams()“ so it cannot be used with “output: export“ config问题

半边肩膀淋雨233

已于 2024-04-19 15:05:39 修改

阅读量1.3k

点赞数 5

文章标签：前端 javascript 开发语言

于 2024-04-17 16:03:59 首次发布

本文链接：https://blog.csdn.net/qq_49417048/article/details/137876290

版权

报错内容

Build error occurred
Error: Page "/Lang/[...params]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

解决方案

二改

不要使用next dev（npm run dev），next14的dev选项非常奇怪，建议使用next build之后npx serve（npm run serve（next build & npx serve）），具体使用的命令可能写的不对，请问gpt“如何在nextjs中使用npm run serve”。

原因我也没搞太明白，总而言之就是，next build之后serve的访问方式和dev模式的访问方式不一样，按理说可以调配置但是我还没找到怎么改。

PS：如果这种方法发现改动之后没有变化，是因为next增量编译，把out和.next两个文件夹删掉重新build就行。

初稿

首先我看了几个issues基本都没解决，我这里罗列几个变量。

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    assetPrefix: '/', // 设置资源前缀
    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
};

这个output: export位于next.config.mjs，实测你改成别的完全没区别，照样报错。

首先我的目录结构如上

在page.tsx中输入这个：

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const fditems: FolderItem[] = getRootUriStrcuture()
  const result = fditems.filter(item => !item.isDir)
    .map((item) => ({ slug: item.urlPath.slice(1) }))
  result.concat({ slug: [""] })
  // console.log(result.length, result)
  return result
}

这个函数generateStaticParams就是它缺的函数，实测async加不加没区别。

然后在同文件输入这个：

export const dynamicParams = false

实测单独写它没用，但是配合generateStaticParams写会有用，它会导致generateStaticParams这个函数没产生的路径无法被访问，意思是在预构建的时候就没包括，那么自然就不会索引。

result.concat({ slug: [""] })

上面这个没有用，不会让slot为undefined的时候可访问，很奇怪，加上default.js也不能访问根目录，在当前情况下指的是localhost/markdown。

重点说一下传参

export default function Home({ params }: { params: { slug?: string[] } })

位于page.tsx，由于url不能传特殊符号比如空格，会转译成百分比url，这时就会有聪明的孩子选择decodeURIComponent和encodeURIComponent，注意，只有在组件函数里才需要对slug进行decodeURIComponent，在generateStaticParams不需要encodeURIComponent。

什么意思呢，具体代码：

上面这个图里你肯定会想要把generateStaticParams函数里的slug给encode一下，实测告诉你不行，它会影响url访问，导致你访问不到，必须让它裸着，让它自动encode才能访问到。