この記事の内容

この記事を読むと，以下の2点について理解できます．

• Next.jsの種類
• Next.jsのプロジェクトの始め方

Next.js の種類

開始早々ですが，とても大切なことをここで明言します．Next.jsにはApp RouterとPages Routerの2通りのルーティング方式があります(ここでのルーティングは，簡単にいうとディレクトリ構成のことです．難しくいうと，ページからページへ飛ぶ時にどのように移動するか指定するものとなります)．簡単にそれぞれの特徴をまとめます．もっと大事なことが後ろにあるので，読まなくていいです．

方式	概要	メリット	デメリット
App Router	難しい！	パフォーマンスが高い	導入が複雑，小規模プロジェクトでは過剰
Pages Router	簡単！	シンプルでわかりやすい	クライアント側ベースでしか書けない

めちゃくちゃ雑に書きました．なぜなら，結論が既に決まっているからです．

Next.jsを使うならば，特別な理由がない限り"App Router"を使え

理由は2点です．

1. App Routerの方が新しい

• Pages RouterはApp Routerより後の2022年10月にリリースされました．ここまで最新の技術ならば，それは最新の技術が詰め込まれているに違いないのです．

1. 今後のため

• App Routerは今後のNext.jsに標準になっていくことが考えられます．そのため，Pages Routerは廃れていくはずです．あえて，Pages Routerを選ぶ必要はないです．

たまに見かける内容として，「Pages Routerは小規模なプロジェクトにはちょうどいい」という声もあります(そうなのか？)．正直そこは好みやチームによっても分かれる部分だと思うので，深入りはしません．著者としては，「App Routerを使えるならばそちらの方がいいだろう」というスタンスでいようと思います．

以下では，App RouterとPages Routerの違いについて，もう少し掘り下げた内容を書いています．

App RouterとPages Routerの違い

Next.jsのプロジェクトの始め方

この記事ではもう少し進めて，Next.jsのプロジェクトの始め方も残しておきます．とは言っても，そのような記事はそこらじゅうに落ちていますし，始め方のみであれば公式Docsをそのまま読むだけでもわかると思います．聞かれる内容は全部「Yes」と答えればとりあえず困ることはありません．

npx create-next-app@latest

なお，この記事では他記事との差別化を図るために，今後ずっとお世話になるnpxコマンドやnpmコマンドについても解説します．よくわからないコマンドが怖いと言う人は，以下の記事を参照してください．

npmとnpxコマンド

次回からは，Next.jsを用いて実際にこのサイトがどのように作られているのかをみていきます．

ご愛読ありがとうございました！