Next.js | 環境構築からデプロイまでの流れ

2021-11-29
Next.js
Tailwind CSS
TypeScript

はじめに

今回はWebサイトの作成まで終了し、デプロイまではできたけどいろんな資料、情報から都度パッケージをインストールしたりと、いつ・どんなことをやって作成できたのかを整理できていなかったので、一連の流れをまとめてみました。

全体の流れ

Tailwind CSS を使えるようにする

環境構築（作業がしやすいように）

Eslinie Pliter を使えるようにする

GitHub へリポジトリする

Vercel へデプロイする

npm と yarn の違いって？

今まで何も考えずに npm を使用していましたが、npm と yarn の違いも理解していなかったので、今回どちらを使用するかを決めていきたいと思います。

結論は、npm で統一していきます。こちらのサイトを参考にしました。npm と yarn の違い2021

初心者には npm と書いていたのでまずはこちらを使用していきます。

後々、yarn も確認していきたいと思います。

npm yarn それぞれのメリット

初心者、もしくは複数人開発であればnpm

標準ツールのため、Nodeと一緒に複数人でバージョンを揃えやすい

nodeを入れれば追加でのインストールが不要

標準ツールのため、信頼性があり、ドキュメントも多い

現在はインストールがそこまで遅くはない

開発でパッケージマネージャーを触ることは最初期や機能追加以外は少ない

個人開発であればYarn

パッケージのインストール、アンインストールが早く、初期の試行錯誤がしやすい

pnpmではnode_modulesのサイズが小さくなり、容量を圧迫しない

Next.js で Tailwind CSS を使用する

まずは Next.js で新規アプリを作成していきます。この段階で Tailwind CSS も一緒に設定してきます。このコマンドで一発です。

npx create-next-app [プロジェクト名] -e with-tailwindcss

ターミナルでコマンド実行

npm run dev

localhost:3000 へアクセスし、以下の画面になればOKです。

実際に TailwindCSS が効いているか Vs Code で確認しながら進めていきます。

Vs Code でも問題なく立ち上がったら問題ないです。

Tailwind CSS の設定に入っていきます。

ディレクトリの整理

まずは、src フォルダを新規に作成していきます。画面に使用するものは全て src フォルダに入れることで、すっきりさせましょう。

├── README.md ├── next-env.d.ts ├── next.config.js ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├──

余談ですが、上記のようにディレクトリを表示させたい場合は

~/Desktop/test-api $

これで一発で表示されます。

実装方法はこちらを確認してください。すぐに実装できます。

tailwind.configjs の設定を変更

【Before】

module.exports = { content: [ './

【After】

module.exports = { content: [ './

「src フォルダにある指定ファイルを全て適応してください」へ変更しています。

_app.tsx と global.css ファイルを確認してみます。

// _app.tsx import '../styles/globals.css' import type { AppProps } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} /> } export default MyApp // global.css @tailwind base; @tailwind components; @tailwind utilities;

global.css（全ての装飾を設定しているファイル）に tailwind の設定しかないのでこの状態でOKです。

eslint-plugin-tailwindcss の導入

Vs Code で eslint の拡張機能をインストールします。

ではパッケージをインストールします。

npm install -D eslint

npm install -D eslint-config-next

npm install -D eslint-plugin-tailwindcss

package.json が以下になっていれば問題ないです。

"devDependencies": { "@types/node": "17.0.4", "@types/react": "17.0.38", "autoprefixer": "^10.4.0",

"devDependencies" は開発環境のみで使用するものを意味しています。

パッケージはインストールできましたが。eslint を管理するファイルが存在しませんので追加します。.eslintrc は新たにファイルを作成します。

.eslintrc の中身を書いていきます。ここはこういうものなんだ、と捉えるようにしましょう。

{ "extends": ["next", "next/core-web-vitals", "plugin:tailwindcss/recommended"] }

※22年2月11日追記

plugin:tailwindcss/recommended は不要。自動的に並び替えされる

実装できているか確認します。

Tailwind CSS を打ち始めたら、黄色い波線が出てきたら成功です！

Prettier のセットアップ

Prettier を入れる目的はコード整形をする際、ルールがバラツキがあるとチーム開発では大変になるからです。

Vs Code で拡張機能をインストールします。

ではパッケージをインストールします。

npm install -D prettier eslint-config-prettier

package.json にインストールされているか確認

"devDependencies": { "@types/node": "17.0.4", "@types/react": "17.0.38", "autoprefixer": "^10.4.0", "eslint": "^8.6.0", "eslint-config-next": "^12.0.7",

.eslintrc に prettier を追加

{ "extends": ["next", "next/core-web-vitals", "plugin:tailwindcss/recommended",

package.json に prettier のルールを追加（// 説明の内容は貼付け後、削除してください）

"prettier": { "trailingComma": "all",// 末尾のカンマあり "tabWidth": 2,// tab の長さは半角スペース 2 つ "semi": true,// セミコロンあり "singleQuote": true,// シングルクォーテーションに統一 "jsxSingleQuote": true,//jsx もシングルクォーテーションに統一 "printWidth": 100 // １行の最大文字数 100 },

これで実装完了です！

モジュールをインポートする順番をアルファベット順へ

.eslintrc に以下のルールを追加すればOKです。

{ "extends": [ "next", "next/core-web-vitals", "plugin:tailwindcss/recommended", "prettier" ], // 以下を追加 "rules": { "import/order": [ "error", { "alphabetize": { "order": "asc" } } ] } }

Skills ➝ About の順番でインポートした場合、赤い波線が出たら問題なく設定完了です。