Next.jsについて

Posted at 2025-05-29

はじめに

Reactのフレームワークはいくつかありますが、その中で最も利用されているのがNext.jsです。今回はNext.jsについて基礎から振り返り、理解を深めようと思います。

2016年頃にVercel（旧Zeit）によって公開された、ReactをベースにしたフルスタックのWebアプリケーションフレームワークです。サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）といった機能に対応し、高速でSEOにも強いWebアプリケーションを構築することができます。

サーバーサイドレンダリング（SSR）
ユーザーのリクエスト時にサーバー上でHTMLを動的に生成し、ブラウザ側に返す手法です。これにより、初期表示が速くなりSEOを向上させることができます。
静的サイト生成（SSG）
ビルド時に全てのHTMLを生成して、コンテンツデリバリーネットワーク（CDN）を活用して配信する方法です。既に生成された静的なページが返されるため、サーバーの処理が不要で高速にレンダリングされます。

Next.jsには大きく分けて2つのルーティング方法があります。

1. Page Router
Next.jsの初期バージョンから存在するルーティング方法です。pages/ ディレクトリ内にファイルを置くことで自動的にルートが生成されます。

ディレクトリ構成例

pages/
├── index.tsx      トップページ（/）
├── about.tsx      /about
├── blog/
│   └── [id].tsx   /blog/[id]

2. App Router
Next.js 13から導入されたルーティング方法で、Page Routerと比べて柔軟で高度なルーティングができます。app/ ディレクトリを使ってページ・レイアウトなどが構成されます。

ディレクトリ構成例

app/
├── layout.tsx          全体レイアウト
├── page.tsx           トップページ（/）
├── about/
│   ├── page.tsx       /about
    └── layout.tsx     /about専用レイアウト

Node.jsのダウンロードやnpxのインストールを行った上で、下記のコードで新しいNext.jsのアプリを作成します。

npx create-next-app@latest hello-next

設定を終えた後、開発サーバーを起動すれば、Next.jsの初期画面が表示されます。

cd hello-next
npm run dev

Next.jsについて振り返りましたが、Page RouterとApp Routerについて忘れていた部分があったので振り返って学習して良かったです。
Next.jsは現在主流のReactフレームワークの一つなので、また基礎部分のインプット、アウトプットをしていきたいです。

アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニアを募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！