はじめに
この記事では、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 でローカルサーバーを起動します。
想定通りのスタイルになっていることを確認できました。
