동적 메타데이터 생성

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'; // Metadata, ResolvingMetadata 타입 임포트

// 가상의 데이터베이스 또는 API 호출 함수
async function getPost(slug: string) {
  // 실제로는 여기서 DB 또는 API를 호출하여 게시물 데이터를 가져옵니다.
  // 예시를 위해 더미 데이터를 반환합니다.
  const posts = [
    { slug: 'nextjs-seo-guide', title: 'Next.js SEO 가이드', content: 'Next.js에서 SEO를 위한 메타데이터 설정 방법...', description: 'Next.js에서 웹사이트 검색 엔진 최적화를 위한 필수 가이드입니다.', imageUrl: 'https://example.com/images/seo-guide.jpg' },
    { slug: 'dynamic-metadata-tutorial', title: '동적 메타데이터 튜토리얼', content: 'Next.js App Router에서 동적 메타데이터를 생성하는 방법...', description: 'Next.js generateMetadata 함수를 활용한 동적 SEO 설정 방법을 배웁니다.', imageUrl: 'https://example.com/images/dynamic-meta.jpg' },
  ];
  return new Promise<typeof posts[0] | undefined>(resolve => {
    setTimeout(() => {
      resolve(posts.find(post => post.slug === slug));
    }, 500); // 네트워크 지연 시뮬레이션
  });
}

// 1. generateMetadata 함수 정의
// params: 동적 라우트 파라미터 (예: { slug: 'nextjs-seo-guide' })
// parent: 상위 레이아웃에서 전달된 메타데이터 (Promise)
type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata // 상위 메타데이터 타입
): Promise<Metadata> {
  // 2. 동적 라우트 파라미터로부터 데이터 가져오기
  const post = await getPost(params.slug);

  // 게시물이 없는 경우 기본 메타데이터 또는 404 처리
  if (!post) {
    return {
      title: '페이지를 찾을 수 없습니다.',
      description: '요청하신 페이지를 찾을 수 없습니다.',
    };
  }

  // 3. 상위 메타데이터 가져오기 (선택 사항)
  const previousImages = (await parent).openGraph?.images || [];

  // 4. 가져온 데이터를 기반으로 Metadata 객체 반환
  return {
    title: post.title, // 게시물 제목으로 페이지 제목 설정
    description: post.description, // 게시물 설명으로 페이지 설명 설정
    keywords: [`${post.title}`, '블로그', '튜토리얼', 'Next.js'], // 게시물 관련 키워드
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://yourwebsite.com/blog/${post.slug}`, // 게시물 고유 URL
      images: [
        {
          url: post.imageUrl, // 게시물 대표 이미지
          width: 800,
          height: 600,
          alt: post.title,
        },
        ...previousImages, // 상위 레이아웃의 OG 이미지를 함께 포함
      ],
      type: 'article', // 블로그 게시물은 article 타입으로 설정
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [post.imageUrl],
    },
  };
}

// 5. 실제 페이지 컴포넌트 (데이터 페칭을 재사용할 수 있음)
export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);

  if (!post) {
    // metadata 함수에서 404를 처리했으므로, 여기서는 notFound()를 호출하여 Next.js의 404 페이지를 렌더링합니다.
    // 또는 여기에 커스텀 404 UI를 렌더링할 수 있습니다.
    return (
      <div style={{ padding: '20px', textAlign: 'center' }}>
        <h1>게시물을 찾을 수 없습니다.</h1>
        <p>요청하신 블로그 게시물이 존재하지 않습니다.</p>
      </div>
    );
  }

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #00BCD4', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
      <h1 style={{ color: '#00BCD4', textAlign: 'center', marginBottom: '20px' }}>{post.title}</h1>
      {post.imageUrl && (
        // Next/Image 대신 일반 img 태그 사용 (메타데이터 이미지는 Next.js Image 컴포넌트로 자동 처리되지 않음)
        // 실제 페이지 콘텐츠에서는 next/image를 사용하는 것이 좋습니다.
        <img src={post.imageUrl} alt={post.title} style={{ maxWidth: '100%', height: 'auto', display: 'block', margin: '0 auto 20px' }} />
      )}
      <p style={{ lineHeight: 1.6, fontSize: '1.1em', color: '#333' }}>{post.content}</p>
    </div>
  );
}

// app/search/page.tsx
import type { Metadata } from 'next';

