Next.js App Router 迁移
2025-07-28
今天对博客代码进行了更新，next更新到了"^15.4.4"，从原来的 Pages Router 架构迁移到了 App Router。这次迁移主要完成了以下内容：
- 将原先的
pages/*/index.tsx页面迁移至app/*/page.tsx - 将
_document.tsx和_app.tsx合并为新的app/layout.tsx - 原本使用
getStaticProps的页面数据获取逻辑，改为在组件内部通过fetch请求 - 包含 hooks 的组件单独拆分，并加上
use client标识（因为 hooks 只能在客户端组件中使用） use client的组件并不影响首屏渲染：可以在page.tsx中获取数据后通过 props 传入客户端组件，从而既支持服务端渲染首屏，也能在客户端实现如定时刷新等交互功能- 完全运行在服务端的代码（如数据请求函数）可以使用
'use server'显式标注 - Markdown 渲染由原来的
remark方案切换为react-markdown，主要是因为remark与App Router存在一些兼容性问题 - 删除所有
Head，layout.tsx中可以直接使用<head></head>设置cdn导入等。App Router中不再使用<Head>，而是通过metadata配置导出，支持静态或异步生成页面meta信息。
1export const metadata = { 2 title: '博客标题', 3 description: '博客描述', 4};
对于动态页面，如Post详情
1export async function generateMetadata({ params }: { params: Promise<IParams> }) { 2 const postData = await getPostData((await params).id) 3 if (!postData) { 4 return { 5 title: 'Post Not Found', 6 } 7 } 8 return { 9 title: postData.title, 10 } 11}
- react-toastify 升级到最新版解决报错问题
- 对于需要每次都动态渲染的页面，使用
1export const dynamic = 'force-dynamic'
总结
App Router 更加强调对 Server 和 Client 组件的明确区分，默认使用服务端渲染，并支持灵活的客户端交互方式。这种架构简化了原先的一些繁琐配置，让开发流程更加清晰，组件职责也更加明确。