Next.jsとは？ HTML/CSSを書ける人のための入門ガイド

この記事は「WebデザイナーがAIに食われてみた」の関連記事です。

はじめに

HTML / CSS / JavaScript でWebサイトを作ったことがある方向けに、Next.jsとは何か、なぜ使うのかを説明します。

「Reactって聞いたことあるけどよくわからない」「フレームワークって難しそう」という方が、読み終わったときに「なるほど、そういうことか」と思えるのが目標です。

そもそもReactとは

Next.jsの話をする前に、Reactについて簡単に説明します。

HTMLの限界

普通のHTMLでサイトを作ると、ヘッダーやフッターを全ページにコピペすることになります。10ページあれば10回同じコードを書く。ヘッダーのリンクを1つ変えたければ、10ファイルを修正する。

これは面倒ですし、修正漏れの原因にもなります。

コンポーネントという考え方

Reactは、UIを「コンポーネント」という部品に分けて管理します。

ヘッダー → Header.js（1回書くだけ）
フッター → Footer.js（1回書くだけ）
お問い合わせフォーム → ContactForm.js（1回書くだけ）

これらを組み合わせてページを作ります。ヘッダーを変えたければ、Header.js を1つ修正するだけで全ページに反映されます。

HTMLとの違い

<!-- HTML（従来） -->
<div class="card">
  <h3>サービス名</h3>
  <p>説明文</p>
</div>

// React（コンポーネント）
function Card({ title, description }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

// 使うとき
<Card title="Webサイト制作" description="ディレクションから..." />
<Card title="コンサルティング" description="人材開発・組織開発で..." />

データを渡すだけで、同じ見た目のカードを何枚でも作れます。

じゃあNext.jsは何か

Reactだけだと、あくまで「UIを作るライブラリ」です。サイトを公開するには、他にもいろんな設定が必要になります。

• ページのURLをどう決めるか（ルーティング）
• 検索エンジンにどう認識させるか（SEO）
• 画像をどう最適化するか
• ビルド（公開用ファイルの生成）をどうやるか

Next.jsは、これらを全部まとめて提供してくれるフレームワークです。

料理に例えると

• HTML / CSS / JS ＝ 食材（自分で全部やる）
• React ＝ 調理器具（UIを作るのが楽になる）
• Next.js ＝ システムキッチン（道具も収納もレシピも揃っている）

Next.jsの主な機能

1. ファイルベースルーティング

ファイルを置くだけでURLが決まります。

src/app/page.js          → /（トップページ）
src/app/about/page.js    → /about
src/app/blog/page.js     → /blog
src/app/contact/page.js  → /contact

従来のように「ルーティング設定ファイルを書いて…」という作業が不要です。

2. サーバーコンポーネント

Next.js 13以降で導入された新しい仕組みです。

従来のReactでは、データを取得するためにブラウザ側でAPIを呼ぶ必要がありました。Next.jsのサーバーコンポーネントでは、サーバー側でデータを取得してからHTMLを生成するため、表示が速く、コードもシンプルになります。

// サーバーコンポーネント（Next.js）
// サーバーで実行されるので、直接データベースやAPIにアクセスできる
export default async function BlogPage() {
  const posts = await fetchPosts(); // サーバー側で実行される
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  );
}

3. 画像の自動最適化

<Image> コンポーネントを使うと、画像が自動的に最適化されます。

• 表示サイズに合わせてリサイズ
• WebPなどの最新フォーマットに自動変換
• 遅延読み込み（画面に入るまで読み込まない）

4. メタデータの管理

各ページにSEO用のメタデータを簡単に設定できます。

export const metadata = {
  title: "About | コツモ",
  description: "コツモについて。Webサイト制作・コンサルティング・受託開発を行うフリーランスのプロフィール。",
};

CSS Modulesとは

このサイトではスタイリングにCSS Modulesを使っています。

CSS Modulesは、普通のCSSファイルですが、クラス名がファイル単位でスコープされます。つまり、別のファイルと同じクラス名を使っても衝突しません。

/* Header.module.css */
.nav { display: flex; }

import styles from './Header.module.css';

function Header() {
  return <nav className={styles.nav}>...</nav>;
}

ビルド時に .nav が .Header_nav_x7k2a のようなユニークな名前に変換されるため、他のコンポーネントの .nav と干渉しません。

CSSの書き方自体は普通のCSSと全く同じなので、新しい構文を覚える必要がありません。

始め方

npx create-next-app@latest my-site
cd my-site
npm run dev

http://localhost:3000 でサイトが立ち上がります。

あとは src/app/page.js を編集するところから始めてみてください。

まとめ

概念	ひとこと
React	UIをコンポーネント（部品）として管理するライブラリ
Next.js	Reactにルーティング・SEO・最適化などを追加したフレームワーク
App Router	ファイル配置でURLが決まる仕組み
CSS Modules	クラス名が衝突しないCSS
サーバーコンポーネント	サーバー側でデータ取得→HTML生成する仕組み

HTMLとCSSが書ける人なら、Next.jsは思ったより遠い存在ではありません。「HTMLを直接書く代わりに、JSXという書き方でHTMLっぽいものを書く」のが基本です。

📖 メインの記事に戻る → WebデザイナーがAIに食われてみた