🙇‍♂️

【2023年最新】備忘録： Next.js13(TS) + Tailwind CSS +Mantine + Dockerで環境構築してみた

2023/01/11に公開

Next.js

こんにちは、takuyaです。
雑に、タイトルどおりの環境構築してみたので記録として残しておきます。

なにか、間違えていたり、もっとこうするといいよということがあればコメント・DMください！

基本的に下記の記事の通りやれば、Next.js１３でも構築できます！
Crayさん感謝です🙇‍♂️

上記のCrayさんの記事＋Next.js13の他、最新のパッケージで導入＋Docker化しても動きます（2023/01/11時点）

この記事は車輪の再発明ですが、2023年かつNext.js13でもできた＋自分の備忘録なので、そこらへんはスルーして頂けると。。。。🙏

最初からsrcディレクトリにまとめてあるので、ディレクトリの移動などの手間が省けます

とりあえず開発環境だけほしいという方は下記のリポジトリをクローンしてdocker compose up -d --buildで環境が立ち上がるはずです

環境

npm: 8.19.2
TypeScript: 4.9.4
Node.js: 16系
React: 18.2.0
Next.js: 13.1.1
Tailwind CSS: 3.2.4
Mantine: 5.10.0
ESLint: 8.31.0
Prettier: 2.8.2

公式ドキュメント

https://nextjs.org/docs

https://mantine.dev/guides/next/

Next.jsのセットアップ

npx create-next-app@latest <project-name> --ts --src-dir --use-npm

後にESLintのセットアップはするので、ここではESLinstの設定をNoとしました。

起動する

開発サーバーを起動して、http://localhost:3000/ にアクセス。

cd my-app
npm run dev

PrettierとESLintをセットアップ

prettierrc

.prettierrcを作成し、以下のルールを設定

touch .prettierrc

.prettierrc

{
  "singleQuote": true, 
  "trailingComma": "all", // 配列・オブジェクトの末尾のカンマをつける
  "semi": false, // セミコロンは省略
  "arrowParens": "avoid" // arrow関数の引数にかっこをつけない
}

singleQuote: true

シングルクォーテーションにする

trailingComma: "all"

配列・オブジェクトの末尾のカンマをつける

semi: false

セミコロンは省略

arrowParens: "avoid"

arrow関数の引数にかっこをつけない

Tailwind CSSをセットアップ

Mantineをセットアップ

作成した環境をDockerにのせる

ルートディレクトリにDockerfile``docker-compose.yml``.dockerignoreを作成します。
各ファイルの内容について

Dockerfile

FROM node:16.19-alpine

RUN mkdir -p /app
WORKDIR /app

ADD package.json package-lock.json ./
RUN npm ci

ADD . ./

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

docker-compose.yml

version: '3.8'
services:
  frontend:
    build:
      context: .
    volumes:
      - .:/app:cached
      - node_modules:/app/node_modules
    ports:
      - '3000:3000'

volumes:
  node_modules:

少しでもマウントを軽くするためにnode_modulesを直接マウントせず、サブフォルダーに移しています
＋cacheもおこなっています

.dockerignore

node_modules
.next

最後に

自分備忘録として、残しておきました。
これで環境をかんたんに立ち上げる事ができると思います。
最後までみていただきありがとうございました！