앱 라우터: 시작하기

앱 라우터: 시작하기 | Next.js

Source URL: https://nextjs.org/docs/app/getting-started

시작하기

최종 업데이트 2026년 2월 20일

Next.js 문서에 오신 것을 환영합니다!

이 시작하기 섹션은 첫 Next.js 앱을 만들고 모든 프로젝트에서 활용하게 될 핵심 기능을 익히도록 도와줍니다.

사전 지식

이 문서는 웹 개발에 어느 정도 익숙하다고 가정합니다. 시작하기 전에 다음 내용에 익숙하면 도움이 됩니다:

• HTML
• CSS
• JavaScript
• React

React가 처음이거나 복습이 필요하다면, React Foundations 과정과 학습과 동시에 애플리케이션을 만들어 보는 Next.js Foundations 과정을 먼저 살펴보세요.

다음 단계

• 설치
  • create-next-app CLI로 새 Next.js 애플리케이션을 만들고 TypeScript, ESLint, 모듈 경로 별칭을 설정하는 방법을 알아보세요.
• 프로젝트 구조
  • Next.js의 폴더 및 파일 규칙과 프로젝트 구성 방법을 익히세요.
• 레이아웃과 페이지
  • 첫 페이지와 레이아웃을 만들고 Link 컴포넌트로 서로 연결하는 법을 배워보세요.
• 링크 및 탐색
  • 링킹과 탐색 내장 탐색 최적화(프리패치, 프리렌더링, 클라이언트 측 탐색) 작동 방식과 동적 라우트 및 느린 네트워크에서 탐색을 최적화하는 방법을 알아보세요.
• 서버와 클라이언트 컴포넌트
  • 서버 및 클라이언트 컴포넌트 애플리케이션 일부를 서버 또는 클라이언트에서 렌더링하기 위해 React Server 및 Client Components를 사용하는 방법을 배워보세요.
• 컴포넌트 캐시
  • 캐시 컴포넌트 캐시 컴포넌트를 활용해 정적 렌더링과 동적 렌더링의 장점을 결합하는 방법을 익히세요.
• 데이터 가져오기
  • 데이터를 가져오고 데이터 의존 콘텐츠를 스트리밍하는 방법을 알아보세요.
• 데이터 업데이트
  • Server Functions와 Server Actions를 사용해 데이터를 변경하는 방법을 배우세요.
• 캐싱과 재검증
  • 캐싱 및 재검증 애플리케이션에서 데이터를 캐시하고 재검증하는 방법을 알아보세요.
• 오류 처리
  • 예상 오류를 표시하고 포착되지 않은 예외를 처리하는 방법을 배우세요.
• CSS
  • Tailwind CSS, CSS Modules, Global CSS 등 다양한 방식으로 애플리케이션에 CSS를 추가하는 방법을 익히세요.
• 이미지 최적화
  • Next.js에서 이미지를 최적화하는 방법을 배우세요.
• 폰트 최적화
  • Next.js에서 폰트를 최적화하는 방법을 알아보세요.
• 메타데이터와 OG 이미지
  • 페이지에 메타데이터를 추가하고 동적 OG 이미지를 만드는 방법을 익히세요.
• 라우트 핸들러
  • Route Handlers를 사용하는 방법을 배우세요.
• 프록시
  • Proxy를 사용하는 방법을 알아보세요.
• 배포
  • Next.js 애플리케이션을 배포하는 방법을 익히세요.
• 업그레이드
  • Next.js 애플리케이션을 최신 버전 또는 카나리로 업그레이드하는 방법을 알아보세요.