// この階層を理解するための実験的コード
// app/test/layout.tsx
export default function TestLayout({ children }: { children: React.ReactNode }) {
  console.log('Layout rendered');  // ページ遷移時に再実行されない
  return <div className="test-layout">{children}</div>;
}
 
// app/test/template.tsx
export default function TestTemplate({ children }: { children: React.ReactNode }) {
  console.log('Template rendered');  // ページ遷移ごとに再実行される
  return <div className="test-template">{children}</div>;
}
 
// app/test/error.tsx
'use client';
export default function TestError({ error, reset }: { error: Error; reset: () => void }) {
  console.log('Error boundary caught:', error.message);
  return <button onClick={reset}>Retry</button>;
}
 
// app/test/loading.tsx
export default function TestLoading() {
  console.log('Loading rendered');
  return <div>Loading...</div>;
}
 
// app/test/page.tsx
export default async function TestPage() {
  console.log('Page rendered');
  return <div>Test Page Content</div>;
}

// app/page.tsx — トップページ（Server Component がデフォルト）
import { Suspense } from 'react';
 
// Server Component ではデータフェッチを直接 await できる
export default async function HomePage() {
  const featuredPosts = await getFeaturedPosts();
  const categories = await getCategories();
 
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8">Welcome to Our Blog</h1>
 
      {/* 重いデータフェッチは Suspense で分離 */}
      <Suspense fallback={<FeaturedPostsSkeleton />}>
        <FeaturedPosts posts={featuredPosts} />
      </Suspense>
 
      <Suspense fallback={<CategoriesSkeleton />}>
        <Categories categories={categories} />
      </Suspense>
    </div>
  );
}
 
// メタデータの静的定義
export const metadata = {
  title: 'Home | My Blog',
  description: 'Welcome to our blog featuring the latest articles.',
  openGraph: {
    title: 'Home | My Blog',
    description: 'Welcome to our blog featuring the latest articles.',
    type: 'website',
  },
};

// app/dashboard/page.tsx — クライアントコンポーネントが必要な場合
'use client';
 
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
 
export default function DashboardPage() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const router = useRouter();
 
  useEffect(() => {
    fetch('/api/dashboard')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setIsLoading(false);
      });
  }, []);
 
  if (isLoading) return <DashboardSkeleton />;
 
  return (
    <div>
      <h1>Dashboard</h1>
      <DashboardContent data={data} />
    </div>
  );
}
 
// 注意: 'use client' を page.tsx に付けると、
// そのページ全体が Client Component になり、
// Server Component のメリット（データフェッチ、バンドルサイズ削減）を失う。
// 可能な限り page.tsx は Server Component として保ち、
// インタラクティブな部分だけを Client Component として分離する。

// app/api/users/route.ts — RESTful API エンドポイント
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
 
// GET /api/users — ユーザー一覧の取得
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const page = parseInt(searchParams.get('page') ?? '1', 10);
  const limit = parseInt(searchParams.get('limit') ?? '20', 10);
  const search = searchParams.get('search') ?? '';
 
  try {
    const users = await db.user.findMany({
      where: search
        ? { name: { contains: search, mode: 'insensitive' } }
        : undefined,
      skip: (page - 1) * limit,
      take: limit,
      orderBy: { createdAt: 'desc' },
    });
 
    const total = await db.user.count({
      where: search
        ? { name: { contains: search, mode: 'insensitive' } }
        : undefined,
    });
 
    return NextResponse.json({
      users,
      pagination: {
        page,
        limit,
        total,
        totalPages: Math.ceil(total / limit),
      },
    });
  } catch (error) {
    console.error('Failed to fetch users:', error);
    return NextResponse.json(
      { error: 'Internal Server Error' },
      { status: 500 }
    );
  }
}
 
// POST /api/users — ユーザーの作成
const createUserSchema = z.object({
  name: z.string().min(1).max(100),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'editor']).default('user'),
});
 
export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const validated = createUserSchema.parse(body);
 
    const existingUser = await db.user.findUnique({
      where: { email: validated.email },
    });
 
    if (existingUser) {
      return NextResponse.json(
        { error: 'Email already exists' },
        { status: 409 }
      );
    }
 
    const user = await db.user.create({ data: validated });
 
    return NextResponse.json(user, { status: 201 });
  } catch (error) {
    if (error instanceof z.ZodError) {
      return NextResponse.json(
        { error: 'Validation failed', details: error.errors },
        { status: 400 }
      );
    }
    return NextResponse.json(
      { error: 'Internal Server Error' },
      { status: 500 }
    );
  }
}

// app/api/users/[id]/route.ts — 個別リソースの操作
import { NextRequest, NextResponse } from 'next/server';
 
// GET /api/users/:id
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const user = await db.user.findUnique({ where: { id } });
 
  if (!user) {
    return NextResponse.json(
      { error: 'User not found' },
      { status: 404 }
    );
  }
 
  return NextResponse.json(user);
}
 
// PUT /api/users/:id
export async function PUT(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const body = await request.json();
 
  try {
    const user = await db.user.update({
      where: { id },
      data: body,
    });
    return NextResponse.json(user);
  } catch (error) {
    return NextResponse.json(
      { error: 'User not found' },
      { status: 404 }
    );
  }
}
 
