自分用 Next.jsのsetup

自分用のNext.jsのsetupをまとめたものです。

Next.jsのプロジェクト作成

セットアップ

VSCodeのターミナルの任意のディレクトリで以下のコマンドを入力し、セットアップを行う(自分はyarnコマンド、TypeScriptを使用)。
コマンドを入力後、質問がいくつかあるので答える。

terminal

yarn create next-app --typescript

開発サーバーの立ち上げ

作成したディレクトリに移動した後に、VSCodeのターミナルの任意のディレクトリで以下のコマンドを入力し、開発サーバーを立ち上げる。

terminal

yarn dev

Next.jsのフォーマットの削除

開発サーバーを立ち上げると、Vercel(Next.jsを作成した会社)が作成したフォーマットが表示されるので、それを変更してみる。
app/page.tsxを開き、return文の中身を以下の内容に書き換える。再度localhostを確認し、Hello Next.js!と表示されていたらOK。

app/page.tsx

<div>Hello Next.js!</div>

title,descriptionの変更

localhostのページのタイトルがCreate Next Appになっているので変更する。app/layout.tsxを開き、4,5行目のtitle,descriptionを任意のものに変更する。再度localhostを確認し、titleが変更されていたらOK。

tailwindcssのsetup

tailwindcssのパッケージのインストール

VSCodeのターミナルで以下の2つのコマンドを入力し、tailwindcssのパッケージをインストールする。

terminal

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

configファイルの編集

tailwind.config.jsを開き、3行目のcontentの中身を以下のものに変更する。

tailwind.config.js

content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],

global.cssの編集

app/global.cssの中身を以下のものに変更する。

global.css

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

エラーの修正

global.cssやtailwind.config.tsでエラーが発生していると思うので修正する。
tsconfig.jsを開き、moduleResolutionを以下のように修正する。
app/global.cssの中身を以下のものに変更する。

tsconfig.js

"moduleResolution": "node",

cssを試す

tailwindcssのsetupが完了したか確認してみる。
app/page.tsxを開き、以下のようにcssを当ててみる。
localhostを開き、テキストが赤くなっていたらOK。

app/page.tsx

<div className="text-red-400">Hello Next.js!</div>

ディレクトリの構築

ディレクトリの構築については別の記事にまとめているので以下を参照。