next-transpile-modulesを使ってモノレポ環境でNext.jsコンポーネントライブラリを作成する方法

この記事では、モノレポ環境で2つのNext.jsプロジェクトを作成し、共通で使うコンポーネントをパッケージ化して、Next.jsプロジェクトにインストールする方法について説明します。

まず、以下のようなディレクトリ構成を想定します。

.
├── apps
│   ├── next-app1
│   └── next-app2
├── packages
│   └── components
└── package.json

appsディレクトリに2つのNext.jsプロジェクトを作成し、packagesディレクトリに共通で使うコンポーネントを作成します。

次に、packages/componentsディレクトリにボタンコンポーネントを作成し、index.tsでエクスポートします。

.
└── packages
    └── components
	      ├── Button
        └── index.ts

index.ts

export { Button } from './Button';

packages.jsonのnameをnext-componentsにして、versionを1.0.0に設定します。

{
  "name": "next-components",
  "version": "1.0.0",
  "main": "index.ts"
  ...
}

Nextjsプロジェクトにインストール

次に、Next.jsプロジェクトにボタンコンポーネントをインストールします。ローカルライブラリをインストールする場合は、バージョン指定が必要になります。

yarn add next-components@1.0.0

next-transpile-modulesを使用して、ローカルライブラリをNext.jsで使用するために必要なトランスパイル設定を行います。ただし、Next.js 13.1.0以降では、next-transpile-modulesはネイティブに組み込まれています。

next.config.jsに以下のような設定を追加します。

/** @type {import('next').NextConfig} */
const withTM = require("next-transpile-modules")(["next-components"]);

const nextConfig = withTM({
  reactStrictMode: true,
})

module.exports = nextConfig

これで、共通のコンポーネントをパッケージ化して、複数のNext.jsプロジェクトで使えるようにしました。