View on GitHub

共通レイアウトの作成

Home

共通レイアウトの作成

ヘッダの作成

src/frontend/src/app/components/Header.tsx

import Link from "next/link";

const Header = () => {
  return (
    <header>
      <div>
        <h1>
          <Link href="/">recsys_full</Link>
        </h1>
      </div>
      <div>
        <nav>
          <div>About</div>
          <div>Sign Up</div>
          <div>Sign In</div>
        </nav>
      </div>
    </header>
  );
};

export default Header;

フッタの作成

src/frontend/src/app/components/Footer.tsx

const Footer = () => {
  return (
    <footer>
      <small>@2025 RecSysLab</small>
    </footer>
  );
};

export default Footer;

共通レイアウトの作成

src/frontend/src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

import Header from "./components/Header"; // <- 追加
import Footer from "./components/Footer"; // <- 追加

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "recsys_full", // <- 修正
  description: "Generated by create next app",
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    // ↓修正
    <html
      lang="ja"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="flex min-h-full flex-col">
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
    // ↑修正
  );
}

ブラウザで下記 URL にアクセスすると、「recsys-full」、「About」、「Sign Up」、「Sign In」、「Index」、「@2025 RecSysLab」と表示されます。