skiss
©skiss 1997 - 2024
タイトル : Next.js MUI App Router、layout.tsxを試してみる
更新日 : 2024-01-27
カテゴリ : プログラミング
タグ :
frontend   
nextjs   
material-ui   

MUI App Routerを試してみます

Next.js 13 Template と Layout の使い分けを参考にします。

(設定によって違うけど)srcがトップで、src/appがホームになります。なので、src/app/page.tsx が / で参照したページになります。

この時、src/app/dashboard/ を作って、src/app/dashboard/page.tsx を書くと、 /dashboard がそのページになります。これが App Routerってことかな。

MUI layout.tsxを試してみます

src/app/page.tsx の同じ階層で、layout.tsx を以下のように書くと、{children} のところに src/app/page.tsx が入ります。

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

import Header from '@/components/header';
import Sidebar from '@/components/sidebar';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next MUI Test",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          <Stack>
            <Header />
          </Stack>
          <Stack direction={"row"}>
            <Stack>
              <Sidebar />
            </Stack>
            <Stack>
              {children}
            </Stack>
          </Stack>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

以下みたいな感じで、AppBarとSideBarを置くときに便利かも。

画像1

この時に便利なのが、src/app/dashboard/ にもそのlayoutが引く継がれることです。以下みたいに同じページレイアウトになります。

src/app/dashboard/page.tsxだけ書くだけでOK。

画像1

layout.tsxを継承する関係性を考慮しないながら設計しないとですね。