View on GitHub

共通レイアウトの作成

Home

共通レイアウトの作成

ヘッダの作成

frontend/src/app/components/Header.tsx

import Link from 'next/link';
import React from 'react';

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

export default Header;

フッタの作成

frontend/src/app/components/Footer.tsx

import React from 'react';

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

export default Footer;

共通レイアウトの作成

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,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        {/* ↓修正 */}
        <div>
          <Header />
          <main>{children}</main>
          <Footer />
        </div>
        {/* ↑修正 */}
      </body>
    </html>
  );
}

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