// 가상의 검색 결과 API 호출
async function searchProducts(query: string | undefined) {
  if (!query) return [];
  // 실제로는 여기서 검색 API를 호출합니다.
  const allProducts = [
    { id: 1, name: 'Next.js 책', description: 'Next.js 학습을 위한 최고의 책', price: 30000 },
    { id: 2, name: 'React 티셔츠', description: 'React 개발자를 위한 티셔츠', price: 20000 },
    { id: 3, name: '웹 개발 도구', description: '생산성을 높여주는 웹 개발 도구', price: 50000 },
  ];
  return new Promise<typeof allProducts>(resolve => {
    setTimeout(() => {
      resolve(allProducts.filter(p => p.name.includes(query) || p.description.includes(query)));
    }, 300);
  });
}

type Props = {
  searchParams: { q?: string }; // q는 쿼리 파라미터 (예: ?q=nextjs)
};

export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
  const query = searchParams.q;
  const title = query ? `${query} 검색 결과` : '검색 페이지';
  const description = query ? `'${query}'에 대한 검색 결과입니다.` : '웹사이트 내에서 원하는 정보를 검색하세요.';

  return {
    title: title,
    description: description,
    keywords: ['검색', '상품', '정보', query].filter(Boolean) as string[], // query가 있을 때만 포함
  };
}

export default async function SearchPage({ searchParams }: Props) {
  const query = searchParams.q;
  const results = await searchProducts(query);

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #FFC107', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
      <h1 style={{ color: '#FFC107', textAlign: 'center', marginBottom: '20px' }}>
        {query ? `'${query}' 검색 결과` : '검색 페이지'}
      </h1>
      <form style={{ display: 'flex', justifyContent: 'center', marginBottom: '30px' }}>
        <input
          type="text"
          name="q"
          defaultValue={query}
          placeholder="검색어를 입력하세요..."
          style={{ padding: '10px', width: '70%', marginRight: '10px', border: '1px solid #ddd', borderRadius: '5px' }}
        />
        <button type="submit" style={{ padding: '10px 20px', backgroundColor: '#FFC107', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
          검색
        </button>
      </form>

      {query && results.length > 0 ? (
        <div>
          <h2 style={{ fontSize: '1.2em', color: '#555' }}>총 {results.length}개의 결과가 발견되었습니다.</h2>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {results.map(product => (
              <li key={product.id} style={{ border: '1px solid #eee', padding: '15px', marginBottom: '10px', borderRadius: '8px', backgroundColor: '#fff' }}>
                <h3>{product.name}</h3>
                <p>{product.description}</p>
                <p>가격: {product.price.toLocaleString()}원</p>
              </li>
            ))}
          </ul>
        </div>
      ) : query && results.length === 0 ? (
        <p style={{ textAlign: 'center', color: '#888' }}>'${query}'에 대한 검색 결과가 없습니다.</p>
      ) : (
        <p style={{ textAlign: 'center', color: '#888' }}>검색어를 입력하여 정보를 찾아보세요.</p>
      )}
    </div>
  );
}

// app/blog/[slug]/opengraph-image.tsx
// 이 파일은 Vercel Edge Runtime에서 실행됩니다.
import { ImageResponse } from 'next/og';

// 이미지 메타데이터
export const alt = '게시물 이미지';
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = 'image/png';

async function getPostTitle(slug: string): Promise<string> {
  // 실제로는 여기서 DB 또는 API를 호출하여 게시물 제목을 가져옵니다.
  const titles: { [key: string]: string } = {
    'nextjs-seo-guide': 'Next.js SEO 가이드',
    'dynamic-metadata-tutorial': '동적 메타데이터 튜토리얼',
  };
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(titles[slug] || '알 수 없는 게시물');
    }, 200);
  });
}

// 1. ImageResponse를 반환하는 함수 정의 (export default)
export default async function Image({ params }: { params: { slug: string } }) {
  const postTitle = await getPostTitle(params.slug);

  return new ImageResponse(
    (
      // 2. React JSX를 사용하여 이미지 콘텐츠 정의
      <div
        style={{
          fontSize: 60,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: 'sans-serif',
          padding: '50px',
          textAlign: 'center',
          boxSizing: 'border-box',
        }}
      >
        <p style={{ fontSize: 30, color: '#666' }}>Next.js 블로그</p>
        <h1 style={{ fontSize: 70, color: '#0070f3', lineHeight: 1.2 }}>
          {postTitle}
        </h1>
        <p style={{ fontSize: 40, color: '#333', marginTop: '20px' }}>
          SEO & 메타데이터 최적화
        </p>
      </div>
    ),
    {
      ...size,
      // 폰트 로드 (선택 사항, 필요 시)
      // fonts: [
      //   {
      //     name: 'Noto Sans KR',
      //     data: await fetch(new URL('./path-to-your-font.woff', import.meta.url)).then(
      //       (res) => res.arrayBuffer()
      //     ),
      //     style: 'normal',
      //     weight: 400,
      //   },
      // ],
    }
  );
}