동적 메타데이터 생성

import type { Metadata, ResolvingMetadata } from 'next'; // Metadata, ResolvingMetadata 타입 임포트
import { notFound } from 'next/navigation';
import { cache } from 'react';

// 가상의 데이터베이스 또는 API 호출 함수
const getPost = cache(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: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};

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

  // 게시물이 없으면 메타데이터 생성 단계에서도 not-found 처리로 전환
  if (!post) {
    notFound();
  }

  // 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://blog-lab.dev/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: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = await getPost(slug);

  if (!post) {
    notFound();
  }

  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 && (
        // 본문 이미지 예시이며, OG 이미지 URL 선언과는 별개의 표시 요소
        // 실제 페이지 콘텐츠에서는 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>
  );
}

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: Promise<{ q?: string | string[] }>; // q는 쿼리 파라미터 (예: ?q=nextjs)
};

export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
  const { q } = await searchParams;
  const query = Array.isArray(q) ? q[0] : 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 { q } = await searchParams;
  const query = Array.isArray(q) ? q[0] : 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>
  );
}

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: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const postTitle = await getPostTitle(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,
      //   },
      // ],
    }
  );
}