【Mantine】Next.js App Router で Mantine を利用する

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

https://mantine.dev/

https://nextjs.org/docs/app

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

- 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 アプリを作成します。

```powershell
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 のインストール

```powershell
npm install @mantine/core @mantine/hooks
```

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

https://mantine.dev/styles/postcss-preset/

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

```powershell
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` コンポーネントを利用します。

https://mantine.dev/core/container/

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/c36b917b-c769-4800-1215-3c2843bff336.png)



# 参考
- [Mantine PostCSS preset](https://mantine.dev/styles/postcss-preset/)
- [Usage with Next.js](https://mantine.dev/guides/next/)