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

背景ブランディング画像