職場の同僚にこのブログを見せたところ思いのほか評価していただきました！ありがたや...。

是非作り方を教えてほしいとのことなので、今回は先輩風を吹かす為にもできるだけ分かりやすく開発からデプロイまでの流れを解説していこうと思います。おそらく超大作になると思いますので数回に分けて解説していきます。まずは環境構築編です。

使用技術

今回使用する技術は以下の通りです。

Next.js

React を使った Web アプリケーションフレームワーク。サーバーサイドレンダリングや静的サイト生成などの機能を備え、パフォーマンスや SEO の向上を行ってくれる。自動ルーティングや API 作成機能を利用することで簡単に高機能なウェブサイトを構築可能。

Vercel

静的サイトやサーバーレス機能を持つモダンな Web アプリケーションをデプロイ（展開）するためのクラウドプラットフォーム。Next.js を開発したチームが運営しており、Next.js アプリケーションとの相性が特に良いのが特徴。無料で使用可能。

Contentful

クラウドベースのヘッドレスコンテンツ管理システム（CMS）。Contentful は API を通じてコンテンツを提供するためどんなプラットフォームやデバイスにも柔軟に対応が可能である。

※ ヘッドレスCMSとは、コンテンツの作成と管理を行うバックエンドとコンテンツを表示するフロントエンドを分離したシステムのこと。

TypeScript

JavaScript を使用する現代フロント開発では欠かせない言語。JavaScript に静的型付け機能を拡張したもので、コードの品質向上や開発効率が爆上がりする。

Sass（SCSS）

CSS の拡張機能を提供するスタイルシート言語。効率的で再利用可能なスタイルシートの作成を支援し、CSS の生産性を向上させるための多くの機能を提供してれる。今回はその中の SCSS を使用する。

プロジェクトの作成

開発スタートです。まずは GitHub にブログ用のリポジトリを作成してローカルに clone しましょう。

// https を使った例
git clone https://github.com/ShSato4JPN/world-of-zono-v3.git
// SSH を使った例
git clone git@github.com:ShSato4JPN/world-of-zono-v3.git

次に clone したリポジトリ直下で Next.js のプロジェクトを作成します。こちらは公式ドキュメントに載っているコマンドを実行しています。

// Next.js のプロジェクトを作成
npx create-next-app@latest

コマンドを実行するとインタラクティブ形式でプロジェクトの生成を行うことができます。今回は以下のように設定してください。

> What is your project named?

リポジトリ（ディレクトリ）直下に Next プロジェクトを展開するため「.(ドット)」を入力

> Would you like to use TypeScript?

TypeScript を使用するため「Yes」を選択

> Would you like to use ESLint?

ESLint を使用するため「Yes」を選択

> Would you like to use Tailwind CSS?

Tailwind CSS は使用しないため「No」を選択

> Would you like to use 'src/' directory?

src ディレクトを使用するため「Yes」を選択

> Would you like to use App Router?

公式推奨のため「Yes」を選択

