少し前になりますがNuxt.jsの2系で作成した自社サイトをNext.jsでリニューアルしましたので、備忘録も兼ねてその時の作業をまとめていきたいと思います。前回同様WordPressをヘッドレスCMSとして利用し、サイト自体はSSGでビルドするという仕様です。前回の制作時から数年経っているのと、Nuxt.jsとNext.jsの微妙な違いなどもありちょっと時間もかかりそうかなと思ったのですが、ドキュメントを見ながらでも比較的スムーズに進めることができたので、技術の進歩はすごいなと改めて感じました、、   過去には「Page Router」をつかった案件は参画したことがあったのですが、「App Router」は初めてだったので勉強も兼ねて今回はNext.jsの14系でApp Routerを採用することにしました。以降の記事はこの前提で進んでいきます。    

1. Next.jsのインストール・プロジェクト作成（TypeScript、TailwindCSS、ESLintの導入）

Next.jsはインストールコマンドで簡単に新規プロジェクトを作成できます。下記コマンドでインストールを進めていきます。

npx create-next-app@latest
# または
yarn create next-app

  コマンド実行後は対話式でインストール作業が進んでいきます。

create-next-app@14.0.4
Ok to proceed? (y)

  質問項目にはデフォルトでTypeScriptの使用や、TailwindCSSの導入、ESLintのインストール、エイリアスの設定など必要に応じてオプションで揃えることができます。言語やフレームワークは適宜プロジェクトに合わせて、そのほかエイリアスの設定とsrcディレクトリを追加しておきます。

✔ What is your project named? … [PROJECT_NAME]
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

  インストールが完了し、新規プロジェクトが作成されるとプロジェクトディレクトリに移動しローカルサーバーを起動させてサイトが表示されるかチェックします。

npm run dev

  これで自動的にNext.jsのプロジェクトが作成されますが、手動でプロジェクトを作成したい場合には下記のように個別でパッケージをインストールしていきます。

npm install next react react-dom

  以上で最低限のパッケージはインストールされますが、必要であれば下記のように追加でパッケージを追加します。

npm install --save-dev typescript @types/node @types/react @types/react-dom tailwindcss autoprefixer postcss eslint eslint-config-next

  もちろんESLintやTailwindCSSなどを導入する場合には合わせて設定ファイルも必要となりますので作成しておきます。

touch .eslintrc.json postcss.config.js tailwind.config.ts

  ローカルサーバーの起動やビルドなどはスクリプトコマンドで登録しておきます。package.jsonに下記を追加します。 【package.json】

{
  ....
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
  ....
}

  ESLintを使用する場合、Next.jsのnext/core-web-vitalsはTypeScriptのエラーが出ないため、TyepScript用の拡張パッケージをインストールします。

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

  インストールしたパッケージをESLintの設定ファイルで指定します。 【.eslintrc】

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    ....
  ]
}

   

2. 環境変数の設定

Next.jsでは「.env」ファイルを使うとデフォルトで環境変数を扱うことができ、今回は主に本番用と開発用で値を切り替える時に使いたいので「.env.development」「.env.production」とそれぞれ作成します。こうするとビルドコマンドとローカルサーバー起動のコマンドにあわせて自動的に環境を分けることができます。

touch .env.development .env.production

  環境変数用の設定ファイルを作成したら、サイト上で使う定数などをまとめておきます、なお、クライアント側で参照したい場合にはNEXT_PUBLIC_のプレフィックスをつける必要があるので注意します、そしてこれらのファイルはGitの管理下に置いておきます。

// .env.development
SITENAME=（開発環境）サンプルサイト
ENVURL=http://localhost:3000
NEXT_PUBLIC_SITENAME=（開発環境）サンプルサイト
NEXT_PUBLIC_ENVURL=http://localhost:3000

// .env.production
SITENAME=サンプルサイト
ENVURL=https//example.com
NEXT_PUBLIC_SITENAME=サンプルサイト
NEXT_PUBLIC_ENVURL=https//example.com

  なお、APIキーなどクライアント側で秘匿したい値については「.env.local」のファイルを作成し、そこで管理するようにします。その場合にはもちろんこのファイルはGitの追跡対象外としておきます。

touch .env.local

  .env内の情報は下記のようにキーを指定することで対応する値をNext.jsのプロジェクト内で参照できるようになります。

process.env.[KEY_NAME]

 

---

  ここまでで最低限の機能が揃っている状態ですので、簡単なデモサイトやモックなどであればここから十分作成できますが、この後は引き続き各種リンターなどのツール類の導入、そしてサイト内の共通設定、コンポーネント作成など実際にウェブサイト本体を構築していきます。この辺りについてはまた次回記事で詳しくまとめてみたいと思います。