实用指南 - 迁移到 Nextjs App Router

随着 next.js app router 的发布，许多开发者都渴望迁移他们现有的项目。在这篇文章中，我将分享我将项目迁移到 next.js app router 的经验，包括主要挑战、变化以及如何使该过程更加顺利。

这是一种增量方法，您可以同时使用页面路由器和应用程序路由器。

为什么迁移到 next.js app router？

app router 具有以下几个优点：

通过迁移，您可以让您的应用程序面向未来，以利用最新的 next.js 功能。

迁移到 app router 的步骤

第一步是确保您的 next.js 和相关依赖项是最新的。运行以下命令来安装最新版本的 next.js 和 react：

npm install next@latest react@latest react-dom@latestnpm 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 带来了挑战，但也带来了性能、可扩展性和灵活性方面的显着改进。通过将迁移分解为可管理的部分（应用程序级别、页面级别和功能更新），我能够系统地处理每个更改。

如果您对自己的迁移有任何问题或建议，请告诉我！