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

发布于06月11日

我有一个带有动态路由//blog//[slug]/code>的Next.js(13.4.5版)应用程序.我希望出口的应用程序作为一个静态的网站.以下是目录 struct :/p>

//app
  //blog
    //[slug]
      page.jsx
    page.jsx
  layout.jsx
  globals.css
  ...
/code>/pre>
和next.config.js/code>分的内容:/p>
const nextConfig = {
  output: 'export',
  trailingSlash: true,
}

module.exports = nextConfig
/code>/pre>
运行命令npm run build/code>后，//out/code>目录下生成的文件如下:/p>
//out
  //.next
  //404
  //blog
    index.html
    index.txt
  404.html
  index.html
  index.txt
  ...
/code>/pre>
一百零二/p>


在运行Next Build时，Next.js会将静态导出生成到Out文件夹中.不再需要使用下一个导出.例如，假设您有以下路由:/p>

///p>

//blog//[id]/p>

运行Next Build后，Next.js将生成以下文件:/p>

//out//index.html/p>

//out//404.html/p>

//out//blog//post-1.html/p>

//out//blog//post-2.html/p>
/blockquote>

In previous version I can use getStaticPaths/code> and getStaticProps/code> to pre-render pages. But these methods are not supported in new version with new App Router./p>
How can I generate .html files in new version ("next": "13.4.5",) for route //blog//[slug]/code>?/p>

// 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 // ... }

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

推荐答案

Reactjs相关问答推荐

呈现组件元素(MAP)中的问题

在react.js的条形图中获取错误&unfined是不可迭代的

如何解决Reaction中遗留的上下文API错误？

如何通过reactjs正确显示记录

根据处于react 状态的数组的名称键，将新对象添加到嵌套的对象数组中

找不到名称setCometChat

console.logs 没有显示在浏览器控制台上，但显示在我的终端上

如何根据ReactJS中元素列表中的布尔值仅显示一次值

组件安装后调用自定义钩子

Mui / Material UI 5：如何从 StaticTimePicker 中删除打开下一个视图/打开上一个视图按钮？

基于 React/NextJS Timer 的文本淡入/淡出不起作用

从服务器获取数据时未定义，错误非法调用

null 不是对象(判断RNSound.IsAndroid)

Github 页面无法正确呈现 CSS，因为它是本地的

如何向 surveyjs 调查添加多个结尾？

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用？

如何在 Reactjs 中判断受保护路由上的用户角色？

如何在 react-router-dom v6 中实现监听功能？

找不到元素 - 这是参考问题吗？

React 似乎在触发另一个组件时重新渲染了错误的组件