Next.js 시작하기 - Chapter 1. Getting Started #01

들어가며

Next.js는 React 기반의 최신 웹 프레임워크로, 정적 생성(Static Generation), 서버 사이드 렌더링(Server-side Rendering), API 라우팅, 이미지 최적화 등 다양한 기능을 갖춘 풀스택 환경을 제공합니다.

Next.js는 단순히 프론트엔드 프레임워크를 넘어, 프론트엔드와 백엔드를 통합적으로 다룰 수 있는 개발 도구로 자리잡고 있습니다. 특히 App Router, React Server Components, Server Actions 같은 기능은 최신 웹 개발 트렌드를 반영한 구성으로 많은 개발자들에게 각광받고 있습니다.

이번 시리즈에서는 Next.js 공식 사이트의 ‘Learn Next.js’ 를 바탕으로, 처음 접하는 분들도 이해하기 쉽도록 한글 참고서 형식으로 정리하려고 합니다.

---

이 글에서 배우는 것

Next.js의 기본 구조부터 시작해서, 실제 대시보드 형태의 웹 애플리케이션을 직접 만들어보며 다음과 같은 개념을 체계적으로 익히게 됩니다:

• pnpm create next-app으로 프로젝트 생성하는 법
• app/ 폴더를 기반으로 한 폴더 기반 라우팅 구조 이해
• 서버 컴포넌트와 클라이언트 컴포넌트의 차이
• Tailwind CSS를 활용한 UI 스타일링
• 서버에서 데이터를 불러오고 사용자 입력을 처리하는 방법

---

추천 대상

이 튜토리얼은 다음과 같은 분들에게 특히 유익합니다:

• React는 경험했지만 Next.js는 처음인 프론트엔드 개발자
• 백엔드까지 다뤄보고 싶은 풀스택 지향 개발자
• Next.js 공식 튜토리얼이 너무 압축적으로 느껴졌던 분
• 프로젝트 기반으로 실습하며 학습하고 싶은 분

---

왜 ‘Dashboard App 프로젝트’인가?

Next.js에는 다양한 예제가 있지만, 이 프로젝트가 특별한 이유는 다음과 같습니다:

1. 실무에 가까운 구조 제공

app/, lib/, components/, styles/ 폴더 구조를 활용하여 실제 서비스 아키텍처에 가까운 방식으로 프로젝트가 구성되어 있습니다.

2. 풀스택 개발 전 과정을 체험

라우팅, 데이터 요청, UI 렌더링, 사용자 입력 처리 등 웹 애플리케이션 개발의 핵심 흐름을 전반적으로 실습할 수 있습니다.

3. 최신 기능 실습 기회

React Server Components, 폴더 기반 라우팅(App Router), 서버 액션(Server Actions) 등 Next.js의 최신 기능을 직접 사용해 볼 수 있습니다.

---

다음 글에서는

이제 본격적으로 Next.js를 활용한 대시보드 앱을 만들어 볼 시간입니다.
다음 장에서는 프로젝트를 생성하고 초기 폴더 구조를 분석해보겠습니다.
Next.js의 전체 흐름을 파악하는 데 중요한 출발점이 될 것입니다.

👉 2장 보러가기: 프로젝트 시작하기(준비중)