Next.js 시작하기

#nextjs#react#tutorial

Next.js는 React를 기반으로 한 풀스택 웹 프레임워크입니다.

왜 Next.js인가?

Next.js를 사용하면 다음과 같은 이점이 있습니다:

  1. 서버 사이드 렌더링 (SSR) - SEO에 유리
  2. 정적 사이트 생성 (SSG) - 빠른 성능
  3. 파일 기반 라우팅 - 직관적인 구조
  4. API Routes - 백엔드 기능 내장

프로젝트 생성

새로운 Next.js 프로젝트를 만들려면:

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

App Router vs Pages Router

Next.js 13부터 App Router가 도입되었습니다:

src/
├── app/
│   ├── page.tsx      # 홈페이지
│   ├── about/
│   │   └── page.tsx  # /about
│   └── layout.tsx    # 공통 레이아웃

App Router를 사용하면 서버 컴포넌트를 기본으로 사용할 수 있습니다.

마무리

다음 글에서는 데이터 fetching에 대해 다루겠습니다.