> Would you like to customize the default import alias (@/*)?

エイリアスを使うとインポート文を簡略化できるため「Yes」を選択

> What import alias would you like configured?

デフォルト値を使用するため何も入力せずに「Enter キー」を押下

プロジェクトの作成に成功すると以下のようにリソースが展開されると思います。（※ 2024年6月現在）
./ ├── README.md ├── next-env.d.ts ├── next.config.mjs ├── node_modules ├── package-lock.json ├── package.json ├── public │ ├── next.svg │ └── vercel.svg ├── src │ └── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── page.module.css │ └── page.tsx └── tsconfig.json
各ファイルに関する詳細は公式ドキュメントをしっかり読むこと！これは僕のお師匠さんからも口酸っぱく言われたことで、公式ドキュメントに載っていることが全てです。Qiita や Zenn などの情報は参考程度に留めておくことが大切です。（この記事も参考程度にすること）

因みに、私が新しい技術を使って開発する際はまず公式ドキュメントに載っているチュートリアルを実施します。その後、使用する技術に関するドキュメントを読んで実装してみます。ある程度形になったタイミングで他のエンジニアが実装したコードと比べて部分的にコードの最適化を行うの繰り返しです。初めは面倒に感じるかもしれませんが、この繰り返し作業が自分のスキルを向上させる一番の近道だと思います。（これも師匠の教え）

VSCode のカスタマイズ

コーディング前に VSCode をカスタマイズして開発効率を上げておきましょう。これらのプラグインをインストールして下さい。（⭐️ がついているのは必須）

⭐️ ESLint

JavaScript のための静的解析検証ツール。最早これがないと開発できない。

⭐️ Prettier - Code formatter

コードフォーマッター。インデントや改行を自動で整形してくれるため、コードの見た目を気にせずコードディングに専念できるようになります。

⭐️ Prettier ESLint

JavaScript と TypeScript のコードを prettier-eslint パッケージを使ってフォーマットしてくれるプラグイン。

⭐️ EditorConfig for VS Code

エディタのフォーマット（改行コードやインデント数など）を一貫してくれるプラグイン。

⭐️ Stylelint

CSS や Sass の文法チェックやコードフォーマットを行ってくれるプラグイン。

Code Spell Checker

英単語の誤字脱字をチェックしてくれる。かなりおすすめ。

Pretty TypeScript Errors

TypeScript の警告・エラーメッセージを見やすく整形してくれる。

とりあえずこれらのプラグインを VSCode に入れておけば開発効率がぐんっと上がると思います。本当はまだ紹介したいプラグインが沢山あるのですが意外と書くのが大変なのでいつか別の記事でまとめようと思います。

Next プロジェクトのカスタマイズ

次はプロジェクトに対するカスタマイズを行なっていきます。プロジェクト直下にファイルを作成して設定内容をそのままコピペして下さい。

.npmrc

npm の設定ファイル。npm でパッケージをインストールする際の設定を記述する。
progress=false save-exact=true
progress=false

パッケージのインストールプロセス中に進行状況バーを表示しないようにする設定。インストール速度が若干上がる。

save-exact=true

package.json に依存関係を保存する際にバージョン番号を厳密に指定してくれる。意図しないバージョンアップを防ぐために設定。

.editorconfig

エディタの設定ファイル。エディタの挙動を統一するための設定を記述する。
root = true [*] indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true charset = utf-8
root = true

プロジェクトルートに配置された .editorconfig ファイルがプロジェクト全体に適用されるようにする設定。

[*]

全てのファイルに適用する設定を記述するためのセクション。

indent_style

インデントのスタイルを指定する。space か tab が指定可能。今回はスペースを使用。

indent_size

インデントのサイズを指定する。今回は 2 に設定。

end_of_line

改行コードのスタイルを指定する。今回は lf（Linux）に設定。

insert_final_newline

ファイルの最後に改行を挿入する設定。true に設定。

trim_trailing_whitespace

行末の空白を削除する設定。true に設定。

charset

文字セットを指定する。今回は utf-8 に設定。

.eslintrc.json

ESLint の設定ファイル。こちらの設定は個人の好みに合わせて変更しても問題ありません。この辺の設定は奥が深いので、まずはデフォルトの設定を使ってみて問題があれば変更していくのが無難だと思います。
{ "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "next/core-web-vitals", "prettier" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "plugins": ["@typescript-eslint", "react", "import", "unused-imports"], "rules": { "import/order": [ "error", { "groups": [ "builtin", "external", "internal", "parent", "sibling", "index" ], "newlines-between": "always", "alphabetize": { "order": "asc", "caseInsensitive": true }, "pathGroups": [ { "pattern": "react**", "group": "external", "position": "before" } ], "pathGroupsExcludedImportTypes": ["react"] } ] } }
env

ESLint で使用するグローバル変数を指定する。
・browser: ブラウザ環境のグローバル変数を使用可能にする。
・es2021: ECMAScript 2021 の構文や機能を使用可能にする。
・node: Node 環境のグローバル変数（process など）を使用可能にする。

extends

ESlint の既存の設定を拡張している。
・plugin:@typescript-eslint/recommended: TypeScript 用の推奨設定。
・plugin:react/recommended: React 用の推奨設定。
・next/core-web-vitals: Next のパフォーマンス最適化のためのルール。
・prettier: Prettier との競合を防ぐための設定。

parser

TypeScript 用のパーサーを指定。
・@typescript-eslint/parser: TypeScript 用のパーサーを指定。

parserOptions

・ecmaVersion: ECMAScript のバージョンを指定。latest は最新バージョンを使用。
・sourceType: モジュールのソースタイプを指定。module は ES6 モジュールを意味している。

plugins

ESLintのプラグインを指定。
・@typescript-eslint: TypeScript向けの ESLint プラグイン。
・react: React 向けの ESLint プラグイン。
・import: インポート文の順序を整理するためのプラグイン。
・unused-imports: 未使用のインポートを削除するためのプラグイン。Ï

rules

ESLint のルールをカスタマイズします。
・import/order: インポート文の順序を整理するルールです。

.stylelintrc.json

Stylelint の設定ファイル。こちらも個人の好みに合わせて変更しても問題ありません。.eslintrc.json と同じく、まずはデフォルトの設定を使ってみて問題があれば変更していくのが無難だと思います。
{ "extends": [ "stylelint-config-standard-scss", "stylelint-config-css-modules", "stylelint-config-clean-order" ], "rules": { "selector-id-pattern": null, "selector-class-pattern": null }, "ignoreFiles": ["src/**/*.css"] }
extends

既存の設定を拡張している。
・stylelint-config-standard-scss: SCSS 用の標準的な Stylelint 設定。
・stylelint-config-css-modules: CSS モジュールを使用する際の推奨設定。
・stylelint-config-clean-order: プロパティの順序を整理するための設定。

rules

Stylelint のルールをカスタマイズしている。
・selector-id-pattern: ID セレクタのパターンを制限化。
・selector-class-pattern: クラスセレクタのパターンを制限化。

ignoreFiles

指定されたファイルやディレクトリを Stylelint の対象から除外する。
・src/**/*.css: src ディレクトリ内のすべての CSS ファイルを無視している。

必要パッケージのインストール

次は先ほど導入したプラグインや設定ファイルを動かすために必要なパッケージをインストールしましょう。一つ一つ説明するのは流石にしんどいのでググって下さい💀（この辺は自分もまだ未熟なので無駄なパッケージをインストールしている可能性大です）

npm i -D 
  @typescript-eslint/eslint-plugin
  @typescript-eslint/parser
  eslint
  eslint-config-next
  eslint-config-prettier
  eslint-import-resolver-typescript
  eslint-plugin-import
  eslint-plugin-react
  eslint-plugin-unused-imports
  prettier
  stylelint
  stylelint-config-clean-order
  stylelint-config-css-modules
  stylelint-config-standard-scss
  typescript-eslint

VSCode の設定

最後に VSCode に設定を加えて環境構築編はおしまいです。VSCode の settings.json に以下の設定を追加してください。

setting.json

VSCode の設定ファイル。こちらの設定を追加することで保存時に自動でコードフォーマットや自動修正が行われるようになります。
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.fixAll.stylelint": "explicit", "source.fixAll.markdownlint": "explicit" },
editor.defaultFormatter

デフォルトのコードフォーマッターを指定。
・esbenp.prettier-vscode: Prettier を VSCode のデフォルトフォーマッターとして使用。

editor.formatOnSave

ファイル保存時に自動的にコードをフォーマットするように設定。

editor.codeActionsOnSave

保存時に実行するコードアクションを指定。
・source.fixAll.eslint: ESLint によるすべての自動修正を実行する。
・source.fixAll.stylelint: Stylelint によるすべての自動修正を実行する。
・source.fixAll.markdownlint: Markdownlint によるすべての自動修正を実行する。

かなり長くなりましたが、これらの設定を行うことでかなり開発しやすくなると思います。次は開発編を作成しますがこのペースだとかなり時間がかかりそうな気が...。

他にお勧めする設定はこちら：husky、commitlint、lintstaged、renovate 興味がある方はググってみて下さい〜。