Next.js + Tailwind + DaisyUIで静的サイトを作る準備

Dockerfile

FROM node:16.17.0-slim
# NPM update
RUN npm install -g npm

# aptパッケージアップデート
RUN apt-get update
# gitのインストール
RUN apt-get install git -y

Next.js Typescript環境構築

npx create-next-app@latest --typescript

Tailwindをインストールする

こちらの記事を参考にさせていただきました🙇🏻‍♂️
公式にもインストール方法載ってますので、参考に

ディレクトリを先程作成したプロジェクトのディレクトリに移動する

cd [project-name]

Tailwindインストール

npm install -D tailwindcss postcss autoprefixer

Tailwind初期設定

npx tailwindcss init -p

tailwind.config.jsにTailwindを適用するディレクトリ等を追加する

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
}

Tailwindの命令をグローバルCSSへ追加

./styles/global.cssの内容を全て削除し、以下の内容で書き換える

@tailwind base;
@tailwind components;
@tailwind utilities;

Daisy UIインストール

npm i daisyui

tailwind.config.jsのpluginsに追加

module.exports = {
  //...
  plugins: [require("daisyui")],
}

Nextの静的サイトジェネレートをNPMのスクリプトに追加

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },