dockerでNext.jsを構築する

環境　Ubuntu24.04 WSL2

dockerはデフォルトのやつを使いました。
ただdocker-compose入れないといけないので

sudo curl -SL https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-linux-x86_64 -o /usr/libexec/docker/cli-plugins/docker-compose

# 実行権限付与
$ sudo chmod +x /usr/libexec/docker/cli-plugins/docker-compose

# バージョン確認
$ docker compose version
Docker Compose version v2.5.0

ツリー構造

|-- Dockerfile(フロント用）
|-- backend
|-- docker-compose.yml
`-- frontend
    |-- README.md
    |-- app
    |-- next-env.d.ts
    |-- next.config.mjs
    |-- node_modules
    |-- package.json
    |-- postcss.config.mjs
    |-- public
    |-- tailwind.config.ts
    |-- tsconfig.json
    `-- yarn.lock

frontend/Dockerfile

FROM node:20
WORKDIR /app

docker-compose.yml

version: '3.8'
services:
  frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/app
    command: 'yarn dev'
    ports:
      - '3001:3001'

ポート番号を 3001 に変更するために package.json を編集

package.json

"scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start -p 3001",
    "lint": "next lint"
  },

docker compose run --rm frontend yarn create next-app .
docker compose up

これでlocalhost:3001で見れるようになる。

基本next.jsでプロジェクトを作る際聞かれる質問はyesにしています
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use src/ directory? No これだけNo
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/)? Yes
What import alias would you like configured? @/*