[Next.js #01] 初期セットアップと最初の罠の抜け方

はじめに

以前からWEBサイトを新たに作ろうかと思っていて、2月になった節目にWEB制作プロジェクトを開始してみます。

今までCanvasやThree.jsでゲームをかなり作りこんでスキルアップしたので、その辺を活用したサイトにする予定です。

Hugo + Netlify の現在のサイトは、閉鎖しようかと思いましたが雑記ブログ的に今後も学習した内容を備忘録的にまとめていく予定で、新しいサイトは作品展示スペースにしようかと思っています。

トップページで開発したThree.jsなどの作品を表示する実験の場所にする予定ですが、まだ具体的な案は決まってないです。

取り合えず、新たな試みとして、next.jsを使ってサイト構築しようと、今朝インストールしてhello world的なページと、大まかなレイアウト、nextjs react tailwind tsxなどの構造理解をしたので、今回も備忘録メモとして記事にまとめてみます。

Next.js 入門 #01：プロジェクト作成（最短ルート）と最初の起動

この記事では、Next.js を初めて触る人向けに 最短で “動く状態” を作る手順をまとめる。

Next.js は React / TypeScript / Tailwind が一度に出てくるが、 最初に全部理解しようとすると混乱する。 まずは “起動 → 画面が出る” のシンプルなルートを最優先にする。

1. Next.js プロジェクト作成（最短ルート）

新規フォルダで以下を実行：

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

実行後、 ブラウザで以下にアクセス：

➡ http://localhost:3000

これで Next.js の初期テンプレートが起動する。

create-next-app が自動でやってくれること

  • React セットアップ
  • TypeScript セットアップ
  • Tailwind CSS の導入
  • ESLint / prettier の設定
  • app Router のディレクトリ構成
  • ページ表示の雛形

つまり Webアプリに必要な全部を自動生成してくれる。

最初の目的は “動くNext.jsを手に入れること”。 ここができれば第1回として十分価値のある記事になる。

2. テンプレートは複雑すぎる → 全部コメントアウトでOK

Next.js の初期テンプレートは便利に見えるが、 実際は 学習時にノイズが多すぎる。

  • Tailwind の複雑なレイアウト
  • <Image /> コンポーネント
  • <Link />
  • Google Fonts
  • Metadata
  • 背景アニメーション
  • CSS Modules

初心者が最初に触ると、 どこが Next.js の本体で、どこが装飾なのか分からなくなる。

だからまずは、

“Next.js の本体だけを残す”

これが最短で理解できるルート。

app/page.tsx を最小構成に戻す

以下のように“必要最小限”だけ残す：

export default function Page() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Next.js Sample</h1>
    </main>
  );
}

この3行が Next.js ページの本体

  • export default function Page() → ページとして扱われる “1つだけの関数”

  • <main> → ページ全体の HTML

  • <h1> → 好きな内容を書く

これ“だけ”でページが完成する。

なぜ先に削るのか？

理由は簡単：

Next.js の学習で一番難しいのは「テンプレがやりすぎ」だから。

余計な Tailwind クラスや Image/Font の追加コードがあると、

  • どこから触ればいい？
  • 何が Next.js の本体？
  • これは自分が書いたの？テンプレなの？
  • 変更したら壊れたんだけど？
  • CSS が効かないのはなぜ？

こういう混乱が確実に起こる。

最小構成にすれば 仕組みが一瞬で理解できる。

これで Next.js の“本当の最小ページ”が完成

Next.js の基本は以下の2つだけ：

  • app/page.tsx → URL直下のページ
  • default export がページになる

この感覚さえ掴めば、 次のステップ（コンポーネント分割）に進める。

3. コンポーネントを分割する（Hello コンポーネント）

Next.js は React のコンポーネント構造の上に成り立っている。 まずは、1つのページの中に書いていた内容を “外部コンポーネント”として分割してみる。

構造を分けることで：

  • コードが読みやすくなる
  • UI の再利用ができる
  • 複雑なページを小さく保てる

というメリットがある。

/components/Hello.tsx を作成

components フォルダを作り、 その中に Hello.tsx を作る。

export default function Hello() {
  return <p>Hello Component!</p>;
}

これでひとつの独立した UI 部品（コンポーネント）が完成。

page.tsx からコンポーネントを呼び出す

次に、トップページ app/page.tsx からこのコンポーネントを読み込む。

import Hello from "../components/Hello";

export default function Page() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Next.js Sample</h1>
      <Hello />
    </main>
  );
}

コンポーネントは HTML タグのように使える

React では、コンポーネント名をそのまま <Hello /> のように書いて、 タグとして描画できる。

ここまでで習得できていること

  • ページ = React コンポーネント
  • 部品として UI を分割できる
  • import / export の基本構造が理解できた
  • Next.js = React が裏で動いているだけ
  • TSX が HTML と JavaScript を同時に書ける仕組み

これで Next.js の一番大事な概念が身についている。

4. Tailwind が自動で有効になっている（CSS書かなくていい）

