Blog
ブログ

2025年10月08日

【8月技術ブログ】Next.jsとは？最新Web開発フレームワークを新人視点で紹介

こんにちは、新入社員のY·Dです。

この記事では、現在参加しているプロジェクトで活用しているNext.js の特徴や、実際に使ってみて感じたことを初心者の視点で共有します。

知識が十分ではありませんので、誤った認識や不正確な表現があるかもしれません。その点につきましてはどうかご容赦いただければ幸いです。

NEXT.JSとは？

Next.jsは、React をベースにしたクライアント側とバックエンド側の両方を開発できるフルスタックなWeb アプリ開発用フレームワークです。

　Next.jsの特長：

・サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などを標準で備えており、パフォーマンスと SEO の両立ができる

・追加のライブラリ不要で自動ルーティングを提供し、pages/ や app/ ディレクトリにファイルを置くだけでルーティングが設定される

・API Routes によりフロントエンドと同じプロジェクト内でバックエンドを実装でき、型やモジュールを共有して統合的に開発できる

4つのレンダリング方式とコンポーネント単位の最適化

Next.jsではCSR、SSR、SSG、ISRの4種類のレンダリング方式をコンポーネントごとに選べます。各機能に合わせて、最適なレンダリングの選択が可能になっています。

CSR（Client Side Rendering）

・ブラウザが空の HTML を受け取り、JavaScript ですべてのUI を構築。

・初期表示は遅めだが、ページ遷移は高速。

SSR（Server-Side Rendering）

・リクエストごとにサーバーで HTML を生成して返す。

・初期表示が速く、SEO に強い。

SSG（Static Site Generation）

・ビルド時に静的 HTML を生成して配信。

・パフォーマンスが一番高く、安定している。

ISR（Incremental Static Regeneration）

・静的ページを定期的に自動更新できる。

・SSG の高速性と SSR の柔軟性を両立。

Next.js 13 以降の App Router では、コンポーネント単位でレンダリング方式やキャッシュ戦略を選択できるため、パフォーマンスとサーバーコストのバランスを細かく調整し、プロジェクトに最適な落とし所を見つけることができます。

App Router のルーティングの仕組み

Next.js には Pages Router と App Router の 2 種類のルーティング方式があります。
従来から使われてきた Pages Router に対して、App Router は React Server Components や Streaming、柔軟なレイアウト管理など新しい仕組みを取り入れており、Next.js 13 以降では標準的な選択肢となりつつあります。
ここでは、その App Router の特徴とメリットを中心に紹介します。

App Router では、app/ ディレクトリの構造がそのままルーティングに対応し、page.tsx を置くだけでページとして扱われ、ディレクトリ名がそのままパスに反映されます。さらに、各階層に layout.tsx を配置することで共通 UI を簡単に共有でき、[id] を使えば動的なルーティング定義も可能です。

my-next-app/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ ├── about/
│ │ └── page.tsx
│ ├── dashboard/
│ │ ├── layout.tsx
│ │ └── page.tsx
│ └── posts/
│ ├── [id]/
│ │ └── page.tsx
│ └── page.tsx
├── public/
├── styles/
├── next.config.js
└── package.json

ページコンポーネント:

//app/page.jsx
export default function HomePage() {
  return <p>Home Page</p>;
}

レイアウト:

//app/dashboard/layout.tsx
export default function DashboardLayout({ children: React.ReactNode }) {
  return (
    <div>
      <h2>ダッシュボード</h2>
      <nav>
        <a href="/dashboard">ホーム</a> | 
        <a href="/dashboard/settings">設定</a>
      </nav>
      <div>{children}</div>
    </div>
  );
}

動的ルーティング:

//app/posts/[id]/page.tsx
'use client'
import { useParams } from 'next/navigation'

export default function PostPage(){
  const params = useParams<{ id: string}>();
  
  return <div> Post: {params.id} </div>; 
}

API Routes によるバックエンド統合

Next.js では、app/api/ または pages/api/ ディレクトリにファイルを作成するだけで、そのまま API エンドポイントとして利用できます。Express などの外部フレームワークを導入する必要はなく、フロントと同じプロジェクト内で簡易バックエンドを構築できます。

・app/api/hello/route.ts → /api/hello

・app/api/posts/[id]/route.ts → /api/posts/123

さらに、TypeScript を使えばフロントとバックエンドで型やモジュールを共有でき、リクエストやレスポンスの定義にズレが生じにくく、統合的に開発を進められるのが大きな利点です。

例：

//app/api/hello/route.ts 
export default function handler(req, res) { 
  res.status(200).json({ message: 'Hello, Next.js API!' }); 
}

このファイルにより、/api/hello へアクセスすると { message: ‘Hello, Next.js API!’ } という JSON データが返されます。API Routes を利用すれば、Next.js アプリ内でサーバーレスな API を手軽に作成し、クライアントからのリクエストに応答できます。

まとめ

今回の記事では、Next.js の特徴や実際に使ってみて感じたことを新人の視点から紹介しました。

Next.js はフロントとバックの境界をシームレスにし、効率的なフルスタック開発を可能にするフレームワークだと感じました。まだまだ理解が浅い部分もありますが、実際のプロジェクトで触れながら少しずつ学びを深めていきたいと思います。今後も Next.js を活用しつつ、成長していければ嬉しいです。

Blogブログ