Next.js 시작하기

Next.js란?

Next.js는 React 기반의 풀스택 웹 프레임워크입니다. 서버 사이드 렌더링, 정적 사이트 생성, API 라우트 등 다양한 기능을 제공합니다.

App Router의 장점

Next.js 13부터 도입된 App Router는 다음과 같은 장점을 제공합니다:

1. 서버 컴포넌트: 기본적으로 모든 컴포넌트가 서버에서 렌더링됩니다
2. 레이아웃 시스템: 중첩 레이아웃을 쉽게 구성할 수 있습니다
3. 스트리밍: 컴포넌트를 점진적으로 렌더링할 수 있습니다

프로젝트 생성

npx create-next-app@latest my-blog --typescript --tailwind --app

폴더 구조

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── posts/[slug]/page.tsx
├── components/
└── lib/

다음 글에서는 MDX를 활용한 블로그 포스트 작성 방법을 다루겠습니다.