한 줄로

Next.js는 React 앱의 폴더가 곧 URL이 되게 하고, 기본으로 서버에서 HTML을 만든 뒤 필요한 조각만 브라우저에서 상호작용하게 합니다.

페이지를 보여주는 것, 폼으로 데이터를 저장하는 것, 이미지·글꼴·메타데이터를 다루는 것을 한 프로젝트 안에서 처리합니다.

시작 전에

• HTML로 제목·링크·폼을 만들 수 있다.
• CSS로 여백과 글자 크기를 조절할 수 있다.
• JavaScript로 함수, 배열, async/await를 읽을 수 있다.
• React의 컴포넌트, props, useState는 Next.js 아래 React 강좌에서 같이 본다. 클래스 컴포넌트까지 끝낼 필요는 없다.
• 이미 만든 HTML·CSS·JavaScript를 Next.js 페이지로 옮기는 순서, 요청 문장, 이후 고치는 위치는 정적 변환에 있다.

Node.js 20.9 이상이 필요합니다. 터미널에서 node -v로 확인합니다.

이 묶음에서 다루는 것

단원	내용
개념	React와의 차이, App Router, 서버 컴포넌트, 정적·동적·스트리밍
시작·라우팅	설치, 폴더, page·layout, Link, 동적 주소, 로딩·오류 화면
컴포넌트·데이터	'use client', 서버에서 데이터 읽기, 스트리밍, 폼으로 저장, 환경 변수
배포·자주 쓰는 기능	메타데이터, 이미지, API 라우트, Proxy, 빌드와 배포, 옛 글과 다른 점

다루지 않는 것

• React 문법 전체. 컴포넌트가 낯설면 React 기초를 먼저 봅니다.
• Pages Router(pages/, getServerSideProps). 옛 프로젝트용이고, 새 프로젝트는 app/을 씁니다.
• 캐시 전략의 모든 스위치. 기본값만 적고, 세부는 공식 문서의 Caching을 봅니다.

공식 문서: Getting Started (새 창). 버전마다 기본값이 바뀌므로, 명령이 다르면 설치한 버전의 문서를 우선합니다.