はじめに
この記事では、Next.js アプリケーションにおける RootLayout コンポーネントのコード内容と、その目的について簡潔にまとめます。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
全体のフォントやスタイル設定、レイアウト構成の基本となる部分です。
書こうと思ったきっかけ
受講しているITスクールのハッカソンの開発の一環で、共通レイアウトを構築した際の設定を忘れないように備忘録としてまとめています。
コード
src/app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import "../styles/common.css"; // ← 追加：和室用CSS（必要に応じて）
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
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="ja">
<head>
{/* さぶちゃん日記風フォント（M PLUS Rounded 1c）を読み込み */}
<link
href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap"
rel="stylesheet"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}
内容
-
GeistおよびGeist_Monoフォントを Next.js の組み込み Google Fonts 機能で読み込み、CSS変数として利用できるように設定しています。 -
common.cssを読み込むことで、和室風のデザインスタイルを全体に適用しています。 -
<head>タグ内で、M PLUS Rounded 1cフォントを明示的に読み込み、日本語の表示に柔らかい印象を与えるようにしています。 -
<body>にフォント変数とantialiasedクラスを指定し、全体の文字表示を滑らかに整えています。 - 最後に、
childrenを展開することで、このレイアウトがアプリ内のすべてのページに適用されるよう設計されています。
まとめ
この RootLayout は、Next.js アプリの基本的な見た目や雰囲気を決定づける重要な部分です。
フォント、CSS、構造を適切に定義することで、和風かつ整ったUIを全体に行き渡らせることができます。
ハッカソンなどで再利用する際にも役立つため、ここに記録しておきます。