博客升级到 Next.js 14 ，迁移到 app 路由，升级 SSG 模式

对博客进行了 Next.js 14 升级，整个过程非常平滑，很小的改动就可以获取全部新特性。迁移到新的 app 目录，并对应升级 SSG 模式，使得代码更简洁。

基础项目升级

升级依赖：

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
npm i -D @types/react @types/react-dom

打包命令改动：

这样就可以了，跑起来以及打包都一切正常，不得不说这升级也太简单了。

app 目录是新版本增加的路由模式，是可选的。文档默认使用 app router ，旧版的 pages router 仍然支持，在文档左上角可切换使用的路由模式。

针对 pages 升级为 app 路由，文档也提供了迁移指南：

操作：

把 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 等组件改为客户端组件

在 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