随着 next.js app router 的发布，许多开发者都渴望迁移他们现有的项目。在这篇文章中，我将分享我将项目迁移到 next.js app router 的经验，包括主要挑战、变化以及如何使该过程更加顺利。
这是一种增量方法，您可以同时使用页面路由器和应用程序路由器。
为什么迁移到 next.js app router？
app router 具有以下几个优点：
- 改进的路由：更清晰的基于文件系统的路由。
- 服务器端渲染 (ssr) 增强功能：更高效地处理服务器端数据。
- 元处理：简化的 seo 管理。
- 改进的性能：针对各种组件的内置优化。
通过迁移，您可以让您的应用程序面向未来，以利用最新的 next.js 功能。
迁移到 app router 的步骤
- 更新依赖项
第一步是确保您的 next.js 和相关依赖项是最新的。运行以下命令来安装最新版本的 next.js 和 react：
npm install next@latest react@latest react-dom@latest npm install -d eslint-config-next@latest
- 构建应用程序文件夹
app router 依赖新的应用程序目录来管理路由、元数据和布局。以下是如何构建它：
应用程序文件夹：将页面移动到应用程序文件夹中。现在，每条路线都有自己的专用文件夹，其中包含 page.tsx 文件。
布局：添加layout.tsx 文件来定义应用程序特定部分的布局。这对于处理导航栏或页脚等共享组件特别有用。
- 路由器更改
最重要的变化之一是将 next/router 替换为 next/navigation，用于路由和导航功能。
将所有 next/router 导入替换为 next/navigation。
在适当的情况下使用新的等效项更新 userouter 等函数，例如 usepathname、usesearchparams 和 userouter()。
- 重构服务器端代码
getserversideprops 和 getstaticprops 在 app router 中已弃用。
使用异步服务器组件或服务器操作在服务器端页面中获取数据。
export async function getData() {
const res = await fetch('https://getData.com/data');
return res.json();
}
- 处理客户端组件
客户端组件：
任何使用 react hooks、浏览器 api 或用户交互的组件都必须标记为“使用客户端”。这告诉 next.js 在客户端渲染它们。
服务器组件：
任何不需要与浏览器交互的组件都可以保留为服务器组件。这些更加高效，因为它们避免了向客户端发送不必要的 javascript。
- 处理外部库
如果您正在使用 react query、antdesign 或 framer 等外部库。您需要更新它们并根据需要进行更改。无法在此博客中包含所有更改。尽管他们的文档中提到了更改。
迁移过程中的常见挑战
- 路由器事件处理：
随着从 next/router 到 next/navigation 的更改，处理路由器事件可能需要不同的方法。
确保相应地更新任何路由器事件侦听器或挂钩。
- 布局转换问题：
迁移具有复杂布局的页面（尤其是具有动画的页面）时，您可能会注意到布局发生变化。添加占位符或在服务器端本身保持正确对齐，以防止布局变化。
- 图像和链接组件更新：
app router 引入了对图像和链接组件的更改。
使用codemods自动更新组件。
对于图像组件，删除已弃用的属性，例如响应式。
- 动画
与动画相关的组件，如框架、滑动器和战利品文件需要保存在客户端。
结论
迁移到 next.js app router 带来了挑战，但也带来了性能、可扩展性和灵活性方面的显着改进。通过将迁移分解为可管理的部分（应用程序级别、页面级别和功能更新），我能够系统地处理每个更改。
如果您对自己的迁移有任何问题或建议，请告诉我！
