Next.jsとは

Next.jsは、ReactベースのオープンソースのJavaScriptフレームワークです。主にウェブアプリケーションや静的ウェブサイトの開発に使用されます。

サーバーサイドレンダリングや静的サイト生成など、ページの生成方法が多様に用意されています。またその組み合わせで、より詳細なキャッシュ制御にを行うこともできます。

Next.jsは使いやすさと高いパフォーマンスを兼ね備えたフレームワークであり、多くの開発者に選ばれています。

またmicroCMSのようなヘッドレスCMSとは相性がよく、ヘッドレスCMSを利用する開発においては、特に採用される比率の高いフレームワークとなっています。

詳しくはNext.jsの公式サイトをご覧ください。

構築方法について

Next.jsには構築方法において、Pages RouterとApp Routerという2種類の方法があります。

Pages Router

Next.jsで従来から利用されてきた構築の方法です。
構築方法が比較的シンプルなため、素早くセットアップすることができます。またPages Routerを利用した構築のナレッジやライブラリなどのエコシステムが充実しています。
ただし新規にNext.jsを利用したアプリケーションを作成する際には、現在はApp Routerを利用することが推奨されています。（サポートは現在も継続されています。）

App Router

Next.jsのバージョン13から利用可能となった最新の構築方法です。Pages Routerと比較して、コンポーネント単位やリクエスト単位での細かいキャッシュ制御、レンダリング制御が可能となるため、より高パフォーマンスなアプリケーションを作ることができます。
一方で正式版となってまだ日が浅いことから、周辺のエコシステムが発達していない、Pages Routerと比較するとやや複雑になる、といったデメリットがあります。

こちらのチュートリアルでは、Pages RouterとApp Routerでの構築方法について、それぞれご紹介します。