はじめに

この記事では、React UI コンポーネントライブラリ Mantine を Next.js App Router で利用する手順について記載します。

開発環境

開発環境は以下の通りです。

Windows 11
Next.js 14.2.4
React 18.3.1
TypeScript 5.5.2
Node.js 20.13.1
npm
@mantine/core 7.12.1
@mantine/hooks 7.12.1

Next.js アプリの作成

まずは Next.js アプリを作成します。

npx create-next-app@latest

実行中の質問の回答は以下のように回答します。

√ What is your project named? ... mantine-next-app-router
√ 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
√ What import alias would you like configured? ... @/*

Mantine のインストール

npm install @mantine/core @mantine/hooks

PostCSS のインストール・設定

PostCSS のインストール・設定を行います。
必須ではないですが、スタイルするうえで便利な機能が複数あるので、公式ドキュメントでは推奨されています。

まずは、関連するパッケージをインストールします。

npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars

次にアプリのルートディレクトリに設定ファイル postcss.config.cjs を作成します。

postcss.config.cjs

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

Mantine の設定

アプリ内で Mantine を利用できるようにするため、スタイル、MantineProvider、ColorSchemeScript を src/app/layout.tsx にインポートします。
MantineProvider は body タグ内、ColorSchemeScript は head タグを追加し、その中に記載します。

src/app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "@mantine/core/styles.css";
import { ColorSchemeScript, MantineProvider } from "@mantine/core";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript />
      </head>
      <body className={inter.className}>
        <MantineProvider>{children}</MantineProvider>
      </body>
    </html>
  );
}

設定としては以上になります。

動作確認

設定が正しくできているか確認するため、実際に Mantine のコンポーネントを実装します。
今回は Continer コンポーネントを利用します。

src/app/page.tsx

import { Container } from "@mantine/core";

export default function Home() {
  const demoProps = {
    bg: "var(--mantine-color-blue-light)",
    h: 400,
    mt: "md",
  };
  return <Container {...demoProps}>Default Container</Container>;
}

npm run dev でローカルサーバーを起動します。
想定通りのスタイルになっていることを確認できました。

参考