// DELETE /api/users/:id
export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
 
  try {
    await db.user.delete({ where: { id } });
    return new NextResponse(null, { status: 204 });
  } catch (error) {
    return NextResponse.json(
      { error: 'User not found' },
      { status: 404 }
    );
  }
}
 
// PATCH /api/users/:id
export async function PATCH(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const body = await request.json();
 
  try {
    const user = await db.user.update({
      where: { id },
      data: body,
    });
    return NextResponse.json(user);
  } catch (error) {
    return NextResponse.json(
      { error: 'User not found' },
      { status: 404 }
    );
  }
}

// app/api/webhooks/stripe/route.ts — Webhook エンドポイントの例
import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!;
 
export async function POST(request: NextRequest) {
  const body = await request.text(); // raw body が必要
  const sig = request.headers.get('stripe-signature')!;
 
  let event: Stripe.Event;
 
  try {
    event = stripe.webhooks.constructEvent(body, sig, webhookSecret);
  } catch (err) {
    console.error('Webhook signature verification failed:', err);
    return NextResponse.json(
      { error: 'Invalid signature' },
      { status: 400 }
    );
  }
 
  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object as Stripe.Checkout.Session;
      await handleCheckoutComplete(session);
      break;
    }
    case 'customer.subscription.deleted': {
      const subscription = event.data.object as Stripe.Subscription;
      await handleSubscriptionCancelled(subscription);
      break;
    }
    default:
      console.log(`Unhandled event type: ${event.type}`);
  }
 
  return NextResponse.json({ received: true });
}
 
// route segment config: Webhook は動的である必要がある
export const dynamic = 'force-dynamic';

// app/blog/page.tsx
// Route Segment Config の全オプション
 
// 動的レンダリングの制御
export const dynamic = 'auto';
// 'auto'          — デフォルト、フレームワークが判断
// 'force-dynamic' — 常に動的レンダリング（SSR）
// 'error'         — 静的レンダリングを強制（動的関数があるとビルドエラー）
// 'force-static'  — 動的関数の戻り値を空にして静的レンダリングを強制
 
// 動的パラメータの制御
export const dynamicParams = true;
// true  — generateStaticParams にないパラメータも動的に生成
// false — generateStaticParams にないパラメータは404
 
// 再検証の間隔（秒）
export const revalidate = 3600; // 1時間ごとに再検証
// false — 再検証しない（無期限キャッシュ）
// 0     — 常に動的レンダリング
 
// ランタイムの選択
export const runtime = 'nodejs';
// 'nodejs'  — Node.js ランタイム（デフォルト）
// 'edge'    — Edge Runtime（軽量、制限あり）
 
// 使用する Node.js API の明示
export const preferredRegion = 'auto';
// 'auto'    — フレームワークが判断
// 'global'  — グローバル
// 'home'    — ホームリージョン
// ['iad1', 'sfo1'] — 特定リージョン
 
// 最大実行時間（秒）
export const maxDuration = 30;
 
export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }, // fetch レベルでも再検証設定可能
  }).then(res => res.json());
 
  return <PostList posts={posts} />;
}

// app/layout.tsx — ルートレイアウト
import type { Metadata, Viewport } from 'next';
import { Inter, Noto_Sans_JP } from 'next/font/google';
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
import './globals.css';
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});
 
const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-noto-sans-jp',
});
 
export const metadata: Metadata = {
  title: {
    template: '%s | My App',       // 子ページのtitleが %s に入る
    default: 'My App',              // titleが設定されていない場合
  },
  description: 'A modern web application built with Next.js',
  metadataBase: new URL('https://example.com'),
  openGraph: {
    type: 'website',
    locale: 'ja_JP',
    url: 'https://example.com',
    siteName: 'My App',
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@example',
  },
  robots: {
    index: true,
    follow: true,
  },
};
 
export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#000000' },
  ],
  width: 'device-width',
  initialScale: 1,
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="ja"
      className={`${inter.variable} ${notoSansJP.variable}`}
      suppressHydrationWarning  // next-themes 等のダークモード対応時に必要
    >
      <body className="min-h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <AuthProvider>
            <QueryProvider>
              <Header />
              <main className="flex-1">{children}</main>
              <Footer />
              <Toaster />
            </QueryProvider>
          </AuthProvider>
        </ThemeProvider>
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

// app/dashboard/layout.tsx — ダッシュボード用レイアウト
import { Sidebar } from '@/components/dashboard/sidebar';
import { DashboardHeader } from '@/components/dashboard/header';
import { getSession } from '@/lib/auth';
import { redirect } from 'next/navigation';
 
export const metadata = {
  title: 'Dashboard',
};
 
export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Server Component なので直接認証チェックが可能
  const session = await getSession();
  if (!session) {
    redirect('/login');
  }
 
  return (
    <div className="flex h-screen">
      {/* サイドバー */}
      <Sidebar user={session.user} />
 
      {/* メインコンテンツエリア */}
      <div className="flex-1 flex flex-col overflow-hidden">
        <DashboardHeader user={session.user} />
        <main className="flex-1 overflow-y-auto p-6 bg-gray-50 dark:bg-gray-900">
          {children}
        </main>
      </div>
    </div>
  );
}