Next.js のプロジェクトを作成すると、 Tailwind CSS が最初から組み込まれた状態になっている。

そのため、CSS ファイルを新規で書かなくても className に Tailwind のクラスを付けるだけでレイアウトが完成する。

Tailwind の基本：クラス名がそのままスタイル

例えば：

  • p-4 → padding: 16px;

  • rounded-lg → border-radius: 8px;

  • shadow → box-shadow: …;

  • grid grid-cols-3 → display: grid; grid-template-columns: repeat(3, 1fr);

“CSS の略語辞書” として理解すればOK

Tailwind は CSS の知識が必要ないわけではなく、 CSS を短く・速く・安全に書くための辞書＋ルールの集まり。

CSS の手書きがほぼ不要になる理由

  1. Tailwind には “よく使う CSS” が全部プリセットされている
  2. クラス名が直感的（p-4, mt-6, flex, items-center など）
  3. config にデザインルールをまとめられる
  4. コンポーネント内で完結するので CSS 管理がラク

そのため、CSS ファイルをほとんど増やさずに UI を爆速で構築できる。

Tailwind が Next.js と相性最強な理由

  • className だけでデザインが完結
  • グローバル CSS を汚さない
  • 反応速度が早い（保存即反映）
  • レスポンシブ対応が1行で書ける → sm:grid-cols-3 md:grid-cols-4

特に Next.js のようなコンポーネント構造と合わさると CSS の煩わしさが一気に消える。

ここまでで得られた知識

  • Next.js は Tailwind がデフォルトで有効
  • CSS を書かず className だけで UI ができる
  • p-4 / shadow / grid など、Tailwind の略語で完結
  • デザインのコストが大幅に下がる
  • React のコンポーネント設計と完全に相性がいい

5. 2カラムレイアウトを作ってみる（レスポンシブ付き）

Next.js + Tailwind なら、 複雑なレイアウトも className を数行書くだけで完成する。

ここでは、ブログ風の 「左サイドバー + 右メインコンテンツ」 の2カラム構成を作る。

app/layout.tsx を編集してレイアウトを定義

<main className="max-w-5xl mx-auto p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
  <aside className="md:col-span-1 bg-white p-4 shadow">Sidebar</aside>
  <section className="md:col-span-2">{children}</section>
</main>

このクラスが何を意味するか

grid grid-cols-1

→ スマホ表示では 1 カラム

md:grid-cols-3

→ 画面幅が “md（768px〜）以上” のとき 3 カラム構成 に切り替わる

md:col-span-1 / md:col-span-2

→ 中サイズ以上の画面で

  • 左カラム：幅 1
  • 右カラム：幅 2 という比率になる

max-w-5xl mx-auto#

→ 中央寄せ + 最大幅を 5xl に制限

gap-4

→ カラム間の余白を確保

Tailwind でレスポンシブが爆速になる理由

例えば：

  • grid-cols-1（スマホ時1カラム）
  • md:grid-cols-3（PC時3カラム）
  • md:col-span-2（PCで左1：右2の比率）

こうした ブレークポイント指定が className に統合されているので CSS を書かずに柔軟なレイアウトが作れる。

結果：スマホとPCで自動的にレイアウトが変わる

  • スマホ：
[Sidebar]
[メインコンテンツ]
  • PC：
[Sidebar][   Main   ][   Main   ]

たった数行でブログっぽい構成が完成する。

ここまでで理解できたこと

  • Tailwind のレスポンシブ指定（md:）
  • grid レイアウトの基本
  • サイドバーと本文の構成
  • layout.tsx でサイト全体のレイアウトを管理できる

Next.js は layout 機能が強力なので、 このやり方を覚えておくと ブログ・ポートフォリオ・Webアプリすべてで使える。

6. React DevTools を入れて構造を可視化（UnityのInspector相当）

Next.js（React）で開発するなら、 React DevTools を Chrome に入れておくと開発効率が一気に上がる。

Chrome 拡張の React DevTools を有効にすると、 React の内部構造が “Unity の Inspector のように” 全部見える。

React DevTools で見える情報

コンポーネントツリー

React がどのように UI を構成しているか 階層（ツリー）で可視化される。

props（コンポーネントの引数）

<Hello message="Hi!" /> などの値がリアルタイムで見える。

state（内部状態）

useState などの値を確認できる。

再レンダリング回数

どのコンポーネントが何回レンダリングされたか パフォーマンス解析まで可能。

Unity の Inspector と比較すると分かりやすい

Unity の Inspector が：

  • コンポーネント構造
  • 変数の現在値
  • イベント
  • アタッチ関係

などを見せてくれるように、

React DevTools は：

  • React コンポーネントの構造
  • props・state
  • レンダリングの発生元
  • 描画された DOM の位置
  • パフォーマンス

これらを全部 GUI で確認できる。

Next.js/React 開発の “デバッグ用インスペクタ” として最強。

DevTools を使うことで得られるメリット

  • UI のバグ原因がすぐ分かる
  • props が渡ってるか 1秒で確認できる
  • どのコンポーネントが無駄に再描画されたか分かる
  • コンポーネントの構造が直感的に理解できる
  • Next.js の layout → page → component の流れが見える

