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のコードが生成されているので、ディレクトリを移動して動作確認します。
cd nextjs-ts-tailwind-example
npm run dev
ブラウザで http://localhost:3000 にアクセスすると、以下のようなページが表示されます。
[Your Name] の部分を修正します。お好みのエディターで components/layout.js ファイルを開き、6行目辺りの [Your Name] をお好きな名前に書き換えます。
- const name = '[Your Name]'
+ const name = 'Taro`
書き換え後、ファイルを保存するとHMR(ホットモジュールリプレースメント)により、自動的に変更が反映されブラウザの表示が変わります。
これでNext.jsの動作確認ができました。
次に進む前に npm run dev を Control + C で終了します。
# npm run dev を実行しているターミナルにて
^C
2. TypeScriptの導入
Next.jsプロジェクトにTypeScriptを導入するため、空の tsconfig.json を用意します。
touch tsconfig.json
TypeScriptを動かすのに必要なパッケージをインストールします。
npm install --save-dev typescript @types/react @types/node
そして npm run dev を実行します。
$ 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 というファイルも生成されます。
{
"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"
]
}
/// <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.js と postcss.config.js の2つのファイルが生成されます。
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
不要なCSSを削除するための、purge設定を行います。
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 を書き換えます。
@tailwind base;
@tailwind components;
@tailwind utilities;
これでTailwind CSSが使えるようになります！
あとはいろいろ試行錯誤するのみ！