前回記事に引き続き、Next.jsでヘッドレスCMSのサイトを作成するまでの工程をまとめていきたいと思います。前回までの作業では既にNext.jsのプロジェクトは準備ができている状態ですが、コーディングを行なっていく中でもう少し環境を整えていきたいところです。今回はSassや各種リンター、フォーマッターを追加していき、共通コンポーネントなどを作成しておきます。   （過去の参考記事もどうぞ） Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃1：インストール・導入    

1. Sass ＆ Stylelintのインストール

Next.jsのプロジェクト作成時には既にTailwindCSSがインストールされている状態ですが、Sassの方が慣れているので使いたいというケースもあるかと思いますので、プロジェクトで「Sass」を使えるようにしていきます。まずはSassをインストールしていきます。

npm install --save-dev sass

  Next.js側ではSassをサポート（SCSS、SASS）していますのでローダーなどを追加するなどは不要です。Sassファイルをimportすることでスタイルを適用できます。これでSassは使える状況ですが、合わせて「Stylelint」も追加しておきます。まずはStylelintと必要に応じて各種パッケージをインストールしていきます。

npm install --save-dev stylelint stylelint-config-standard-scss @stylelint/postcss-css-in-js postcss-syntax

  続いてStylelintの設定ファイルを作成します。作成したファイルには適宜ルールなどを設定していきます。（参考記事：ViteでStylelintとESlintを使える環境を構築する）

touch .stylelintrc.json

  最後にpackage.jsonにリンター実行用のコマンドを追加します。 【package.json】

{
  ....
  "scripts": {
    ....
    "lint:style": "stylelint src/**/*.{css,scss,jsx,tsx}"
  },
  ....
}

  これで下記コマンドでスタイルシートのリンターを実行できます。

npm run lint:style

   

2. Markuplint & Prettierのインストール

続いてマークアップ用のリンターとフォーマッターを使えるようにしていきます。ここではそれぞれ「Markuplint」と「Prettier」を追加していく例になります。まずはMarkuplintと関連パッケージをインストールします。

npm install --save-dev markuplint @markuplint/jsx-parser @markuplint/react-spec

  インストール後、Markuplintの設定ファイルを作成し、適宜ルールを設定します。（参考記事：ViteでMarkuplintとPrettierを使える環境を構築する）

touch .markuplintrc.json

  先ほど同様にリンター実行用のコマンドを追加します。リンター系のコマンドは下記のようにまとめて一括で実行できるようにしておきます。 【package.json】

{
  ....
  "scripts": {
    ....
    "lint": "npm run lint:style && npm run lint:es && npm run lint:html",
    "lint:es": "next lint",
    "lint:style": "stylelint src/**/*.{css,scss,jsx,tsx}",
    "lint:html": "markuplint src/**/*.{jsx,tsx}"
  },
  ....
}

  マークアップ用のリンターがコマンドで実行できるようになりました。続いてフォーマッターを使えるようにしていきます。

npm run lint:html

  フォーマッターのPrettierと関連パッケージをインストールしていきます。

npm install --save-dev prettier eslint-config-prettier

  リンター同様にPrettierの設定ファイルを用意します。設定については過去記事を参考に（参考記事：ViteでMarkuplintとPrettierを使える環境を構築する）

touch .prettierrc.json .prettierignore

  フォーマッター用のコマンドも追加しておきます。 【package.json】

{
  ....
  "scripts": {
    ....
    "format": "prettier --write 'src/**/*.{ts,js,json,md,jsx,tsx}'"
  },
  ....
}

  コマンドを実行し、実際にフォーマッターが動作するかをチェックします

npm run format

  その他、必要に応じてツールやライブラリをインストールしますが、今回はとりあえずこの環境で進めていきます。    

3. プロジェクト内のディレクトリの整理と共通コンポーネントの作成

Next.jsのプロジェクト内のディレクトリについては、それぞれ案件の規模や特性によって適宜構成を考えていきますが、今回は下記のようなディレクトリ構成にしています。

┣ /.next
┣ /node_modules
┣ /out（ビルド後のファイルが格納される）
  ┣ ......
┣ /public（静的アセットファイルを格納）
  ┣ favicon.ico
  ┣ /images
    ┣ ****.jpg
    ┣ ......
    ┣ ......
┣ /src（ソースコード用ディレクトリ）
  ┣ /app（ルーティング用のディレクトリ）
    ┣ layout.tsx
    ┣ page.tsx
    ┣ ......
  ┣ /components（コンポーネント用のディレクトリ）
    ┣ Header.tsx
    ┣ Footer.tsx
    ┣ ......
  ┣ /features（各種スクリプトファイルを格納）
    ┣ ......
  ┣ /store（状態管理で使う変数用ファイルを格納）
    ┣ ......
  ┣ /styles（スタイルシート用のディレクトリ）
    ┣ *****.css
    ┣ *****.scss
    ┣ *****.modules.css
    ┣ *****.modules.scss
    ┣ ......
  ┗ /types（型定義ファイル用のディレクトリ）
┣ .env.development
┣ .env.production
┣ .env.local
┣ .eslintrc.json
┣ .markuplintrc.json
┣ .prettierrc.json
┣ .stylelintrc.json
┣ .gitignore
┣ .prettierignore
┣ postcss.config.js
┣ tailwind.config.ts
┣ tsconfig.json
┣ next.config.js
┣ next-env.d.ts
┗ package.json

  ソースコード用ディレクトリ配下は必要な処理やスクリプトファイルに合わせて適宜ディレクトリを区切ると良いですが、この辺りについてはまた別記事にてまとめていきたい思います。今回はApp Routerを採用していますので、src/appディレクトリ配下にある「layout.tsx」が共通のテンプレートとして読み込まれる形となります。このファイルでスタイルシートとヘッダーとフッターの共通コンポーネントを読み込んでおきます。 【/src/app/layout.tsx】

import '@/styles/main.scss';
import Header from '@/components/Header';
import Footer from '@/components/Footer';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

  コンポーネントとして読み込まれるヘッダーとフッターのコンポーネントファイルを作成します。

// /src/components/Header.tsx
'use client';
const Header: React.FC = () => {
  return (
    <header></header>
  );
};
export default Header;

// /src/components/Footer.tsx
'use client';
const Footer: React.FC = () => {
  return (
    <footer></footer>
  );
};
export default Footer;

 

---

  Next.jsに限らず、プロジェクト内でコーディング環境を整えておくことでスムーズに開発が進められるようになります。今回は必要最小限となる一例ですが、プロジェクトの規模や特性に応じて揃えていきたいですね。