Next.js を学ぶなら、早めに入れて慣れておくのがおすすめ。

7. Next.js は “React・TypeScript・Tailwind” の集合体

Next.js は Web アプリ開発の現代標準。 しかしその正体は、実はとてもシンプルで、

React（UI）
＋ TypeScript（型安全）
f ＋ Tailwind（CSS設計）
を最初から全部まとめたフレームワーク

というだけ。

Next.js が提供してくれる “全部入りセット”

  • ルーティングが自動生成 → app/about/page.tsx を置くだけで /about ができる

  • 画像最適化（） → WebP変換・遅延読み込みを自動化

  • ページ高速化（Server Components） → 不要な JS をクライアントに送らない

  • Tailwind との相性最強 → CSS ファイルをほぼ書かなくていい → デザインが爆速になる

  • TypeScript（TSX）でエラー激減 → 初心者がハマりがちな typo や undefined を防ぐ → C# に近い安心感

この “全部入りセット” が create-next-app で 一発で手に入る。

「勝手に設定されてて難しい」ではなく

“揃ってるから速い” が Next.js の本質

昔の Web 開発は、

  • React セットアップ
  • Babel / Webpack 設定
  • TypeScript 導入
  • モジュールバンドラ構築
  • CSS 設計
  • ルーティング手動構築
  • 画像最適化プラグイン追加

これ全部 “自分で組み立てる” 時代だった。

Next.js はこの苦労を 最初から全部自動化しただけ。

だから難しいのではなく、 最初から最適解に近い構成が手に入る。

ここまで理解できていれば、Next.js の基礎はクリア

  • Next.js = React の上位版
  • TSX = TypeScript + JSX
  • Tailwind = CSS を書かずに済む
  • 全部が自然に繋がるように設計されている

“難しいフレームワーク” ではなく、 強力な“開発の土台” が最初から揃ってるだけ。

8. 今知っておくべきこと（超重要）

ここまでで、Next.js を触るうえで特に重要な “土台となる知識” が揃った。

初心者が最初に知っておくべきポイントは以下の6つだけ。

Next.js は React の上で動くフレームワーク

Next.js = React の拡張版。 UI の基本構造は React と完全に同じ。

Tailwind は CSS をほぼ書かずに済むデザイン基盤

p-4 や shadow などのクラスを組み合わせるだけで レイアウト・装飾を高速に作れる。

TSX は “TypeScript + JSX”

C# に近い型の安全性と、 HTML っぽい UI 記述が両立する仕組み。

Next.js では TSX が標準。

レイアウトはすべて className で制御

CSS ファイルを追加する必要はほとんどない。 Tailwind クラスを並べるだけでレスポンシブ含めデザイン完成。

React DevTools を使えば中身が丸見え

コンポーネントツリー、props、state、再描画状況まで すべて GUI で確認可能。 Unity の Inspector より透明度が高い。

Unityよりブラックボックスが少ない（全部コード化）

設定が裏で壊れたり、metaファイルが破損したり、 Editor の機嫌に左右されることがない。 すべてコードとして目に見える。

これで Next.js の「初期理解」は完全にクリア

ここまで理解できていれば、 Next.js の土台はもう揃っている。

  • ページ構造
  • コンポーネント
  • Tailwind
  • TSX
  • レイアウト
  • React DevTools

全部を一度に扱えるようになっている。

9. まとめ

この記事では、Next.js を触り始めたときに 最初に理解すべき部分だけを最短ルートで整理した。

✔ プロジェクトは create-next-app で一発作成

React / TypeScript / Tailwind / ルーティングなど 必要機能がすべて揃った状態で始められる。

✔ app/page.tsx を最小化して Next.js の本体を理解

テンプレは複雑なので一度全部削って、 最小のページ構成だけ残すのが最速。

✔ UI は React コンポーネントとして分割

components/Hello.tsx を作るだけで UI を部品として扱えるようになる。

✔ Tailwind で CSS を書かずにデザインを作れる

p-4, shadow, grid-cols-3 など クラス名だけでレイアウトと装飾を完結できる。

✔ レイアウトは layout.tsx で全体管理

2カラムなどの複雑なレイアウトも 数行の Tailwind でレスポンシブ対応まで自動化。

✔ React DevTools で内部構造を完全可視化

コンポーネントツリー、props、state を GUI で確認でき、 Next.js / React の挙動が直感的に理解できる。

✔ Next.js = “React + TypeScript + Tailwind” の集合体

難しいフレームワークではなく、 最初から全部揃っているセットアップ環境。

ここまで理解できていれば、Next.js の基礎はクリア

次回は、自分のやりたい内容に合わせて

  • ページ追加
  • レイアウト拡張
  • 動的コンポーネント
  • Three.js 統合 など自由に進めればいい。

この記事はあくまで 初期セットアップの完全把握 が目的なので、 ゴールまで辿り着けたなら十分すぎる。