🐙

DjangoユーザーのためのNext.js入門──ルーティングからテンプレートまでの対応関係で学ぶ

に公開
Django
Next.js
tech

はじめに

Djangoを知っている人にとって、Next.jsは「ReactベースのWebアプリケーションフレームワーク」という説明だけでは少し抽象的かもしれません。ここでは、Djangoのコード例と比較しながら、Next.jsの設計思想と役割を明確に伝えていきます。

まず大きな違いとして、Djangoがフルスタック（テンプレート・ルーティング・DB ORM・認証・管理画面などを網羅）であるのに対し、Next.jsは主にフロントエンドの構築に特化しています。ただし、Next.jsにはサーバーサイドの処理（APIやページのSSR）も含まれており、「Reactベースのフルスタック・フロントエンドフレームワーク」と言える立ち位置です。

ルーティング

Djangoでは、urls.py にURLパターンを定義し、それを views.py の関数にマッピングします。たとえば /hello/ にアクセスすると hello_view が呼び出される、といった具合です。

urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("hello/", views.hello_view, name="hello"),
]

views.py
from django.http import HttpResponse

def hello_view(request):
    return HttpResponse("Hello from Django")

Next.jsでは、pages ディレクトリに置かれたファイルのパスがそのままURLにマッピングされます。ルーティングの仕組みがファイル構造と直結しており、直感的です。

// pages/hello.js
export default function Hello() {
  return <div>Hello from Next.js</div>;
}

このファイルを作るだけで /hello というURLができあがります。urls.py のような定義は不要です。

テンプレートとUI

DjangoはテンプレートエンジンでHTMLを生成します。テンプレートには変数を埋め込み、Pythonから値を渡します。

<!-- templates/hello.html -->
<h1>Hello {{ name }}</h1>

def hello_view(request):
    return render(request, "hello.html", {"name": "Taro"})

Next.jsでは、JSXというHTMLに近い構文を使ってUIを記述します。変数展開はJavaScriptの文法に基づいて行います。

// pages/hello.js
export default function Hello() {
  const name = "Taro";
  return <h1>Hello {name}</h1>;
}

Djangoのテンプレートよりも柔軟で、状態の管理や条件分岐をコンポーネントの中で完結できます。

APIとの統合

DjangoではAPIエンドポイントを views.py に定義し、JsonResponse などで返します。

from django.http import JsonResponse

def api_data(request):
    return JsonResponse({"message": "Hello from API"})

Next.jsもAPIルーティングの仕組みを持っており、pages/api/ 以下に置いたファイルがAPIエンドポイントになります。

// pages/api/data.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API" });
}

つまり、Next.jsはUIとAPIを同じコードベースにまとめて構築できる設計になっています。

静的ファイルとビルド

Djangoは collectstatic で静的ファイルをまとめてサーバーに配置し、NginxやCDN経由で配信します。

一方、Next.jsはビルド時に静的HTMLを生成（Static Site Generation, SSG）したり、リクエストに応じてHTMLを生成（Server Side Rendering, SSR）したりと、目的に応じて出力方法を切り替えられます。

この柔軟性により、SEO対策が必要なページはSSRで、頻繁に更新されないページはSSGで、といった最適化が可能です。

まとめ

Next.jsは、Djangoと比べると「フロントエンドの開発体験を最大限に高めたReactフレームワーク」です。

Djangoにおける urls.py や views.py の役割を、Next.jsでは pages/ ディレクトリ内のファイル構成で自然に担います。テンプレートエンジンは使わず、React + JSXによる宣言的UIが基本です。また、Django REST Frameworkに相当する簡易APIもNext.js内で定義できます。

Djangoのバックエンドと連携する場合は、Next.jsをフロントエンドとして、API通信（fetchやAxios）を通じてデータのやり取りを行う構成が一般的です。

Djangoを使ってきた人にとって、Next.jsはテンプレートやルーティングの概念をフロントエンドに置き換えた進化系とも言えます。Reactに慣れていなくても、Djangoとの対応関係を意識すれば、構造の理解は非常にスムーズだと思います。

Discussion