50
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

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

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

0. 動作環境

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

$ node -v
v15.5.0

$ npm -v
7.3.0

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

$ 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のテンプレートからコードベースを作成します。

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

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

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


ログを見る: Creating a new Next.js app ...
ログ
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


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

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

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

Nextjs-example1.png

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

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

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

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

次に進む前に npm run devControl + C で終了します。

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

2. TypeScriptの導入

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

nextjs-ts-tailwind-example/
touch tsconfig.json

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

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

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

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 というファイルも生成されます。

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"
  ]
}
next-env.d.ts
/// <reference types="next" />
/// <reference types="next/types/global" />

npm run dev を止めます。

^C

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

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

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

npm run dev

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

次に進みます。

3. Tailwind CSSの導入

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

こちらのページを参考に、必要なパッケージをインストールします。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

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

npx tailwindcss init -p

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

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

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

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 を書き換えます。

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

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

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

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
50
Help us understand the problem. What are the problem?