// app/dashboard/settings/layout.tsx — 設定画面のサブレイアウト
import { SettingsNav } from '@/components/settings/nav';
 
const settingsNavItems = [
  { href: '/dashboard/settings', label: 'General', icon: 'settings' },
  { href: '/dashboard/settings/profile', label: 'Profile', icon: 'user' },
  { href: '/dashboard/settings/billing', label: 'Billing', icon: 'credit-card' },
  { href: '/dashboard/settings/notifications', label: 'Notifications', icon: 'bell' },
  { href: '/dashboard/settings/security', label: 'Security', icon: 'shield' },
  { href: '/dashboard/settings/api-keys', label: 'API Keys', icon: 'key' },
];
 
export default function SettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="max-w-6xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Settings</h1>
      <div className="flex gap-8">
        <aside className="w-64 shrink-0">
          <SettingsNav items={settingsNavItems} />
        </aside>
        <div className="flex-1 min-w-0">
          {children}
        </div>
      </div>
    </div>
  );
}
 
// 結果として以下のレイアウト階層が形成される:
// RootLayout → DashboardLayout → SettingsLayout → Page
//
// /dashboard/settings/profile にアクセスすると:
//   <RootLayout>
//     <DashboardLayout>
//       <SettingsLayout>
//         <ProfilePage />
//       </SettingsLayout>
//     </DashboardLayout>
//   </RootLayout>

// app/(marketing)/layout.tsx — マーケティング用レイアウト
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="max-w-7xl mx-auto">
      <MarketingNav />
      {children}
      <MarketingFooter />
    </div>
  );
}
 
// app/(app)/layout.tsx — アプリ用レイアウト（認証付き）
export default async function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getSession();
  if (!session) redirect('/login');
 
  return (
    <div className="flex min-h-screen">
      <AppSidebar />
      <div className="flex-1">
        <AppHeader user={session.user} />
        <main className="p-6">{children}</main>
      </div>
    </div>
  );
}
 
// app/(auth)/layout.tsx — 認証ページ用レイアウト
export default async function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // すでにログイン済みならダッシュボードへリダイレクト
  const session = await getSession();
  if (session) redirect('/dashboard');
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full">
        <Logo className="mx-auto mb-8" />
        {children}
      </div>
    </div>
  );
}

// layout.tsx の特性:
// - ページ遷移時に再レンダリングされない（状態が保持される）
// - useEffect が再実行されない
// - DOM が再利用される
 
// template.tsx の特性:
// - ページ遷移ごとに新しいインスタンスが作成される
// - useEffect が毎回実行される
// - DOM が再作成される
 
// template.tsx が適している場面:
// 1. ページ遷移アニメーション
// 2. ページビューのログ記録
// 3. ページごとのフィードバックフォーム
 
// app/dashboard/template.tsx — ページ遷移ログの例
'use client';
 
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { analytics } from '@/lib/analytics';
 
export default function DashboardTemplate({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
 
  useEffect(() => {
    // template.tsx なので遷移ごとに実行される
    analytics.pageView(pathname);
  }, [pathname]);
 
  return (
    <div className="animate-fadeIn">
      {children}
    </div>
  );
}
 
// もし layout.tsx に同じコードを書いた場合、
// 初回レンダリング時にしか useEffect が実行されず、
// 子ページ間の遷移ではログが記録されない。

// app/users/[id]/page.tsx — 基本的な動的ルート
import { notFound } from 'next/navigation';
import { Suspense } from 'react';
import { UserProfile } from '@/components/user/profile';
import { UserPosts } from '@/components/user/posts';
import { UserPostsSkeleton } from '@/components/user/posts-skeleton';
 
interface UserPageProps {
  params: Promise<{ id: string }>;
}
 
export default async function UserPage({ params }: UserPageProps) {
  const { id } = await params;
 
  // パラメータのバリデーション
  if (!/^[a-zA-Z0-9_-]+$/.test(id)) {
    notFound();
  }
 
  const user = await getUser(id);
  if (!user) {
    notFound();
  }
 
  return (
    <div className="max-w-4xl mx-auto py-8">
      {/* ユーザー基本情報（すぐに表示） */}
      <UserProfile user={user} />
 
      {/* ユーザーの投稿一覧（遅延ロード） */}
      <section className="mt-8">
        <h2 className="text-xl font-bold mb-4">Posts</h2>
        <Suspense fallback={<UserPostsSkeleton />}>
          <UserPosts userId={user.id} />
        </Suspense>
      </section>
    </div>
  );
}
 
// 静的パラメータの生成（ビルド時に生成するページを指定）
export async function generateStaticParams() {
  const users = await db.user.findMany({
    select: { id: true },
    take: 100, // 主要なユーザーページのみ事前生成
  });
 
  return users.map((user) => ({
    id: user.id,
  }));
}
 
// メタデータの動的生成
export async function generateMetadata({ params }: UserPageProps) {
  const { id } = await params;
  const user = await getUser(id);
 
  if (!user) {
    return {
      title: 'User Not Found',
    };
  }
 
  return {
    title: user.name,
    description: user.bio ?? `${user.name}'s profile`,
    openGraph: {
      title: user.name,
      description: user.bio ?? `${user.name}'s profile`,
      images: user.avatar ? [{ url: user.avatar }] : [],
    },
  };
}

// app/[locale]/blog/[category]/[slug]/page.tsx
// URL: /ja/blog/tech/nextjs-routing
interface BlogPostPageProps {
  params: Promise<{
    locale: string;
    category: string;
    slug: string;
  }>;
}
 
export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { locale, category, slug } = await params;
 
  // ロケールバリデーション
  const supportedLocales = ['ja', 'en', 'zh', 'ko'];
  if (!supportedLocales.includes(locale)) {
    notFound();
  }
 
  const post = await getPost({ locale, category, slug });
  if (!post) {
    notFound();
  }
 
  return (
    <article className="prose prose-lg mx-auto">
      <header>
        <div className="flex items-center gap-2 text-sm text-gray-500">
          <span>{category}</span>
          <span>/</span>
          <time dateTime={post.publishedAt}>
            {new Date(post.publishedAt).toLocaleDateString(locale)}
          </time>
        </div>
        <h1>{post.title}</h1>
      </header>
      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
    </article>
  );
}
 
