Next.js + TypeScript + Tailwind CSSなプロジェクトのセットアップ手順

Next.js + TypeScript + Tailwind CSS なプロジェクトのセットアップ手順をまとめました。

## 0. 動作環境

node と npm はインストール済みとします。

```sh
$ node -v
v15.5.0

$ npm -v
7.3.0
```

また、今回の記事はmacOS (Apple Silicon)にて検証しております。

```sh
$ uname -v
Darwin Kernel Version 20.2.0: Wed Dec  2 20:40:21 PST 2020; root:xnu-7195.60.75~1/RELEASE_ARM64_T8101

$ sw_vers
ProductName:	macOS
ProductVersion:	11.1
BuildVersion:	20C69
```

Intel版macOSおよびLinuxでは手順はほぼ同じだと思いますが、Windows環境の場合は適宜読み替えていただければと思います。

## 1. Next.jsプロジェクトのセットアップ

まず、 `create-next-app` コマンドを使ってNext.jsのテンプレートからコードベースを作成します。

```sh
npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"
```

もし、以下の確認メッセージが表示された場合はそのままEnterキーを押下します。

```sh
Need to install the following packages:
  create-next-app
Ok to proceed? (y) [Enter]
```

<details>
<summary>ログを見る: Creating a new Next.js app ...</summary>
<div>

```sh:ログ
Creating a new Next.js app in /Users/notakaos/git/notakaos/nextjs-ts-tailwind-example.

Downloading files from repo https://github.com/vercel/next-learn-starter/tree/master/basics-final. This might take a moment.

Installing packages. This might take a couple of minutes.


added 713 packages, and audited 714 packages in 29s

81 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created nextjs-ts-tailwind-example at /Users/notakaos/git/notakaos/nextjs-ts-tailwind-example
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjs-ts-tailwind-example
  npm run dev
```

</div>
</details>

コマンドが完了すると、Next.jsのコードが生成されているので、ディレクトリを移動して動作確認します。

```sh:nextjs-ts-tailwind-example
cd nextjs-ts-tailwind-example
npm run dev
```

ブラウザで http://localhost:3000 にアクセスすると、以下のようなページが表示されます。

![Nextjs-example1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24450/53bc0ece-4a69-009f-a013-143f4fcaf60a.png)

`[Your Name]` の部分を修正します。お好みのエディターで `components/layout.js` ファイルを開き、6行目辺りの `[Your Name]` をお好きな名前に書き換えます。

```diff:components/layout.js
- const name = '[Your Name]'
+ const name = 'Taro`
```

書き換え後、ファイルを保存するとHMR(ホットモジュールリプレースメント)により、自動的に変更が反映されブラウザの表示が変わります。

これでNext.jsの動作確認ができました。

次に進む前に `npm run dev` を `Control + C` で終了します。

```sh
# npm run dev を実行しているターミナルにて
^C
```

## 2. TypeScriptの導入

Next.jsプロジェクトにTypeScriptを導入するため、空の `tsconfig.json` を用意します。

```sh:nextjs-ts-tailwind-example/
touch tsconfig.json
```

TypeScriptを動かすのに必要なパッケージをインストールします。

```
npm install --save-dev typescript @types/react @types/node
```

そして `npm run dev` を実行します。

```sh:nextjs-ts-tailwind-example/
$ npm run dev
> my-app@0.1.0 dev
> next dev

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.
...
```

Next.jsが空の `tsconfig.json` を検知すると、自動的に書き換えられます。
また、 `next-env.d.ts` というファイルも生成されます。

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

```ts:next-env.d.ts
/// <reference types="next" />
/// <reference types="next/types/global" />
```

`npm run dev` を止めます。

```sh
^C
```

続いて、以下のリポジトリを参考に各種jsファイルをtsファイルに書き換えます。

https://github.com/vercel/next-learn-starter/tree/master/typescript-final

```sh
mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.ts
mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx
mv 'pages/posts/[id].js' 'pages/posts/[id].tsx'
mv pages/api/hello.js pages/api/hello.ts
```

書き換えたら動作確認します。

```sh
npm run dev
```

ブラウザで動作確認して、エラーなく動作すればOKです。

次に進みます。

## 3. Tailwind CSSの導入

https://tailwindcss.com/

Next.js + TypeScriptプロジェクトにTailwind CSSを導入します。

[こちらのページ](https://tailwindcss.com/docs/guides/nextjs)を参考に、必要なパッケージをインストールします。

```sh
npm install tailwindcss@latest postcss@latest autoprefixer@latest
```

次に、Tailwind CSSの設定ファイルを生成します。

```sh
npx tailwindcss init -p
```

すると、 `tailwind.config.js` と `postcss.config.js` の2つのファイルが生成されます。

```js:tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

```js:postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

不要なCSSを削除するための、purge設定を行います。

```diff:tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./components/**/*.tsx', './pages/**/*.tsx', './public/**/*.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
```


Tailwind CSSで生成されたCSSを読み込むために `styles/global.css` を書き換えます。

```css:styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

これでTailwind CSSが使えるようになります！

あとはいろいろ試行錯誤するのみ！

## 参考文献

* [TypeScript - Next.js](https://nextjs.org/learn/excel/typescript)
* [typescript-final - next-learn-starter](https://github.com/vercel/next-learn-starter/tree/master/typescript-final)
* [Install Tailwind CSS with Next.js - Tailwind CSS](https://tailwindcss.com/docs/guides/nextjs)