Zenn
👾

Next.jsプロジェクト環境構築手順

2024/04/17に公開
Docker
Git
Next.js
TypeScript
tech

主の環境

・Windows 11

前提

・GitHubアカウントが作成されていること
・Git環境が整っていること
・Dockerアカウントが作成されていること

1. リポジトリの作成

1-1. GitHubにログイン

GitHubにアクセスして、ログイン→リポジトリを作成する。
※今回はPrivateリポジトリを作成
https://github.com/

1-2. リポジトリのクローン

Git Bashを起動し、任意のディレクトリへ移動する。

cd <任意のディレクトリ>

リポジトリをクローンする。

git clone https://github.com/<ユーザーID>/<リポジトリ名>.git

2. ディレクトリの作成

2-1. ディレクトリ構成

root/
├─ .git
├─ app/
│    └─ <Next.jsプロジェクト>
├─ docker-compose.yml
├─ Dockerfile
└─ .dockerignore

2-2. ファイルとディレクトリの作成

2-1と同じになるように不足しているファイルとディレクトリを作成する。

2-3. 各種ファイル設定

root/docker-compose.yml

docker-compose.yml
version: "3.8"

services:
  #フロントエンド
  frontend:
    #Dockerfileのパス
    build:
      context: .
      dockerfile: Dockerfile
    #イメージ名
    image: goshuin-front
    #コンテナ名
    container_name: goshuin-front
    #localのport:3000をcontainerのport:3000にマッピング
    ports:
      - "3000:3000"
    #データの同期
    volumes:
      - ./app:/app
    #明示的に stop がされない限り、終了ステータスに関係なく常に再起動が行われる
    restart: always
    #コンテナの標準出力をホスト側の標準出力につなげる
    tty: true
    #ホスト側の標準出力をコンテナの標準出力につなげる
    stdin_open: true
    #typescriptでのホットリロード設定
    environment:
      - WATCHPACK_POLLING=true
    #frontend-backend感をつなぐネットワーク
    networks:
      - goshuin-frontend-network

networks:
  goshuin-frontend-network:
    #ブリッジとしてつなぐ
    driver: bridge

root/Dockerfile

Dockerfile
FROM node:20.11.0-alpine3.18

#app直下をワークディレクトリに設定
WORKDIR /app

#package.json package-lock.jsonをコンテナ内のappディレクトリにコピー
COPY package*.json ./

#依存関係をインストール
RUN yarn install

#localのデータをcopyする
COPY . .

CMD ["npm", "run", "dev"]

root/.dockerignore

.dockerignore
./app/node_modules

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

3-1. プロジェクトの作成

appディレクトリに移動する。

terminal
cd app

プロジェクトの作成。

terminal
npx create-next-app ./ --ts

Next.jsプロジェクト作成時の質問に対する回答は以下の通り。

terminal
√ Would you like to use ESLint? ... No / Yes #Yesを選択
√ Would you like to use Tailwind CSS? ... No / Yes #Noを選択
√ Would you like to use `src/` directory? ... No / Yes #Yesを選択
√ Would you like to use App Router? (recommended) ... No / Yes #Yesを選択
√ Would you like to customize the default import alias (@/*)? ... No / Yes #Yesを選択
√ What import alias would you like configured? » @/* #デフォルトのままEnter

3-2. ESLintの設定

パッケージをインストールする。

terminal
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks --save-dev

<Nest.jsプロジェクト>/.eslintrc.jsonを開き、以下の通りに編集する。

.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },

  "parser": "@typescript-eslint/parser",

  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },

  "settings": {
    "react": {
      "version": "detect"
    }
  },

  "plugins": ["react", "react-hooks", "@typescript-eslint"],

  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended"
  ],

  "rules": {
    "react/props-types": 0,
    "react/react-in-jsx-scope": 0,
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

<Nest.jsプロジェクト>/package.jsonを開き、scripts内に以下を追記する。

package.json
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint --ext .ts,.tsx src",
+    "lint:fix": "eslint --ext .ts,.tsx src --fix"
   },

3-3. Prettierの設定

パッケージをインストールする。

terminal
npm install eslint-config-prettier eslint-plugin-prettier --save-dev

<Next.jsプロジェクト>ディレクトリ直下に.prettierrc.jsonを作成し、以下を追記する。

.prettierrc.json
{
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true
}

<Next.jsプロジェクト>/package.jsonを開き、scripts内に以下を追記する。

package.json
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint --ext .ts,.tsx src",
     "lint:fix": "eslint --ext .ts,.tsx src --fix",
+    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
   },

3-4. npm-run-allのインストール

npm-run-allをインストールして、scriptを順次実行できるようにする。
以下のコマンドを実行してインストールする。

terminal
npm install npm-run-all --save-dev

<Next.jsプロジェクト>/package.jsonを開き、scripts内に以下を追記する。

package.json
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint --ext .ts,.tsx src",
     "lint:fix": "eslint --ext .ts,.tsx src --fix",
     "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'",
+    "test-all": "run-s lint format lint:fix"
   },

以下のコマンドを実行して、script実行確認をする。

terminal
npm run test-all

lint, format, lint:fixが実行されていればOK。

4. Dockerコンテナの起動

4-1. コンテナのビルド

docker-compose.ymlが存在するディレクトリへ移動する。（手順通りであれば1つ上の階層）

terminal
cd ..

以下のコマンドを実行して、コンテナをビルドする。

terminal
docker compose build

4-2. コンテナの起動

以下のコマンドを実行して、コンテナを起動する。

terminal
docker compose up

以下のURLにアクセスして、表示ができればOK。
http://localhost:3000

4-3. コンテナの停止

以下のコマンドを実行して、コンテナを停止する。

terminal
docker compose down

5. リモートリポジトリへpush

5-1. Git Bashを起動

Git Bashを起動し、リポジトリへ移動する。

5-2. ステージングエリアに追加（git add）

変更分をステージングエリアに追加する。

bash
git add <target file or directory>

5-3. 変更分のコミット（git commit）

ステージングエリアの資源をコミットする。

bash
git commit

エディタが開かれるので「i」を押下し、編集モードにする。
↓
コミットメッセージを入力したらEsqキーを押下し、編集モードを終了する。
↓
「:wq」を入力し、Enterキーを押下することでコミットされる。

5-4. 変更分のプッシュ（git push）

コミット内容をリモートリポジトリへプッシュする。

bash
git push origin <branch name>

Discussion