export async function generateStaticParams() {
  const posts = await getAllPosts();
 
  return posts.flatMap((post) =>
    post.locales.map((locale) => ({
      locale,
      category: post.category,
      slug: post.slug,
    }))
  );
}

import { notFound } from 'next/navigation';
import { getDocBySlug, getAllDocs } from '@/lib/docs';
import { TableOfContents } from '@/components/docs/toc';
import { DocBreadcrumb } from '@/components/docs/breadcrumb';
import { DocPagination } from '@/components/docs/pagination';
 
interface DocsPageProps {
  params: Promise<{ slug?: string[] }>;
}
 
export default async function DocsPage({ params }: DocsPageProps) {
  const { slug } = await params;
 
  // /docs にアクセスした場合は introduction を表示
  const docPath = slug?.join('/') ?? 'introduction';
  const doc = await getDocBySlug(docPath);
 
  if (!doc) {
    notFound();
  }
 
  return (
    <div className="flex gap-8">
      {/* メインコンテンツ */}
      <article className="flex-1 min-w-0 prose prose-lg dark:prose-invert">
        <DocBreadcrumb segments={slug ?? []} />
        <h1>{doc.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: doc.contentHtml }} />
        <DocPagination current={docPath} />
      </article>
 
      {/* 目次サイドバー */}
      <aside className="hidden xl:block w-64 shrink-0">
        <TableOfContents headings={doc.headings} />
      </aside>
    </div>
  );
}
 
export async function generateStaticParams() {
  const docs = await getAllDocs();
 
  return [
    { slug: undefined },  // /docs (introduction)
    ...docs.map((doc) => ({
      slug: doc.path.split('/'),
    })),
  ];
}
 
export async function generateMetadata({ params }: DocsPageProps) {
  const { slug } = await params;
  const docPath = slug?.join('/') ?? 'introduction';
  const doc = await getDocBySlug(docPath);
 
  return {
    title: doc?.title ?? 'Documentation',
    description: doc?.description ?? 'Project documentation',
  };
}

// app/products/page.tsx — フィルタリング・ソート・ページネーション
interface ProductsPageProps {
  searchParams: Promise<{
    category?: string;
    sort?: string;
    order?: 'asc' | 'desc';
    page?: string;
    q?: string;
  }>;
}
 
export default async function ProductsPage({
  searchParams,
}: ProductsPageProps) {
  const {
    category,
    sort = 'createdAt',
    order = 'desc',
    page = '1',
    q,
  } = await searchParams;
 
  const currentPage = Math.max(1, parseInt(page, 10) || 1);
  const limit = 20;
 
  const { products, total } = await getProducts({
    category,
    sort,
    order,
    page: currentPage,
    limit,
    search: q,
  });
 
  return (
    <div>
      <h1>Products</h1>
 
      {/* フィルタバー */}
      <ProductFilters
        currentCategory={category}
        currentSort={sort}
        currentOrder={order}
        searchQuery={q}
      />
 
      {/* 商品一覧 */}
      <ProductGrid products={products} />
 
      {/* ページネーション */}
      <Pagination
        currentPage={currentPage}
        totalPages={Math.ceil(total / limit)}
        baseUrl="/products"
        searchParams={{ category, sort, order, q }}
      />
    </div>
  );
}
 
// メタデータにも searchParams を使用可能
export async function generateMetadata({
  searchParams,
}: ProductsPageProps) {
  const { category, q } = await searchParams;
 
  let title = 'Products';
  if (category) title = `${category} Products`;
  if (q) title = `Search: ${q}`;
 
  return { title };
}

