Next.jsをTypeScript+TailwindCSS環境で構築する準備作業

Mac環境、Node.js はv14系、VSCodeのターミナル操作です。

まずはプレーンなNext.jsプロジェクトを構築します。
作業フォルダ内で下記コマンドを実行すると必要なファイルが揃う。

npx create-next-app .

TypeScriptを使えるように準備します。

公式ドキュメントの記載の通りではありますが、まずは下記のコマンドでTypeScriptの設定に使うからファイルを先に作成しておきます。

touch tsconfig.json

次にTypeScriptを使用するために必要な諸々を下記のコマンドで準備します。

npm install -D typescript @types/react @types/node

続けて下記のコマンドでローカルサーバを起動します。
すると先ほど作成しましたTypeScriptの設定用ファイル（tsconfig.json）が自動で初期設定の為の記述が挿入されます。

npm run dev

create-next-appで作成されているのはJavaScriptですので、実際にTypeScriptで書いていく場合は.jsや.jsxといった拡張子を.tsや.tsxに変更しておく必要がありますので、忘れないよう注意してください。

pages/index.js （変更後）pages/index.tsx
pages/_app.js （変更後）pages/_app.tsx
pages/api/hello.js （変更後）pages/api/hello.ts

これでTypeScriptの準備は終わりです。

TailwindCSSを使えるように準備します。

TailwindCSS公式ドキュメントを見ながら進めます。
下記コマンドを実行すれば必要なものをまずは準備してくれます。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

次に設定ファイルを生成するために下記のコマンドを実行します。
TailwindCSSとPostCSSの設定ファイルがそれぞれ生み出されます。

npx tailwindcss init -p

次はtailwind.config.jsを編集します。ターミナルではなく普通にVSCodeエディタで編集します。
２行目：purge: [],　と書かれてある行を下記に書き換えます。

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

こうする事で必要のないCSSを書き出さず本当に必要なものだけの軽量なCSSになるようです。

最後に、ページにTailwindCSSを反映させるための変更するのですが2つの方法があります。

1つはpages/_app.tsxの1行目：import '../styles/globals.css'を import 'tailwindcss/tailwind.css' へ書き換えるやり方。
2つ目はstyles/globals.cssを下記の内容に書き換えるやり方。

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

どちらでもプロジェクトやチーム、個人のやり方に合わせて採用すればいいと思います。

以上で準備は完了です。このままでもコードを書き進められなくはないですが、tsconfig.jsonやtailwind.config.js、postcss.config.jsなどプロジェクトの要件に合わせて調整してください。