Docker + Next.js13ちゃっちゃと動かしたい人へ

# はじめに
Docker前提の記事なのと、使い捨ての環境を作れるようになると便利なのでDocker入れてない人はこの機会に是非入れてみてください！！([Docker Init](https://www.docker.com/blog/docker-init-initialize-dockerfiles-and-compose-files-with-a-single-cli-command/)熱いから入れ得やで！！！)

https://www.docker.com/blog/docker-init-initialize-dockerfiles-and-compose-files-with-a-single-cli-command/

他の方の記事を使用していますが、もし問題があるならコメントいただけると幸いです。
後エラーとかの問題起きたらコメントいただけると嬉しいです(調べて追加していきたいので！)。
## Docker Install参考

https://zenn.dev/yoshio_matsuda/articles/d7a9b10bf0ec6d

筆者はWindowsなので以下の記事を参考に入れました。(多分)

https://qiita.com/tsuzuqiita/items/bd4707ae3d2974b9e8ec
### 注意
使用する際の注意点ですが、Ubuntuのhome配下にプロジェクトフォルダを配置して使用しないと全体的に遅くなるので注意してください。(筆者は過去にnode_module入れるのに10分以上かかってキレました。)
# 本編
下部に[使用するファイル](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)と[最終結果](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#%E6%9C%80%E7%B5%82%E7%B5%90%E6%9E%9C)があるので参考にしてください。
- docker-composeはv2。
- 筆者はWSL2を使用しUbuntuにDockerを入れて使ってるので何かあったら適宜対処してください。
    - docker-compose v1の場合は　docker compose を　docker-compose に変えてください。

```diff_shell
v2: docker compose build --no-cache
    to
v1: docker-compose build --no-cache
```
### コンテナの作成と起動後コンテナ内へ
- [使用するファイル](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)にある[Dockerfile](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#dockerfile)、[docker-compose.yml](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#docker-composeyml)、[.dockerignore](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#dockerignore)を作成し内容をコピペ後以下コマンド(ローカル)
```diff_shell
docker compose build --no-cache && docker compose up -d && docker compose exec next ash
```
### コンテナ内
- 以下コマンド実行、名前をnext-appにして感謝のエンター連打(コンテナ)

```diff_shell
pnpx create-next-app@latest
```

- [使用するファイル](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)にある[Dockerfile(変更後)](https://qiita.com/Kazuki_Nakai/items/ae0ad3bfd1c6fdea7075#dockerfile%E5%A4%89%E6%9B%B4%E5%BE%8C)を参考にDockerfileを変更後し以下コマンド(コンテナ)
```diff_shell
※ 以下を1行ずつ順に使用してください
exit
docker compose down && docker compose build --no-cache && docker compose up -d && docker compose exec next ash
```

- 最後に開発環境で動かすやで！(コンテナ)

```diff_shell
 pnpm i && pnpm dev
```

- http://localhost:3000/ で確認できます。![スクリーンショット (70).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609311/f2c56c26-809c-5135-52f3-270dcccd1a97.png)

PS.もうちょい勉強するなら英語やけどこの動画が良さそう。

https://www.youtube.com/watch?v=c_-b_isI4vg

## 使用するファイル

### Dockerfile
```diff_docker
FROM node:18.16-alpine3.18

ENV APP_ROOT /node/next-app

RUN apk update && \
    npm install -g pnpm && \  # デフォルトで入ってるyarnを使用する場合この行いらないです
    mkdir -p $APP_ROOT

WORKDIR $APP_ROOT

COPY . .

EXPOSE 3000
```

### docker-compose.yml
```diff_yaml
version: "3.8"

services:
  next:
    build:
      context: ./
    volumes:
      - ./:/node
    ports:
      - 3000:3000
    tty: true
    command: ash -c '/bin/ash'
```

### .dockerignore
```
.pnpm-store
next-app/node_modules
next-app/.next
next-app/next-env.d.ts

# Gihubに上げる場合以下追加
.gitignore
.git
next-app/.gitignore
```
# おまけ
## Prettier 追加

コンテナ内で以下コマンドを実行

```diff_shell
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
```

pnpm format でPrettier使用できるようにpackage.jsonと.eslintrc.jsonを変更
### package.json
```diff_json
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"  //追加
  }
```
### .eslintrc.json
```
{
  "extends": ["next/core-web-vitals", "plugin:import/warnings", "prettier"]
}
```
https://zenn.dev/hungry_goat/articles/b7ea123eeaaa44

ここでは分けてますけど、筆者は普段は楽したいがために以下のようにまとめて使用しています。

```diff_json
"lint": "next lint && prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"
```

## Parsing error

vscode使用時、postcss.config.jsでParsing error: Cannot find module 'next/babel'がでるので、
Dockerfileのあるrootに.vscode/settings.json作って以下記述

### .vscode/settings.json
```diff_json
{
  "eslint.workingDirectories": ["./next-app"]
}
```

https://github.com/vercel/next.js/issues/49706

https://zukucode.com/2020/10/eslint-vscode-subdirectory.html

エラーで検索したら.eslintrc.jsonに以下のように変更みたいなのがでますが、波線消えるだけでpnpm lint実行時に失敗します。
```diff_json
{
  "extends": ["next/core-web-vitals","next/babel"]
}
```
## css(unknownAtRules)

### globals.css
```diff_css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

＠tailwindでUnknown at rule ＠tailwindcss(unknownAtRules)が出る方は
拡張機能で[PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)を入れてください。

https://monatamalog.com/archives/1872

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

# 最終結果
https://github.com/NakaiKazuki/next-app-qiita