// app/users/loading.tsx — スケルトンUIの実装
export default function UsersLoading() {
  return (
    <div className="space-y-4">
      {/* ヘッダースケルトン */}
      <div className="flex items-center justify-between">
        <div className="h-8 w-48 bg-gray-200 animate-pulse rounded" />
        <div className="h-10 w-32 bg-gray-200 animate-pulse rounded" />
      </div>
 
      {/* 検索バースケルトン */}
      <div className="h-10 w-full bg-gray-200 animate-pulse rounded" />
 
      {/* テーブルヘッダー */}
      <div className="h-12 w-full bg-gray-100 animate-pulse rounded-t" />
 
      {/* テーブル行スケルトン */}
      {Array.from({ length: 10 }).map((_, i) => (
        <div
          key={i}
          className="flex items-center gap-4 p-4 border-b"
        >
          {/* アバター */}
          <div className="h-10 w-10 bg-gray-200 animate-pulse rounded-full" />
          {/* 名前 */}
          <div className="h-4 w-32 bg-gray-200 animate-pulse rounded" />
          {/* メール */}
          <div className="h-4 w-48 bg-gray-200 animate-pulse rounded" />
          {/* ロール */}
          <div className="h-4 w-20 bg-gray-200 animate-pulse rounded" />
          {/* 日付 */}
          <div className="h-4 w-24 bg-gray-200 animate-pulse rounded ml-auto" />
        </div>
      ))}
 
      {/* ページネーションスケルトン */}
      <div className="flex justify-center gap-2 mt-4">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="h-8 w-8 bg-gray-200 animate-pulse rounded" />
        ))}
      </div>
    </div>
  );
}

// 再利用可能なスケルトンコンポーネント
// components/ui/skeleton.tsx
import { cn } from '@/lib/utils';
 
interface SkeletonProps {
  className?: string;
  variant?: 'text' | 'circular' | 'rectangular';
  width?: string | number;
  height?: string | number;
  animation?: 'pulse' | 'wave' | 'none';
}
 
export function Skeleton({
  className,
  variant = 'text',
  width,
  height,
  animation = 'pulse',
}: SkeletonProps) {
  return (
    <div
      className={cn(
        'bg-gray-200 dark:bg-gray-700',
        animation === 'pulse' && 'animate-pulse',
        animation === 'wave' && 'animate-shimmer',
        variant === 'circular' && 'rounded-full',
        variant === 'rectangular' && 'rounded',
        variant === 'text' && 'rounded h-4',
        className
      )}
      style={{ width, height }}
    />
  );
}
 
// app/dashboard/loading.tsx — Skeleton コンポーネントを使った例
import { Skeleton } from '@/components/ui/skeleton';
 
export default function DashboardLoading() {
  return (
    <div className="space-y-6">
      {/* KPIカード */}
      <div className="grid grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="p-6 border rounded-lg">
            <Skeleton className="h-4 w-24 mb-2" />
            <Skeleton className="h-8 w-16" />
            <Skeleton className="h-3 w-32 mt-2" />
          </div>
        ))}
      </div>
 
      {/* チャートエリア */}
      <div className="grid grid-cols-2 gap-4">
        <div className="p-6 border rounded-lg">
          <Skeleton className="h-6 w-32 mb-4" />
          <Skeleton variant="rectangular" className="h-64 w-full" />
        </div>
        <div className="p-6 border rounded-lg">
          <Skeleton className="h-6 w-32 mb-4" />
          <Skeleton variant="rectangular" className="h-64 w-full" />
        </div>
      </div>
    </div>
  );
}

// app/dashboard/page.tsx — Suspense で部分的なストリーミング
import { Suspense } from 'react';
import { KPICards } from '@/components/dashboard/kpi-cards';
import { RecentOrders } from '@/components/dashboard/recent-orders';
import { SalesChart } from '@/components/dashboard/sales-chart';
import { TopProducts } from '@/components/dashboard/top-products';
import { Skeleton } from '@/components/ui/skeleton';
 
export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* KPI は最優先で表示 */}
      <Suspense fallback={<KPICardsSkeleton />}>
        <KPICards />
      </Suspense>
 
      <div className="grid grid-cols-2 gap-6">
        {/* チャートは独立してロード */}
        <Suspense fallback={<ChartSkeleton />}>
          <SalesChart />
        </Suspense>
 
        {/* 人気商品も独立してロード */}
        <Suspense fallback={<ListSkeleton />}>
          <TopProducts />
        </Suspense>
      </div>
 
      {/* 最近の注文は最後でよい */}
      <Suspense fallback={<TableSkeleton rows={5} />}>
        <RecentOrders />
      </Suspense>
    </div>
  );
}
 
// 各セクションが独立して fetch → レンダリングされるため、
// 最も速いものから順に表示される（ストリーミング）

// app/dashboard/error.tsx — 詳細なエラーハンドリング
'use client';
 
import { useEffect } from 'react';
import { AlertTriangle, RefreshCw, Home, Bug } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
 
