对博客进行了 Next.js 14 升级，整个过程非常平滑，很小的改动就可以获取全部新特性。迁移到新的 app 目录，并对应升级 SSG 模式，使得代码更简洁。
基础项目升级
https://nextjs.org/docs/app/building-your-application/upgrading/version-14
升级依赖：
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
npm i -D @types/react @types/react-dom
打包命令改动：
- 打包命令从
next build && next expor中去掉next export，直接next build即可 - 配置文件增加
output: 'export',
这样就可以了，跑起来以及打包都一切正常，不得不说这升级也太简单了。
升级为 app 路由
app 目录是新版本增加的路由模式，是可选的。文档默认使用 app router ，旧版的 pages router 仍然支持，在文档左上角可切换使用的路由模式。
针对 pages 升级为 app 路由，文档也提供了迁移指南：
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration
目录与入口文件修改
操作：
- 把 pages 目录更名为 app
- 把
index.tsx更名为page.tsx, 直接用作路由的文件改为目录，内容写到page.tsx里 _app.tsx和_document.tsx改为layout.tsx<Head>标签修改- title、keywords、description 等改为导出的 metadata 或 generateMetadata ，文档： https://nextjs.org/docs/app/api-reference/functions/generate-metadata
- viewport 改为导出的 viewport ，文档： https://nextjs.org/docs/app/api-reference/functions/generate-viewport
- 把需要
useEffect和onClick等组件改为客户端组件
SSG 升级
在 pages 中，使用 getStaticPaths 去生成同类所有页面，使用 getStaticProps 去生成单个页面的入参，这些在 app 目录发生了改变。
- 使用 generateStaticParams 替换 getStaticPaths ，文档： https://nextjs.org/docs/app/api-reference/functions/generate-static-params
- getStaticProps 取消了，改为了直接在异步组件中获取数据
- 在 layout 中配置
export const dynamic = 'error';来达到 pages 目录 getStaticProps 的效果，如未生成的路由跳到 404 页面。文档： https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic