RootLayout Components Demo
RootLayout.tsx のデモ用ページ
RootLayout Components Demo
RootLayout.tsx のすべての import を使用した包括的なデモンストレーション
Import Statements
RootLayout で使用される主要な import 文の例
import React from 'react';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { ThemeProvider, BrandBar } 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';Theme Provider
ライト/ダーク切替デモ
テーマ切り替え:
BLOB_IMAGES
Vercel Blob の画像定数
HOME_IMAGE: https://ytzmpefdjnd1ueff.public.blob.vercel-storage.com/homeimage.webp
Layout Components
AppHeader
ナビゲーションとユーザーメニュー
BrandBar
背景ブランディング画像