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が使えるようになります！