export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // エラーをモニタリングサービスに送信
    if (process.env.NODE_ENV === 'production') {
      // Sentry, Datadog, etc.
      reportError(error);
    }
    console.error('Dashboard error:', error);
  }, [error]);
 
  // エラーの種類に応じた表示分岐
  const isNetworkError = error.message.includes('fetch') ||
    error.message.includes('network');
  const isAuthError = error.message.includes('unauthorized') ||
    error.message.includes('401');
 
  if (isAuthError) {
    return (
      <div className="flex flex-col items-center justify-center p-16">
        <AlertTriangle className="h-12 w-12 text-yellow-500 mb-4" />
        <h2 className="text-xl font-bold mb-2">セッションが切れました</h2>
        <p className="text-gray-500 mb-6">もう一度ログインしてください。</p>
        <Link href="/login">
          <Button>ログインページへ</Button>
        </Link>
      </div>
    );
  }
 
  return (
    <div className="flex flex-col items-center justify-center p-16">
      <AlertTriangle className="h-12 w-12 text-red-500 mb-4" />
      <h2 className="text-xl font-bold mb-2">
        {isNetworkError
          ? 'ネットワークエラーが発生しました'
          : '予期しないエラーが発生しました'}
      </h2>
      <p className="text-gray-500 mb-2">
        {isNetworkError
          ? 'インターネット接続を確認してください。'
          : 'しばらく時間をおいてもう一度お試しください。'}
      </p>
 
      {/* 開発環境ではエラー詳細を表示 */}
      {process.env.NODE_ENV === 'development' && (
        <details className="mt-4 p-4 bg-red-50 border border-red-200 rounded max-w-lg w-full">
          <summary className="cursor-pointer text-red-700 font-mono text-sm flex items-center gap-2">
            <Bug className="h-4 w-4" />
            エラー詳細
          </summary>
          <pre className="mt-2 text-xs text-red-600 overflow-x-auto whitespace-pre-wrap">
            {error.message}
            {error.stack && `\n\n${error.stack}`}
          </pre>
        </details>
      )}
 
      {/* Error Digest（本番環境でのエラー追跡用） */}
      {error.digest && (
        <p className="text-xs text-gray-400 mt-2">
          Error ID: {error.digest}
        </p>
      )}
 
      <div className="flex gap-4 mt-6">
        <Button onClick={reset} variant="default">
          <RefreshCw className="h-4 w-4 mr-2" />
          再試行
        </Button>
        <Link href="/">
          <Button variant="outline">
            <Home className="h-4 w-4 mr-2" />
            ホームへ戻る
          </Button>
        </Link>
      </div>
    </div>
  );
}

// app/global-error.tsx
'use client';
 
// global-error.tsx は独自の <html> と <body> を含む必要がある
// （RootLayout が壊れている可能性があるため）
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="ja">
      <body className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center p-8">
          <h1 className="text-4xl font-bold text-red-600 mb-4">
            重大なエラーが発生しました
          </h1>
          <p className="text-gray-600 mb-6">
            アプリケーションの起動中にエラーが発生しました。
          </p>
          {error.digest && (
            <p className="text-sm text-gray-400 mb-4">
              Error ID: {error.digest}
            </p>
          )}
          <button
            onClick={reset}
            className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
          >
            アプリケーションを再起動
          </button>
        </div>
      </body>
    </html>
  );
}

// app/not-found.tsx — グローバル 404 ページ
import Link from 'next/link';
import { Search } from 'lucide-react';
 
export default function NotFound() {
  return (
    <div className="min-h-[60vh] flex flex-col items-center justify-center">
      <h1 className="text-8xl font-bold text-gray-200 dark:text-gray-800">
        404
      </h1>
      <h2 className="text-2xl font-bold mt-4 mb-2">
        ページが見つかりません
      </h2>
      <p className="text-gray-500 mb-8 text-center max-w-md">
        お探しのページは移動または削除された可能性があります。
        URLが正しいかご確認ください。
      </p>
 
      {/* 検索ボックス */}
      <div className="relative w-full max-w-md mb-8">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
        <input
          type="text"
          placeholder="サイト内を検索..."
          className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
 
      <div className="flex gap-4">
        <Link
          href="/"
          className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
        >
          ホームへ戻る
        </Link>
        <Link
          href="/contact"
          className="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
        >
          お問い合わせ
        </Link>
      </div>
    </div>
  );
}
 
// app/users/[id]/not-found.tsx — ルートセグメント固有の 404
export default function UserNotFound() {
  return (
    <div className="text-center p-16">
      <h2 className="text-2xl font-bold mb-4">ユーザーが見つかりません</h2>
      <p className="text-gray-500 mb-6">
        指定されたユーザーは存在しないか、削除された可能性があります。
      </p>
      <Link
        href="/users"
        className="text-blue-500 hover:underline"
      >
        ユーザー一覧に戻る
      </Link>
    </div>
  );
}

