Next.js 16 시작하기

Next.js는 React 기반의 풀스택 웹 프레임워크입니다. 이 포스트에서는 Next.js 16의 주요 기능과 시작하는 방법을 알아보겠습니다.

Next.js란?

Next.js는 Vercel에서 만든 React 프레임워크로, 다음과 같은 기능을 제공합니다:

서버 사이드 렌더링 (SSR)
정적 사이트 생성 (SSG)
API 라우트
파일 기반 라우팅
이미지 최적화

프로젝트 생성

Next.js 프로젝트를 생성하는 것은 매우 간단합니다:

npx create-next-app@latest my-app
cd my-app
npm run dev

App Router

Next.js 13부터 도입된 App Router는 다음과 같은 장점이 있습니다:

레이아웃 지원: 중첩된 레이아웃을 쉽게 만들 수 있습니다
서버 컴포넌트: 기본적으로 서버에서 렌더링됩니다
스트리밍: 페이지를 점진적으로 렌더링할 수 있습니다

예제 코드

// app/page.tsx
export default function Page() {
  return (
    <main>
      <h1>Hello, Next.js!</h1>
    </main>
  );
}

데이터 페칭

Next.js에서는 여러 방법으로 데이터를 가져올 수 있습니다:

// 서버 컴포넌트에서 직접 데이터 페칭
async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

결론

Next.js는 현대적인 웹 애플리케이션을 만들기 위한 강력한 도구입니다. App Router와 서버 컴포넌트를 활용하면 더 빠르고 효율적인 웹사이트를 만들 수 있습니다.

다음 포스트에서는 Next.js의 고급 기능들을 더 자세히 알아보겠습니다!