如何在Next.js应用程序中为route [slug]生成.html文件？

dkqlctbz 于 2023-06-22 发布在其他

关注(0)|答案(1)|浏览(142)

我有一个Next.js（版本13.4.5）应用程序，它具有动态路由/blog/[slug]。我希望将应用程序导出为静态网站。下面是目录结构：

/app
  /blog
    /[slug]
      page.jsx
    page.jsx
  layout.jsx
  globals.css
  ...

next.config.js的含量：

const nextConfig = {
  output: 'export',
  trailingSlash: true,
}

module.exports = nextConfig

运行npm run build命令后，在/out目录下生成的文件如下：

/out
  /.next
  /404
  /blog
    index.html
    index.txt
  404.html
  index.html
  index.txt
  ...

路由/blog/[slug]没有生成.html文件，与官方文件中描述的不一样：

当运行下一个构建时，Next.js将静态导出生成到out文件夹中。不再需要使用下一个导出。例如，假设您有以下路由：
/
/blog/[id]
运行下一次构建后，Next.js将生成以下文件：
/out/index.html
/out/404.html
/out/blog/post-1.html
/out/blog/post-2.html
在以前的版本中，我可以使用getStaticPaths和getStaticProps来预渲染页面。但这些方法在新的应用程序路由器的新版本中不受支持。
如何在新版本中生成.html文件（“下一步”：“13.4.5”，），用于路由/blog/[slug]？

next.js

来源：https://stackoverflow.com/questions/76448833/how-to-generate-html-files-for-route-slug-in-next-js-app

1条答案

按热度按时间

x3naxklr1#

您需要使用generate-static-params

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

赞(0）回复(0）举报 2023-06-22

我来回答

如何在Next.js应用程序中为route [slug]生成.html文件？

1条答案

相关问题

热门标签

最新问答