RootLayout Components Demo

RootLayout.tsx のすべての import を使用した包括的なデモンストレーション

RootLayout Import Statements

RootLayout.tsx で使用されるすべての import 文

import React from 'react';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { ThemeProvider, LabelImage } from '@/presentation/components/common';
import { AuthProvider } from '@/presentation/components/features/auth/AuthProvider';
import { AppHeader } from './Header';
import { Footer } from './Footer';
import { AuthModal } from './AuthModal';
import { BLOB_IMAGES } from '@/constants/blobUrls';
import '@/presentation/styles/globals.css';

Inter Font Demo

Google Fonts の Inter フォントを使用

フォント設定

フォントファミリー: Inter

サブセット: latin

クラス名: inter_fdb46f8a-module__wO1BIq__className

このテキストは Inter フォントで表示されています。
太字や斜体もきれいに表示されます。

ThemeProvider Demo

ライト/ダークテーマの切り替え

テーマ切り替え:

AuthProvider Demo

Firebase 認証状態の管理（デモでは使用されません）

認証状態

ユーザー: 未ログイン（デモ）

ロール: ゲスト（デモ）

管理者権限: なし（デモ）

実際の認証機能はRootLayoutで使用されます。

Layout Components

RootLayout に含まれるレイアウトコンポーネント

AppHeader

ページ上部に表示されているナビゲーションとユーザーメニュー

LabelImage

背景に表示されているブランディング画像

AuthModal

認証ダイアログ（RootLayoutで使用されます）

Footer

ページ下部に表示されているフッター

BLOB_IMAGES Demo

Vercel Blob Storage に保存された画像定数

利用可能な画像

HOME_IMAGE: https://ytzmpefdjnd1ueff.public.blob.vercel-storage.com/homeimage.webp

他の画像: 定数オブジェクトに定義

Metadata で使用される画像

Open Graph と Twitter Card で使用されるヒーロー画像

Metadata Configuration

Next.js Metadata API を使用した SEO とソーシャルメディア設定

Metadata オブジェクト

export const metadata: Metadata = {
  title: {
    default: 'My Homepage',
    template: '%s | My Homepage',
  },
  description: 'Personal homepage with Next.js App Router',
  keywords: ['Next.js', 'React', 'TypeScript', 'Firebase'],
  authors: [{ name: 'Your Name' }],
  creator: 'Your Name',
  metadataBase: new URL('https://your-domain.com'),
  // ... Open Graph, Twitter Card, robots, verification
};

Open Graph

• Title: My Homepage
• Type: website
• Locale: ja_JP
• Images: 1200x630

Twitter Card

• Card: summary_large_image
• Title: My Homepage
• Images: Optimized for Twitter

RootLayout Structure

RootLayout の完全な構造と使用されるすべての要素

<html lang="ja" suppressHydrationWarning>
  <body className={inter.className}>
    <ThemeProvider>
      <AuthProvider>
        <div className="app-bg">
          <AppHeader />
          <LabelImage />
          <main className="main-content">
            {/* Page Content */}
            {children}
          </main>
          <Footer />
          <AuthModal />
        </div>
      </AuthProvider>
    </ThemeProvider>
  </body>
</html>

wait a moment please