对博客进行了 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