随着 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自动更新组件。
对于图像组件，删除已弃用的属性，例如responsive.

• 动画

动画相关组件，如framer、swiper和lootie文件需要保存在客户端。

结论

迁移到 Next.js App Router 带来了挑战，但也带来了性能、可扩展性和灵活性方面的显着改进。通过将迁移分解为可管理的部分（应用程序级别、页面级别和功能更新），我能够系统地处理每个更改。

如果您对自己的迁移有任何疑问或提示，请告诉我！