代码之家 › 专栏 › 技术社区 › Nighon

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

nextjs13 server-side-rendering next.js reactjs

Nighon · 技术社区 · 2 年前

我有一个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
  ...

没有为路线生成.html文件 /博客/[slug] ,与 official document :

当运行下一个构建时,next.js会将静态导出生成到out文件夹中。不再需要使用下一个导出。例如,假设您有以下路线:

/

/博客/[id]

运行下一个版本后,next.js将生成以下文件:

/out/index.html

/out/404.html

/out/blog/poster1.html

/out/blog/poster.html

在以前的版本中,我可以使用 getStaticPaths 和 getStaticProps 以预渲染页面。但这些方法在带有新应用路由器的新版本中不受支持。

如何在新版本(“next”:“13.4.5”,)中为路由生成.html文件 /博客/[slug] ?

1 回复 | 直到 2 年前

Yilmaz 2 年前

你需要使用 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
  // ...
}

推荐文章

TheDomis4 · nextjs:链接元素导致水合错误

1 年前

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

1 年前

Kim · 带SSR的Angular 18:将优化设置为true会忽略脚本中加载的库

1 年前

Marya · 为什么我的API使用fetch发送电子邮件会产生未定义的响应,但仍然成功发送电子邮件

2 年前

Rafael · 为什么next.js中的picture元素不能使用隐藏属性?

2 年前

Dayvson Spacca · 如何使用nextjs中的服务器端组件从url获取params-id?

2 年前

Hamza Manan · 文本内容与使用i18n进行翻译的服务器呈现HTML不匹配

2 年前

Amir Abaris · Angular检测到“HttpClient”未配置为使用“fetch”API。(角17-SSR)

2 年前

kooru_hi · 通用加载函数如何在服务器端加载不可序列化的数据

2 年前

Tibo · 如何在Next JS中的_app文件中获取会话数据?

2 年前