Zenn
🕌

Next.js+MUIでホームページを作るまで

2024/08/28に公開
Next.js
pnpm
mui
tech

ホームページを作成するにあたり、Next.jsを使ってみたかったのでその手順をまとめました。
初心者なので設定もれや誤りがあるかもしれませんが、ご容赦ください。

プロジェクトを作る

まずはプロジェクトを作成します。

$ pnpm dlx create-next-app@latest
√ What is your project named? ... homepage
√ Would you like to use TypeScript? ... No / Yes -> Yes
√ Would you like to use ESLint? ... No / Yes -> Yes
√ Would you like to use Tailwind CSS? ... No / Yes -> No
√ Would you like to use `src/` directory? ... No / Yes -> Yes
√ Would you like to use App Router? (recommended) ... No / Yes -> Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes -> No
Creating a new Next.js app in ...

Using pnpm.

Initializing project with template: app

(中略)

Success! Created homepage at ...
$ cd homepage

プロジェクトのひな形が作成されました。

MUIを導入する

$ pnpm add @mui/material @emotion/react @emotion/styled
Done.
$ pnpm add 
Done.

Next.JSとMUIを統合する

https://mui.com/material-ui/integrations/nextjs に沿って設定を行います。

$ pnpm add @mui/material-nextjs @mui/cache
Done.
app/layout.tsx
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import {AppRouterCacheProvider} from "@mui/material-nextjs/v13-appRouter";
+import {ThemeProvider} from "@mui/material";
+import theme from "../theme";

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

 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body>
+        <AppRouterCacheProvider>
+            <ThemeProvider theme={theme}>
+                {children}
+            </ThemeProvider>
+        </AppRouterCacheProvider>
+      </body>
     </html>
     );
 }

src/theme.tsを作成します。

src/theme.ts
'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const theme = createTheme({
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
});

export default theme;

ページを作成する

ここまでくればおそらくいつも通りに書けます。
app/page.tsxは作り直しちゃいましょう。

app/page.tsx
export default function Home(){
    return (
        <main></main>
    );
}

あとはお好みのページを作成してください。

Discussion