Next.js第十八章(静态导出SSG)-编程阁

静态导出SSG

Next.js 支持静态站点生成（SSG，Static Site Generation），可以在构建时预先生成所有页面的静态 HTML 文件。这种方式特别适合内容相对固定的站点，如官网、博客、文档等，能够提供最佳的性能和 SEO 表现。

配置静态导出

需要在next.config.js文件中配置output为export，表示导出静态站点。distDir表示导出目录，默认为out。

importtype{NextConfig}from"next";constnextConfig:NextConfig={/* config options here */output:"export",// 导出静态站点distDir:"dist",// 导出目录};exportdefaultnextConfig;

接着我们执行npm run build命令，构建静态站点。

构建完成之后，我们安装http-server来启动静态站点。

npminstallhttp-server -g#安装http-servercddist#进入导出目录http-server -p3000#启动静态站点

启动完成之后发现点击a标签无法进行跳转，是因为打完包之后的页面叫about.html,而我们的跳转链接是/about，所以需要修改配置项。

修改配置项

需要在next.config.js文件中配置trailingSlash为true，表示添加尾部斜杠，生成/about/index.html而不是/about.html。

importtype{NextConfig}from"next";constnextConfig:NextConfig={/* config options here */output:"export",// 导出静态站点distDir:"dist",// 导出目录trailingSlash:true,// 添加尾部斜杠，生成 /about/index.html 而不是 /about.html};exportdefaultnextConfig;

此时重新点击a标签就可以进行跳转了。

动态路由处理

新建目录:src/app/posts/[id]/page.tsx

如果要使用动态路由，则需要使用generateStaticParams函数来生成有多少个动态路由，这个函数需要返回一个数组，数组中包含所有动态路由的参数，例如{ id: '1' }表示对应id为1的详情页。

exportasyncfunctiongenerateStaticParams(){//支持调用接口请求详情id列表 const res = await fetch('https://api.example.com/posts')return[{id:'1'},//返回对应的详情id{id:'2'},]}exportdefaultasyncfunctionPost({params}:{params:Promise<{id:string}>}){const{id}=awaitparamsreturn(<div><h1>Post{id}</h1></div>)}

图片优化

如果使用Image组件优化图片，在开发模式会进行报错

⚠️ 警告

get-img-props.ts 442 Uncaught Error: Image Optimization using the default loader is not compatible with{ output: 'export' }.

可能的解决方案：

移除{ output: 'export' }并运行 "next start" 以启用包含图片优化 API 的服务器模式。
在next.config.js中配置{ images: { unoptimized: true } }来禁用图片优化 API。
使用自定义loader实现

了解更多：https://nextjs.org/docs/messages/export-image-api

importImagefrom"next/image"importtestfrom'@/public/1.png'exportdefaultfunctionAbout(){return(<div><h1>About</h1><Image loading="eager"src={test}alt="logo"width={250*3}height={131*3}/></div>)}

我们使用自定义loader来实现图片优化,要求我们通过一个图床托管图片。路过图床是一个免费的图床，我们可以使用它来托管图片。

importtype{NextConfig}from"next";constnextConfig:NextConfig={/* config options here */output:"export",// 导出静态站点distDir:"dist",// 导出目录trailingSlash:true,// 添加尾部斜杠，生成 /about/index.html 而不是 /about.htmlimages:{loader:'custom',// 自定义loaderloaderFile:'./image-loader.ts',// 自定义loader文件},};exportdefaultnextConfig;

根目录：/image-loader.ts

exportdefaultfunctionimageLoader({src,width,quality}:{src:string,width:number,quality:number}){return`https://s41.ax1x.com${src}`}

src/app/about/page.tsx

importImagefrom"next/image"exportdefaultfunctionAbout(){return(<div><h1>About</h1><Image loading="eager"src='/2025/12/29/pZYbW7t.jpg'alt="logo"width={250*3}height={131*3}/></div>)}