实用指南 - 迁移到 Nextjs App Router

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《实用指南 - 迁移到 Nextjs App Router》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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

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

理论要掌握，实操不能落！以上关于《实用指南 - 迁移到 Nextjs App Router》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！