📐

Next.js + Typescript + TailwindCSS + Vercelな開発環境のセットアップ方法

4 min read

始めに

普段はNuxtを触っていますが、業務上React/Nextを勉強せざるを得ない状況になりました。そこで、Nuxtとほぼ同じように扱えるだろうという安易な考えでReactを飛ばしてNextに入門しました。

今回はReactの長所を十分に活かせるように、タイトル通りの環境のセットアップ方法についてまとめてみます。

Next.jsの導入

Next.jsはVercel社が提供しているReactフロントエンド開発Webフレームワークです。
ページファイルを元にした自動ルーティングやFast Refreshによる開発体験の向上が特徴です。

Next.js公式

next.jsの導入にはNodeとnpm(お好みでyarn)のインストールが前提となります。

$ node -v
v14.15.1
$ npm -v
6.14.8
$ yarn -v
1.22.10

アプリを作成したいディレクトリ上で以下のコマンドを実行します。今回はnext-setupというアプリ名で作成しました。

$ npx create-next-app next-setup

.
.
.

Initialized a git repository.

Success! Created next-setup at /Users/grinch1252/next-setup
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd next-setup
  yarn dev

アプリの作成に成功しましたら、確認のために一度サーバーを立ち上げてみます。

$ yarn dev
yarn run v1.22.10
warning ../package.json: No license field
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully

このような画面が出ればOKです。

Typescriptの導入

次にtypescriptをnext-appに入れていきます。
まずはルートディレクトリに空のtsconfig.jsonを作成します。

$ touch tsconfig.json

yarnでtypescriptを導入します。

$ yarn add --dev typescript @types/react @types/node
tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "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に変更する必要もあります。

TailwindCSSの導入

次にtailwindCSSをインストールします。

$ yarn add tailwindcss@latest postcss@latest autoprefixer@latest

インストールが完了しましたらtailwind.config.js, postcss.config.jsを作成します。

$ npx tailwindcss init -p

tailwindcss 2.1.2
  
   ✅ Created Tailwind config file: tailwind.config.js
   ✅ Created PostCSS config file: postcss.config.js

作成された二つのファイルは以下のように書き換えます。

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

global.cssにtailwindの為の記述をします。

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

Install Tailwind CSS with Next.js

Vercelにプロジェクトをデプロイ

まずはGithubで新規リポジトリを作り、pushをしておきます。
Vercel上でGithubアカウントでサインアップします。
import git repositoryの欄から自分のデプロイしたいプロジェクトを選択します。

進めていくとbuildの設定などが出てきますが、Nextアプリの場合は何もせずにDeployでOKです。

しばらくBuild Logsを眺めていると

いつの間にかデプロイが成功しています。
Visitを押して実際にサイトが見れるか確認しましょう。

Vercel社が開発しているだけあって、Next.jsとVercelの相性は抜群です。
Githubにpushした時点で自動的にbuildを行ってくれます。
build logはDashboard上から確認出来ます。

終わりに

今回はNextの開発環境のセットアップ、及びVercelへのデプロイについてまとめました。

※追記
セットアップが完了したのはいいけど、react + typescriptでどうやってコードを書けばいいか分からない方も居ると思います。
YoutubeにアップされているCookpad様のモダンフロントエンド講座が非常に分かりやすかったのでリンクを掲載しておきます。
Cookpad Online Spring Internship 2021

Discussion

ログインするとコメントできます