Next.js — 가장 많이 사용하는 타입들 알아보기

// types/blog.ts
interface BlogPost {
  id: string;
  title: string;
  content: string;
  author: string;
  publishedAt: string;
}
 
interface BlogPageProps {
  params: { category?: string };
  searchParams: { limit?: string; sort?: string };
}
 
// app/blog/[category]/page.tsx
import { BlogPageProps } from '../../../types/blog';
 
export default function BlogCategoryPage({ params, searchParams }: BlogPageProps) {
  const category = params.category || 'all';
  const limit = parseInt(searchParams.limit || '10');
 
  return (
    <div>
      <h1>{category} 카테고리 블로그</h1>
      <p>최대 {limit}개의 포스트를 표시합니다.</p>
      {/* 실제로는 데이터 fetching 로직 */}
    </div>
  );
}

// app/blog/[id]/page.tsx
import { Metadata } from 'next';
import { BlogPost } from '../../../types/blog';
 
interface BlogPostPageProps {
  params: Promise<{ id: string }>;
}
 
export async function generateMetadata({ params }: BlogPostPageProps): Promise<Metadata> {
  const { id } = await params;
 
  // 실제로는 데이터베이스에서 조회
  const post: BlogPost = {
    id: id,
    title: 'TypeScript 시작하기',
    content: 'TypeScript의 기초를 알아봅시다.',
    author: '개발자',
    publishedAt: '2024-01-01',
  };
 
  return {
    title: post.title,
    description: post.content.substring(0, 160),
    authors: [{ name: post.author }],
    openGraph: {
      title: post.title,
      description: post.content.substring(0, 160),
      type: 'article',
      publishedTime: post.publishedAt,
    },
  };
}
 
export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { id } = await params;
  return <div>블로그 포스트: {id}</div>;
}

// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { BlogPost } from '../../../types/blog';
 
export async function GET(request: NextRequest) {
  // NextRequest의 속성에 타입 안전하게 접근
  const searchParams = request.nextUrl.searchParams;
  const limit = parseInt(searchParams.get('limit') || '10');
 
  // 실제로는 데이터베이스에서 조회
  const posts: BlogPost[] = [
    {
      id: '1',
      title: 'TypeScript 시작하기',
      content: 'TypeScript의 기초를 알아봅시다.',
      author: '개발자',
      publishedAt: '2024-01-01',
    },
  ];
 
  // NextResponse로 타입화된 응답 반환
  return NextResponse.json({
    posts: posts.slice(0, limit),
    totalCount: posts.length,
  });
}
 
export async function POST(request: NextRequest) {
  try {
    // NextRequest의 json() 메서드 타입 안전성 보장
    const body = await request.json() as Omit<BlogPost, 'id' | 'publishedAt'>;
 
    const newPost: BlogPost = {
      ...body,
      id: Date.now().toString(),
      publishedAt: new Date().toISOString(),
    };
 
    // 실제로는 데이터베이스에 저장
    return NextResponse.json(newPost, { status: 201 });
  } catch (error) {
    return NextResponse.json(
      { error: '잘못된 요청입니다' },
      { status: 400 }
    );
  }
}

// components/Hero.tsx
import Image from 'next/image';
import { StaticImageData } from 'next/image';
import heroImage from '../public/hero.jpg'; // Next.js에서 자동으로 StaticImageData 타입
 
interface HeroProps {
  image: StaticImageData;
  title: string;
}
 
function Hero({ image, title }: HeroProps) {
  return (
    <section>
      <Image
        src={image}
        alt={title}
        // StaticImageData의 속성에 타입 안전하게 접근
        width={image.width}
        height={image.height}
        priority
      />
      <h1>{title}</h1>
    </section>
  );
}
 
// 사용
<Hero image={heroImage} title="환영합니다" />

// ❌ Next.js 15+에서는 params가 Promise임
interface WrongPageProps {
  params: { id: string }; // Promise<{ id: string }>이어야 함
}
 
export default function WrongPage({ params }: WrongPageProps) {
  return <div>ID: {params.id}</div>; // params는 Promise 타입
}

// ✅ Next.js 15+ 올바른 PageProps 정의
interface CorrectPageProps {
  params: Promise<{ id: string }>; // Promise로 감싸야 함
  searchParams: Promise<{ sort?: string }>;
}
 
export default async function CorrectPage({ params, searchParams }: CorrectPageProps) {
  const { id } = await params;
  const { sort } = await searchParams;
  return <div>ID: {id}, Sort: {sort}</div>;
}

// ❌ 지원되지 않는 속성 사용
export async function generateMetadata(): Promise<Metadata> {
  return {
    customProperty: 'value', // Metadata 타입에 없는 속성
  };
};

// ❌ await 생략
export async function POST(request: NextRequest) {
  const body = request.json(); // Promise 반환, await 필요
  return NextResponse.json({ error: '잘못된 요청' });
};