先生と生徒の会話形式で理解しよう

生徒

「Next.jsを勉強したいんですが、環境構築って何から始めればいいですか？」

先生

「まずは、Next.jsを動かすための開発環境を作る必要があります。」

生徒

「Dockerって聞いたことはありますが、使った方がいいんですか？」

先生

「Dockerを使うと、パソコン操作に慣れていなくても、同じ環境を簡単に再現できます。」

1. Next.jsとは何かをやさしく理解しよう

Next.jsは、Reactという仕組みを使ってWebサイトやWebアプリを作るためのフレームワークです。フレームワークとは、最初から便利な部品がそろっている道具箱のようなものです。何もない状態から作るより、決まった形に沿って進めるので失敗しにくいのが特徴です。 Next.jsは画面表示が速く、検索にも強いため、多くの企業や個人開発で使われています。

2. Dockerとは？初心者向けに超シンプル解説

Dockerは、アプリを動かすための環境をひとまとめにしてくれる仕組みです。難しそうに聞こえますが、「専用の作業箱」を作るイメージで大丈夫です。自分のパソコンを汚さずに、必要な道具だけを箱の中に入れて作業できます。パソコン操作が苦手な人ほど、Dockerを使うと環境構築が楽になります。

3. Next.jsとDockerを組み合わせるメリット

Next.jsとDockerを一緒に使うと、環境の違いによるトラブルを防げます。例えば、別のパソコンでも同じ状態を再現できるため、学習や開発が止まりません。また、削除も簡単なので失敗しても最初からやり直せる安心感があります。初心者がつまずきやすい設定作業をまとめて管理できる点が大きな利点です。

4. Dockerfileを作成してNext.js環境を用意する

Dockerfileは、Dockerの設計図のような存在です。ここに「何を準備するか」を書いておくことで、自動的に環境が作られます。まずは、Next.jsを動かすための最低限の設定を書いてみましょう。


FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
CMD ["npm", "run", "dev"]

5. docker-composeで起動をもっと簡単にする

docker-composeは、複数の設定をまとめて管理できる便利な仕組みです。長いコマンドを毎回入力しなくても、一つの命令で起動できます。初心者の方は、まず「まとめて起動できる」と覚えておけば十分です。


version: "3"
services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app

6. Next.jsの基本ページを作って動かしてみよう

環境ができたら、実際にNext.jsの画面を表示してみます。ここでは一番シンプルなページを作成します。画面に文字が表示されれば、環境構築は成功です。


export default function Home() {
  return (
    <div>
      <h1>DockerでNext.jsが動きました</h1>
    </div>
  );
}

（ブラウザでアクセスすると「DockerでNext.jsが動きました」と表示されます）

7. ちょっとだけ動きを加えてみよう

次は、ボタンを押すと文字が変わる簡単な例です。プログラミング未経験でも、画面が変化すると理解しやすくなります。 Next.jsでは、Reactの仕組みを使って状態を管理できます。


import { useState } from "react";

export default function Sample() {
  const [text, setText] = useState("はじめの表示");

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => setText("ボタンを押しました")}>
        押してみる
      </button>
    </div>
  );
}

（最初は「はじめの表示」と出て、ボタンを押すと文字が変わります）

8. Docker環境で開発するときの注意点

Dockerを使うと便利ですが、ファイル保存や起動状態には注意が必要です。コンテナを停止すると作業も止まるため、保存を忘れないようにしましょう。また、最初はエラーが出ても焦らず、一つずつ確認することが大切です。ゆっくり操作すれば、誰でも扱えるようになります。

まとめ

この記事では、Next.jsとDockerを組み合わせて開発環境を構築する方法について、初心者の方でも理解できるように段階的に解説してきました。 Next.jsはReactをベースにしたフレームワークで、ページ表示が速く、構造も分かりやすいため、個人開発から実務レベルまで幅広く使われています。一方で、最初につまずきやすいのが環境構築です。Node.jsのバージョン違いや設定ミスによって、動かない原因が分からず挫折してしまう人も少なくありません。そこで活躍するのがDockerです。Dockerを使えば、Next.jsを動かすために必要な環境を一つの箱としてまとめられ、誰がどのパソコンで作業しても同じ状態を再現できます。 DockerfileではNode.jsのバージョンや作業ディレクトリ、依存関係のインストール方法を明確に記述し、docker-composeを使うことで起動や停止も簡単になります。また、Next.jsの基本ページやuseStateを使った簡単な動きのあるサンプルを通して、環境構築がゴールではなく、実際に画面を作って動かすところまで体験しました。 Docker環境での開発では、ファイルの保存やコンテナの状態を意識する必要がありますが、慣れてしまえば非常に安定した開発が可能になります。 Next.jsとDockerを組み合わせることで、学習効率が上がり、エラーに悩まされる時間も減り、自分の作りたいWebアプリ開発に集中できるようになります。初心者の方ほど、最初からこの構成に慣れておくことで、後々のステップアップがスムーズになるでしょう。

まとめとしてのサンプルプログラム

最後に、Next.jsとDocker環境でよく使う、状態管理を含んだシンプルなコンポーネント例を振り返ります。環境が正しく構築できていれば、こうしたコードも問題なく動作します。


import { useState } from "react";

export default function SummarySample() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        カウントを増やす
      </button>
    </div>
  );
}

（画面に現在の数値が表示され、ボタンを押すたびに数が増えていきます）

先生と生徒の振り返り会話

生徒

「Next.jsとDockerって難しそうだと思っていましたが、順番に見ていくと意外と理解できました。特に、環境をまとめて作れるのが便利だと感じました。」

先生

「それが一番大切なポイントですね。環境構築でつまずかなくなると、コードを書く時間が増えて成長も早くなります。」

生徒

「Dockerfileやdocker-composeは最初は意味が分からなかったですが、設計図だと思うと納得できました。」

先生

「良い理解です。Next.jsの学習では、Reactの基本とDockerの考え方を同時に身につけると、実務でも役立ちます。」

生徒

「これからページを増やしたり、APIとつなげたりしてみたいです。」