Next.js 中为什么 App Router 可能是未来，但 Pages Router 依然重要？
Next.js 作为一个强壮的 React 结构，为开发者供给了两种路由体系：App Router 和 Pages Router。这两种路由体系各有特色，适用于不同的场景。本文将深入探讨这两种路由体系的差异、优缺陷和运用场景，协助你做出最佳挑选。
App Router：新一代的路由革新
App Router 是 Next.js 13 引进的新路由体系，它运用 app 目录来安排路由，带来了许多令人兴奋的新特性。
长处：
-
React 服务器组件支撑：这是一个游戏规则改动者，答应在服务器端烘托杂乱组件，大大提高了功能。
-
灵敏的布局体系：经过嵌套布局，你可以更简略地创立杂乱的页面结构。
-
内置加载 UI 和错误处理：供给了更好的用户体会，无需额定装备。
-
功能优化：得益于服务器组件和其他优化，App Router 一般能供给更好的功能。
-
并行路由：答应在同一布局中一起烘托多个页面。
缺陷：
-
学习曲线较陡：关于习惯了传统 React 开发的人来说，或许需求一些时刻来习惯。
-
第三方库兼容性：一些老旧的库或许不兼容新的服务器组件形式。
-
仍在发展中：作为较新的技能，或许会有一些不知道的问题或改变。
Pages Router：经典牢靠的挑选
Pages Router 是 Next.js 的传统路由体系，运用 pages 目录来安排路由。它仍然是许多项目的首选，特别是关于较老的 Next.js 版别。
长处：
-
简略易上手：关于初学者来说，学习曲线相对陡峭。
-
文件体系路由直观：路由结构与文件结构一一对应，易于了解和办理。
-
丰厚的社区资源：由于运用时刻较长，有很多的教程、示例和第三方库支撑。
-
安稳性高：经过多年的运用和优化，bug 较少，体现安稳。
缺陷：
-
不支撑 React 服务器组件：无法运用这一新特性带来的功能提高。
-
布局体系相对简略：完成杂乱布局或许需求更多的代码和装备。
-
数据获取办法较为固定：首要依靠
getServerSideProps和getStaticProps，灵敏性较低。
实战比照：博客页面完成
让咱们经过一个简略的博客页面来比照这两种路由体系的完成方法：
Pages Router 完成
// pages/posts/[id].js
import { useRouter } from 'next/router';
export default function Post({ post }) {
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();
return { props: { post } };
}
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
const paths = posts.map(post => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: true };
}
在这个比如中，咱们运用 getStaticProps 和 getStaticPaths 来完成静态生成。这是 Pages Router 的典型用法，合适内容不常常改变的博客文章。
App Router 完成
// app/posts/[id]/page.js
import { notFound } from 'next/navigation';
async function getPost(id) {
const res = await fetch(`https://api.example.com/posts/${id}`);
if (!res.ok) return undefined;
return res.json();
}
export default async function Post({ params }) {
const post = await getPost(params.id);
if (!post) {
notFound();
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
App Router 的完成愈加简练。这儿咱们直接在组件中进行异步数据获取，这得益于 React 服务器组件的支撑。一起，咱们运用 notFound 函数来处理文章不存在的状况，这是 App Router 供给的内置错误处理机制之一。
怎么挑选？
挑选 App Router 仍是 Pages Router，没有肯定的对错。以下是一些主张：
-
项目规划和杂乱度：关于大型、杂乱的项目，App Router 的灵敏性和功能优势或许更有吸引力。
-
团队了解度：假如团队对 Next.js 较为生疏，或许从 Pages Router 开端更简略上手。
-
功能需求：假如项目对功能有较高要求，App Router 的服务器组件或许是更好的挑选。
-
项目时刻线：关于需求快速开发的项目，Pages Router 或许更合适，由于学习本钱较低。
-
未来展望：考虑到 Next.js 的发展方向，长时刻来看，把握 App Router 或许更有优势。
个人经历共享
作为一个初运用 Next.js 的开发者，我开端对 App Router 也感到困惑。可是，当我开端处理杂乱的布局和需求优化功能的场景时，App Router 的优势就显现出来了。
例如，在一个需求频频更新的数据密集型运用中，App Router 的服务器组件让我可以在服务器端处理大部分数据逻辑，明显减少了传输到客户端的 JavaScript 数量，提高了运用的全体功能。
但是，关于一些简略的项目或许时刻急迫的状况，我仍然会挑选 Pages Router。它简略直接，能让我快速建立原型并上线。
定论
App Router 和 Pages Router 各有千秋，挑选哪一个取决于你的详细需求和场景。
我的主张是：不要惧怕测验新事物。即便你现在运用的是 Pages Router，也值得花些时刻了解 App Router。
究竟，技能在不断进步，坚持学习才干不被筛选。
记住，技能仅仅东西，真实重要的是解决问题和发明价值。挑选最合适你的东西，才干事半功倍。
结语
前次写了一个用于批量整理无用库房的东西，假如感兴趣那就去看看 😊
介绍文章： https://mp.weixin.qq.com/s/t7lgc6b7xJiNhfm5vWo5-A
GitHub 库房地址： https://github.com/yaolifeng0629/del-repos
假如你觉得这个东西对你有所协助，请不要忘掉给我的 GitHub 库房点个 Star！你的支撑是我行进的动力！
感谢阅览，咱们下次再会！