// app/dashboard/layout.tsx — パラレルルートのレイアウト
export default function DashboardLayout({
  children,
  analytics,
  activity,
  notifications,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  activity: React.ReactNode;
  notifications: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-12 gap-6">
      {/* メインコンテンツ（8列） */}
      <div className="col-span-8 space-y-6">
        {children}
 
        {/* 分析チャート（独立ローディング） */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-bold mb-4">Analytics</h2>
          {analytics}
        </section>
      </div>
 
      {/* サイドバー（4列） */}
      <div className="col-span-4 space-y-6">
        {/* 通知パネル */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-bold mb-4">Notifications</h2>
          {notifications}
        </section>
 
        {/* アクティビティフィード */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-bold mb-4">Recent Activity</h2>
          {activity}
        </section>
      </div>
    </div>
  );
}

// app/dashboard/@analytics/page.tsx — 独立したデータフェッチ
export default async function AnalyticsSlot() {
  // このデータフェッチは他のスロットとは独立して実行される
  const analyticsData = await getAnalytics();
 
  return (
    <div>
      <BarChart data={analyticsData.dailyVisits} />
      <div className="grid grid-cols-3 gap-4 mt-4">
        <StatCard label="Page Views" value={analyticsData.pageViews} />
        <StatCard label="Unique Visitors" value={analyticsData.uniqueVisitors} />
        <StatCard label="Bounce Rate" value={`${analyticsData.bounceRate}%`} />
      </div>
    </div>
  );
}
 
// app/dashboard/@analytics/loading.tsx — スロット専用のローディング
export default function AnalyticsLoading() {
  return (
    <div className="space-y-4">
      <div className="h-48 bg-gray-100 animate-pulse rounded" />
      <div className="grid grid-cols-3 gap-4">
        {[1, 2, 3].map(i => (
          <div key={i} className="h-20 bg-gray-100 animate-pulse rounded" />
        ))}
      </div>
    </div>
  );
}
 
// app/dashboard/@analytics/error.tsx — スロット専用のエラー
'use client';
export default function AnalyticsError({ reset }: { error: Error; reset: () => void }) {
  return (
    <div className="text-center p-4 bg-red-50 rounded">
      <p className="text-red-600 mb-2">分析データの読み込みに失敗しました</p>
      <button onClick={reset} className="text-blue-500 underline">
        再試行
      </button>
    </div>
  );
}

// 問題のあるケース:
// app/dashboard/@notifications/page.tsx は /dashboard で表示される
// しかし /dashboard/settings に遷移すると
// @notifications スロットに対応する settings/page.tsx がない
// → default.tsx がないと404になる
 
// app/dashboard/@notifications/default.tsx
export default function NotificationsDefault() {
  // page.tsx と同じ内容を返すか、簡略版を返す
  return <NotificationsList />;
}
 
// ソフトナビゲーション vs ハードナビゲーション:
// - ソフトナビゲーション（Link クリック）: 前の状態が保持される
// - ハードナビゲーション（ページリロード、URL直接入力）: default.tsx が使われる

// app/feed/page.tsx — 写真フィード
import Link from 'next/link';
import Image from 'next/image';
 
export default async function FeedPage() {
  const photos = await getPhotos();
 
  return (
    <div className="grid grid-cols-3 gap-1">
      {photos.map((photo) => (
        <Link key={photo.id} href={`/photo/${photo.id}`}>
          <Image
            src={photo.thumbnailUrl}
            alt={photo.title}
            width={300}
            height={300}
            className="w-full aspect-square object-cover hover:opacity-80 transition"
          />
        </Link>
      ))}
    </div>
  );
}
 
// app/feed/layout.tsx — モーダルスロット付きレイアウト
export default function FeedLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}
 
// app/feed/@modal/default.tsx — モーダルなし
export default function Default() {
  return null;
}
 
// app/feed/@modal/(.)photo/[id]/page.tsx — モーダル表示
import { Modal } from '@/components/modal';
 
export default async function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const photo = await getPhoto(id);
 
  return (
    <Modal>
      <Image
        src={photo.url}
        alt={photo.title}
        width={800}
        height={600}
        className="w-full"
      />
      <div className="p-4">
        <h2 className="text-xl font-bold">{photo.title}</h2>
        <p className="text-gray-500">{photo.description}</p>
      </div>
    </Modal>
  );
}
 
// app/photo/[id]/page.tsx — 全画面表示（直接アクセス）
export default async function PhotoPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const photo = await getPhoto(id);
 
  return (
    <div className="max-w-4xl mx-auto py-8">
      <Image
        src={photo.url}
        alt={photo.title}
        width={1200}
        height={800}
        className="w-full rounded-lg"
      />
      <h1 className="text-3xl font-bold mt-4">{photo.title}</h1>
      <p className="text-gray-500 mt-2">{photo.description}</p>
      <PhotoComments photoId={photo.id} />
    </div>
  );
}

// components/modal.tsx — 汎用モーダルコンポーネント
'use client';
 
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useRef } from 'react';
import { X } from 'lucide-react';
 
export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const overlayRef = useRef<HTMLDivElement>(null);
 
  const onDismiss = useCallback(() => {
    router.back();
  }, [router]);
 
  // ESC キーでモーダルを閉じる
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onDismiss();
    };
    document.addEventListener('keydown', handleEsc);
    return () => document.removeEventListener('keydown', handleEsc);
  }, [onDismiss]);
 
  // オーバーレイクリックで閉じる
  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === overlayRef.current) onDismiss();
  };
 
  return (
    <div
      ref={overlayRef}
      className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4"
      onClick={handleOverlayClick}
    >
      <div className="bg-white dark:bg-gray-900 rounded-lg max-w-3xl w-full max-h-[90vh] overflow-auto relative">
        <button
          onClick={onDismiss}
          className="absolute top-4 right-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition z-10"
        >
          <X className="h-5 w-5" />
        </button>
        {children}
      </div>
    </div>
  );
}

