Next.js 개발 시 알아두면 좋은 팁들

Next.js로 프로젝트를 진행하면서 알게 된 유용한 팁들을 정리해봤습니다.

1. App Router vs Pages Router

Next.js 13부터 App Router가 도입되었습니다. 새 프로젝트라면 App Router를 사용하는 것을 권장합니다.

// app/page.tsx - App Router
export default function Home() {
  return <h1>Hello World</h1>
}

2. 서버 컴포넌트 활용하기

기본적으로 App Router의 컴포넌트는 서버 컴포넌트입니다. 클라이언트 기능이 필요할 때만 'use client'를 사용하세요.

// 서버 컴포넌트 - 데이터 fetching이 간단함
async function UserList() {
  const users = await fetch('/api/users').then((res) => res.json())
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  )
}

3. Image 컴포넌트 최적화

next/image를 사용하면 자동으로 이미지가 최적화됩니다.

import Image from 'next/image'
;<Image
  src="/hero.jpg"
  alt="Hero image"
  width={800}
  height={400}
  priority // LCP 이미지에 사용
/>

4. 메타데이터 설정

각 페이지에서 메타데이터를 쉽게 설정할 수 있습니다.

export const metadata = {
  title: '페이지 제목',
  description: '페이지 설명',
}

마무리

Next.js는 계속 발전하고 있어서 공식 문서를 주기적으로 확인하는 것이 좋습니다.