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 バージョンに対して、多くのプロジェクトで依然として選ばれています。
利点：#
-
シンプルで使いやすい：初心者にとって、学習曲線は比較的緩やかです。
-
ファイルシステムルーティングが直感的：ルーティング構造がファイル構造と一対一で対応しており、理解しやすく管理しやすいです。
-
豊富なコミュニティリソース：使用期間が長いため、大量のチュートリアル、サンプル、サードパーティライブラリのサポートがあります。
-
高い安定性：何年もの使用と最適化を経て、バグが少なく、安定したパフォーマンスを発揮します。
欠点：#
-
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>読み込み中...</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 リポジトリにスターを付けるのを忘れないでください！あなたのサポートが私の原動力です！
読んでいただき、ありがとうございました。また次回お会いしましょう！
