Zenn
🗻

【Hello World⑬】Next.js @ JavaScript（React）

2024/04/15に公開
Docker
JavaScript
Next.js
React
tech

Next.jsでJavaScriptのWebアプリを作ります

Windows11のDocker環境上で
JavaScript言語のReactベースのフレームワークNext.jsでHello Worldアプリを作ります。

環境

Windows 11 Pro 23H2
WLS 2.1.5.0（Ubuntu 22.04.1 LTS）
Docker Desktop 4.28.0
Visual Studio Code

①フォルダ・ファイルを作成

以下の構成でフォルダとファイルを作ります。

フォルダ構成
next
 └─compose.yaml   # コンテナ作成時の指示を記載したファイル

以下のコマンドでフォルダ・ファイルを作成します。

PowerShell
mkdir next             ;`
cd next                ;`
New-Item compose.yaml  ;`
code compose.yaml

ファイルには以下の内容を記載します。

compose.yaml
services:
  web:
    image          : node:18.18.2-bullseye-slim
    container_name : next
    working_dir    : /app
    command        : bash -c "yarn dev"
    volumes:
      - ./app:/app
    ports:
      - "3000:3000"

②Next.jsのプロジェクトを作成

以下のコマンドを実行し、Next.jsのプロジェクトを作成します。

PowerShell
docker compose run --rm -it web `
bash -c "cd .. && `
yarn create next-app app --js --tailwind --eslint --no-src-dir --app --no-import-alias"
作成されるフォルダ・ファイルの構成と「package.json」の内容
フォルダ構成
next
 ├─app
 │   ├─app
 │   │   ├─favicon.ico
 │   │   ├─globals.css
 │   │   ├─layout.js
 │   │   └─page.js
 │   ├─node_modules
 │   ├─public
 │   ├─.eslintrc.json
 │   ├─.gitignore
 │   ├─jsconfig.json
 │   ├─next.config.mjs
 │   ├─package.json
 │   ├─postcss.config.mjs
 │   ├─README.md
 │   ├─tailwind.config.js
 │   └─yarn.lock
 └─compose.yaml
package.json
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.1"
  },
  "devDependencies": {
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.1"
  }
}

③Next.jsのコンテナを起動

以下のコマンドを実行し、Next.jsのコンテナを起動します。

Powershell
docker compose up -d

④Next.jsの画面が表示されることを確認

http://localhost:3000に接続して、Next.jsの画面が表示されることを確認します。

⑤画面表示内容を修正

page.js（Next.jsの画面内容を記述しているJavaScriptのファイル）の下の方に
<p>Hello World Vite + React on Docker!</p>を追記します。

PowerShell
code app/app/page.js
page.js
省略
          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
            Instantly deploy your Next.js site to a shareable URL with Vercel.
          </p>
        </a>
      </div>
+     <p>Hello World Next.js on Docker!</p>
    </main>
  );
}

⑥Next.jsのコンテナを再起動

以下のコマンドを実行し、Next.jsのコンテナを再起動します。

PowerShell
docker compose restart

⑦Hello Worldが表示されることを確認

http://localhost:3000に再接続（リロード）して、一番下にHello Worldが表示されることを確認します。

Discussion