Nextプロジェクトの作成

1. 以下のコマンドを実行する

npx create-next-app@latest

2. それぞれの質問に答えて、プロジェクトを設定する

% npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.5
Ok to proceed? (y) y

各質問の内容:

What is your project named?: プロジェクトの名前を入力します（例: next-app）。
Would you like to use TypeScript?: TypeScript を使用するかどうかを選択します（No または Yes）。
Would you like to use ESLint?: ESLint を使用するかどうかを選択します（No または Yes）。
Would you like to use Tailwind CSS?: Tailwind CSS を使用するかどうかを選択します（No または Yes）。
Would you like to use src/ directory?: src/ ディレクトリを使用するかどうかを選択します（No または Yes）。
Would you like to use App Router? (recommended): App Router を使用するかどうかを選択します（No または Yes）。
Would you like to customize the default import alias (@/*)?: デフォルトのインポートエイリアスをカスタマイズするかどうかを選択します（No または Yes）。
What import alias would you like configured?: インポートエイリアスを設定します（例: @/*）。

3. 作成されたフォルダの確認

4. サーバーを起動する

npm run dev

5. ブラウザにアクセスする

以下の画面のようにNext.js アプリケーションが表示されます。

Material UIを導入する

Next.js (App Router)と Material UI の統合についての手順をまとめます。以下のドキュメントをもとに進めていきました。

1. 依存関係をインストールする

npm i @mui/material-nextjs @emotion/cache

@mui/materialが既にインストールされていることを確認してください。されていない場合は、以下のコマンドでmuiをインストールしてください。

npm install @mui/material @emotion/react @emotion/styled

2. layout.tsxを書き換える

app/layout.tsx でをAppRouterCacheProviderインポートし、 <body>の下にあるすべての要素をラップします。

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";

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">
      <body className={inter.className}>
        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
      </body>
    </html>
  );
}

これでMaterial UIが使えるようになります！