随着 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@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 带来了挑战，但也带来了性能、可扩展性和灵活性方面的显着改进。通过将迁移分解为可管理的部分（应用程序级别、页面级别和功能更新），我能够系统地处理每个更改。
如果您对自己的迁移有任何问题或建议，请告诉我！
以上就是实用指南 – 迁移到 Nextjs App Router的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491984.html
微信扫一扫 
支付宝扫一扫 
