Next.js 基礎まとめ
復習しやすいように、Next.jsの基礎を「概要 → ポイント → コード例」で整理しました。 App Router前提で書いています。
1. Next.jsとは
概要
Next.jsはReactをベースにしたフレームワークです。 React単体はUIを作るためのライブラリですが、Next.jsはルーティング、データ取得、画面の描画方式、 API実装など、Webアプリ開発で必要な仕組みをまとめて提供します。ポイント
ReactはUIライブラリ、Next.jsはWebアプリ全体を構築しやすくするフレームワーク ルーティングやレイアウトがファイル構成で決まる サーバー側の処理も同じプロジェクトで書ける SEOや初回表示速度を意識した構成を取りやすいコードの例
npx create-next-app@latest my-app
Reactを実務向けに拡張し、ルーティングやサーバー処理まで含めて開発しやすくしたのがNext.jsです。
2. App Router
概要
App Routerは、app ディレクトリを基準に画面やレイアウトを管理する仕組みです。 フォルダ構成がそのままURL構造に近くなるため、画面の整理がしやすいのが特徴です。ポイント
app/page.tsx はルートページを表す app/about/page.tsx は /about に対応する layout.tsx は共通UIを定義する ネストしたレイアウトで画面全体の構造を整理しやすいコード例
app/
├─ layout.tsx
├─ page.tsx
├─ about/
│ └─ page.tsx
└─ dashboard/
├─ layout.tsx
└─ page.tsx
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>{children}</body>
</html>
)
}
3. Server Component
概要
App Routerでは、コンポーネントはデフォルトでServer Componentです。 つまり、まずサーバー側で実行される前提でコンポーネントが扱われます。ポイント
デフォルトがServer Componentなので、何も付けなければサーバー側で実行される ブラウザへ送るJavaScript量を減らしやすい DBアクセスや安全なサーバー処理と相性が良い インタラクションが不要な表示に向いているコード例
// app/posts/page.tsx
export default async function PostsPage() {
const res = await fetch("https://example.com/api/posts")
const posts = await res.json()
return (
<ul>
{posts.map((post: { id: number; title: string }) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
Next.jsはデフォルトをServer Componentにすることで、不要なJavaScript送信を減らし、表示性能とサーバー処理の分離をしやすくしています。
4. Client Component
概要
Client Componentはブラウザ側で動くコンポーネントです。 ボタン操作、フォーム入力、状態管理など、ユーザー操作を扱うときに使います。ポイント
ファイル先頭に "use client" を書く必要がある useState、useEffect、イベントハンドラが使える 必要な場所だけClient Componentにするのが基本 全部をClient Componentにすると、Next.jsの利点が薄れやすいコード例
"use client"
import { useState } from "react"
export default function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
count: {count}
</button>
)
}
5. データ取得
概要
App Routerでは、Server Componentを async 関数にして、その中で直接データ取得できます。 これにより、ページ表示に必要なデータをサーバー側でまとめて取得しやすくなります。ポイント
Server Componentなら async function にできる fetch をコンポーネント内で直接使える 画面表示前に必要データを集めやすい DBや外部APIからの取得処理をサーバー側に寄せやすいコード例
// app/users/page.tsx
export default async function UsersPage() {
const res = await fetch("https://example.com/api/users")
const users = await res.json()
return (
<ul>
{users.map((user: { id: number; name: string }) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
6. API Routes（Route Handlers）
概要
App Routerでは route.ts を使ってAPIエンドポイントを作れます。 フロントエンド用の画面だけでなく、同じアプリ内でサーバー処理も持てるのが強みです。ポイント
app/api/... 配下に route.ts を置く GET、POST などHTTPメソッドごとに関数を書く DB操作や外部API呼び出しをまとめやすい フロントとAPIを同一リポジトリで管理しやすいコード例
// app/api/posts/route.ts
export async function GET() {
return Response.json([
{ id: 1, title: "Next.js" },
{ id: 2, title: "Prisma" }
])
}
// app/api/posts/route.ts
export async function POST(request: Request) {
const body = await request.json()
return Response.json({
message: "created",
data: body
})
}
7. Rendering戦略
概要
Next.jsは、ページをいつ生成するかを柔軟に選べます。 「リクエスト時に作るか」「ビルド時に作るか」「定期的に再生成するか」をしっかり理解することが重要。ポイント
SSR: リクエストごとにサーバーで生成 SSG: ビルド時に静的HTMLを生成 ISR: 静的生成しつつ、一定間隔で再生成 更新頻度や初回表示速度、SEO要件で使い分けるコード例
// ISRの例:60秒ごとに再生成する
export const revalidate = 60
export default async function Page() {
const res = await fetch("https://example.com/api/news")
const news = await res.json()
return <div>{news.title}</div>
}
8. Linkコンポーネント
概要
next/link は画面遷移用のコンポーネントです。 通常の a タグよりも、Next.jsのルーティング最適化を活かせます。ポイント
クライアントサイド遷移ができる プリフェッチにより遷移を高速化しやすい ページ移動の基本は Link を使うコード例
import Link from "next/link"
export default function HomePage() {
return (
<nav>
<Link href="/about">About</Link>
</nav>
)
}
9. Imageコンポーネント
概要
next/image は画像最適化のためのコンポーネントです。 画像サイズや読み込みを最適化しやすく、パフォーマンス改善につながります。ポイント
画像の最適化を前提に使える サイズ指定によりレイアウト崩れを防ぎやすい 通常の img よりNext.js向けの最適化が入るコード例
import Image from "next/image"
export default function Profile() {
return (
<Image
src="/profile.png"
width={300}
height={300}
alt="profile"
/>
)
}
10. 環境変数
概要
環境変数はDB接続先やAPIキーのような設定値をコードと分離して管理する仕組みです。 Next.jsではサーバー専用の値と、ブラウザで参照できる値を分けて扱います。ポイント
.env 系ファイルで管理する デフォルトでは環境変数はサーバー側のみで利用可能 ブラウザ側で使いたい変数は NEXT_PUBLIC_ を付ける 秘密情報は NEXT_PUBLIC_ を付けないコード例
# .env
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
NEXT_PUBLIC_API_BASE_URL="https://example.com/api"
// サーバー側
const dbUrl = process.env.DATABASE_URL
// クライアント側で参照可能
const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL
11. Prismaとの接続
概要
PrismaはTypeScriptと相性の良いORMです。 DBのテーブル設計を schema.prisma で管理し、生成されたPrisma Clientを通して型安全にデータ操作できます。ポイント
PrismaはDB操作を型安全に行いやすいORM schema.prisma にモデルを書く マイグレーションでDB構造を反映する Next.jsではServer ComponentやRoute Handlerから使うことが多いコード例
// prisma/schema.prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Event {
id Int @id @default(autoincrement())
title String
startDate DateTime
endDate DateTime
}
// lib/prisma.ts
import { PrismaClient } from "@prisma/client"
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined
}
export const prisma =
globalForPrisma.prisma ??
new PrismaClient()
if (process.env.NODE_ENV !== "production") {
globalForPrisma.prisma = prisma
}
// app/events/page.tsx
import { prisma } from "@/lib/prisma"
export default async function EventsPage() {
const events = await prisma.event.findMany()
return (
<ul>
{events.map((event) => (
<li key={event.id}>{event.title}</li>
))}
</ul>
)
}
DB接続の流れは、
「.envに接続情報を書く → schema.prismaでモデル定義 → migrateで反映 → Prisma Client経由で取得」となる。
12. ディレクトリ構成例
概要
Next.jsは自由度がありますが、責務ごとに分けると保守しやすくなります。 App Routerを使う場合は、画面、API、共通関数、DB接続を分ける構成がよく使われます。ポイント
app: 画面、レイアウト、Route Handler components: 再利用UI lib: Prismaや共通関数 prisma: スキーマとマイグレーションコード例
my-app/
├─ app/
│ ├─ layout.tsx
│ ├─ page.tsx
│ ├─ events/
│ │ └─ page.tsx
│ └─ api/
│ └─ events/
│ └─ route.ts
├─ components/
│ └─ Header.tsx
├─ lib/
│ └─ prisma.ts
├─ prisma/
│ └─ schema.prisma
├─ public/
└─ .env
13. 技術質問
Q1. Next.jsの強みは？
Next.jsはReactをベースにしたフレームワークで、ルーティング、サーバー処理、データ取得、描画方式の選択肢などを標準機能として提供しています。そのため、フロントエンドのUI開発だけでなく、APIやデータベース連携まで同じプロジェクト内で実装しやすい点が強みです。
Q2. Reactとの違いは？
ReactはUIを構築するためのライブラリです。一方、Next.jsはReactをベースにしながら、ルーティングやサーバーサイドレンダリング、API構築など、Webアプリ開発に必要な仕組みをまとめて提供するフレームワークです。
Q3. Server Componentとは？
Server Componentは、サーバー側で実行されるReactコンポーネントです。
データ取得やデータベースアクセスなどの処理と相性が良く、ブラウザに送るJavaScript量を減らすことができます。
一方で、クリックイベントやstate管理などブラウザ上で動く処理はClient Componentで扱います。
Q4. RESTとは？
REST（Representational State Transfer）は、Web APIを設計する際のアーキテクチャスタイルの一つです。
リソースをURLで表現し、HTTPメソッドを使ってそのリソースを操作します。
例えばユーザー情報を扱うAPIでは以下のように設計します。
GET /users ユーザー一覧を取得
GET /users/1 ユーザー詳細を取得
POST /users ユーザーを作成
PUT /users/1 ユーザー情報を更新
DELETE /users/1 ユーザーを削除
このように、URLでリソースを表現し、HTTPメソッドで操作を表す設計がRESTの特徴です。
Q5. HTTPステータスコードとは？
HTTPステータスコードは、サーバーがリクエストの結果をクライアントに伝えるための3桁の数値です。
主なステータスコードには以下があります。
200 リクエスト成功
201 データ作成成功
400 リクエストエラー
401 認証エラー
403 アクセス権限エラー
404 リソースが存在しない
500 サーバー内部エラー
このように、HTTP通信の結果をクライアントに伝える役割を持っています。
Q6. トランザクションとは？
トランザクションとは、複数のデータベース処理を1つのまとまりとして実行する仕組みです。
途中でエラーが発生した場合、すべての処理を元の状態に戻します。
例えば銀行振込では
A口座から1000円引く
B口座に1000円入れる
という2つの処理があります。
もし途中でエラーが発生した場合、A口座の処理も取り消すことでデータの整合性を保つことができます。
このように、複数の処理をまとめて安全に実行する仕組みがトランザクションです。
Q7. バリデーションとは？
バリデーションとは、ユーザーが入力したデータが正しい形式かどうかを確認する処理です。
例えば以下のようなチェックがあります。
必須入力チェック
文字数制限
メールアドレス形式チェック
数値チェック
このような確認を行うことで、不正なデータの登録を防ぎ、システムの安全性を高めることができます。
Q8. Reactのstateとは？
stateとは、Reactコンポーネントの内部で管理する状態データです。例えばカウンターの値やフォーム入力など、画面の状態を管理するために使用します。
stateが更新されると、Reactは自動的にUIを再レンダリングします。
例
const [count, setCount] = useState(0)
この場合、countがstateで、setCountによって状態を更新します。
Q9. Reactの再レンダリングはいつ起きる？
Reactの再レンダリングは主に以下のタイミングで発生します。
- stateが更新されたとき
- propsが変更されたとき
- 親コンポーネントが再レンダリングされたとき
例えば以下の処理を行うと再レンダリングが発生します。
setCount(count + 1)
このように、Reactは状態の変更を検知してUIを再描画します。
Next.jsの重要ポイント
- Next.jsはReactの拡張ではなく、Reactを土台にしたフレームワークである
React単体では足りないルーティング、データ取得、サーバー処理まで含めて提供するものです。
- App Routerでは、フォルダ構成が画面構成そのものになる
page.tsx はページ、layout.tsx は共通レイアウトです。 URL設計と画面設計が近くなるので、大規模化しても整理しやすいです。
- デフォルトがServer Componentであることが重要
これがApp Routerの前提です。まずサーバーで実行する設計にすることで、 不要なJavaScript送信を減らし、表示性能やデータ取得の整理をしやすくしています。
- Client Componentは必要最小限にする
"use client" を付けた場所だけがブラウザで動きます。 クリック、入力、状態管理が必要な部分だけに限定するのが基本です。
- データ取得はServer Component中心で考えると整理しやすい
画面表示に必要なデータをサーバー側で取得し、UIに渡す流れが自然です。 特にPrismaや外部APIと組み合わせると役割分担が明確になります。
- 描画方式を使い分けられるのがNext.jsの強み
SSRは毎回生成、SSGはビルド時生成、ISRは一定間隔で再生成です。 「どの画面は更新頻度が高いか」を軸に判断できるとよいです。
- LinkやImageなど、Next.js専用コンポーネントには意味がある
ただの書き方の違いではなく、遷移最適化や画像最適化など、フレームワークの利点を活かすために存在しています。
- 環境変数はサーバー用と公開用を分ける
NEXT_PUBLIC_ が付いたものだけがクライアントで参照可能です。 APIキーやDB接続情報を誤って公開しないことが大事。
- Prismaと組み合わせると、Next.jsはフルスタック開発の形を作りやすい
画面、API、DB操作を同じプロジェクトで扱えるため、個人開発でも設計の流れを説明しやすくなります。 カレンダーアプリのように、CRUD実装との相性も良いです。
以上がnext.jsのまとめになります。これからもコードを書きながら理解していきます！