// middleware.ts（プロジェクトルートに配置）
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
 
  // 1. 認証チェック
  const token = request.cookies.get('session-token')?.value;
  const protectedPaths = ['/dashboard', '/settings', '/admin'];
 
  if (protectedPaths.some(path => pathname.startsWith(path))) {
    if (!token) {
      const loginUrl = new URL('/login', request.url);
      loginUrl.searchParams.set('callbackUrl', pathname);
      return NextResponse.redirect(loginUrl);
    }
  }
 
  // 2. 国際化（i18n）リダイレクト
  const locale = request.headers.get('accept-language')?.split(',')[0]?.split('-')[0] ?? 'ja';
  const supportedLocales = ['ja', 'en'];
  const defaultLocale = 'ja';
 
  if (!pathname.startsWith('/_next') && !pathname.startsWith('/api')) {
    const pathnameLocale = supportedLocales.find(
      loc => pathname.startsWith(`/${loc}/`) || pathname === `/${loc}`
    );
 
    if (!pathnameLocale) {
      const detectedLocale = supportedLocales.includes(locale) ? locale : defaultLocale;
      return NextResponse.redirect(
        new URL(`/${detectedLocale}${pathname}`, request.url)
      );
    }
  }
 
  // 3. レスポンスヘッダーの追加
  const response = NextResponse.next();
  response.headers.set('x-request-id', crypto.randomUUID());
  response.headers.set('x-pathname', pathname);
 
  return response;
}
 
// Middleware を適用するパスの設定
export const config = {
  matcher: [
    // 静的ファイルと内部パスを除外
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
};

// middleware.ts — 高度な Middleware パターン
 
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { jwtVerify } from 'jose';
 
// Rate Limiting（簡易版）
const rateLimit = new Map<string, { count: number; resetTime: number }>();
 
function checkRateLimit(ip: string, limit: number, windowMs: number): boolean {
  const now = Date.now();
  const record = rateLimit.get(ip);
 
  if (!record || now > record.resetTime) {
    rateLimit.set(ip, { count: 1, resetTime: now + windowMs });
    return true;
  }
 
  if (record.count >= limit) {
    return false;
  }
 
  record.count++;
  return true;
}
 
export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
 
  // ---- API Rate Limiting ----
  if (pathname.startsWith('/api/')) {
    const ip = request.headers.get('x-forwarded-for') ?? 'unknown';
    const isAllowed = checkRateLimit(ip, 100, 60 * 1000); // 100 req/min
 
    if (!isAllowed) {
      return NextResponse.json(
        { error: 'Too many requests' },
        { status: 429, headers: { 'Retry-After': '60' } }
      );
    }
  }
 
  // ---- JWT 認証 ----
  if (pathname.startsWith('/dashboard') || pathname.startsWith('/api/protected')) {
    const token = request.cookies.get('auth-token')?.value;
 
    if (!token) {
      if (pathname.startsWith('/api/')) {
        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
      }
      return NextResponse.redirect(new URL('/login', request.url));
    }
 
    try {
      const secret = new TextEncoder().encode(process.env.JWT_SECRET!);
      const { payload } = await jwtVerify(token, secret);
 
      // ---- RBAC（ロールベースアクセス制御） ----
      if (pathname.startsWith('/admin') && payload.role !== 'admin') {
        return NextResponse.redirect(new URL('/dashboard', request.url));
      }
 
      // リクエストヘッダーにユーザー情報を追加
      const response = NextResponse.next();
      response.headers.set('x-user-id', payload.sub as string);
      response.headers.set('x-user-role', payload.role as string);
      return response;
    } catch (error) {
      // トークン無効 → ログインページへ
      const response = NextResponse.redirect(new URL('/login', request.url));
      response.cookies.delete('auth-token');
      return response;
    }
  }
 
  // ---- A/Bテスト ----
  if (pathname === '/pricing') {
    const bucket = request.cookies.get('ab-test-pricing')?.value;
    if (!bucket) {
      const newBucket = Math.random() > 0.5 ? 'A' : 'B';
      const response = NextResponse.rewrite(
        new URL(`/pricing/${newBucket.toLowerCase()}`, request.url)
      );
      response.cookies.set('ab-test-pricing', newBucket, {
        maxAge: 60 * 60 * 24 * 30, // 30日
      });
      return response;
    }
    return NextResponse.rewrite(
      new URL(`/pricing/${bucket.toLowerCase()}`, request.url)
    );
  }
 
  // ---- リダイレクト（旧URL対応） ----
  const redirects: Record<string, string> = {
    '/blog': '/articles',
    '/docs/getting-started': '/docs/introduction',
    '/help': '/support',
  };
 
  if (redirects[pathname]) {
    return NextResponse.redirect(
      new URL(redirects[pathname], request.url),
      { status: 301 }
    );
  }
 
  return NextResponse.next();
}
 
export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
};