학습 목표 및 전제 조건
App Router부터 데이터·인증·배포까지 이어지는 학습 범위와 필요한 React·웹 기초, 실습 루틴을 확인합니다.
Next.js가 어렵게 느껴지는 이유는 개념이 너무 많아서라기보다, 무엇을 어떤 순서로 익혀야 하는지 감이 잡히지 않기 때문입니다. 처음부터 모든 기능을 한꺼번에 익히려고 하면 App Router와 서버 컴포넌트, 캐싱, 배포가 서로 뒤엉켜 부담이 커지므로, 시작할 때 학습 범위와 전제 지식을 분명히 정리해 두는 일이 꼭 필요합니다.
이 글에서는 학습 범위를 먼저 살펴보고, 필요한 웹과 React의 기초를 짧은 질문으로 확인합니다. 막히는 질문이 있으면 연결된 글을 복습한 뒤 다시 확인하고 환경 설정으로 넘어갑니다. 지금 기준을 잡아 두면 뒤의 장에서 새 개념이 나와도 지금 자신의 위치와 다음 단계를 잃지 않고 따라갈 수 있습니다.
이 교재로 무엇을 얻을 수 있을까요?
이 교재의 목표는 Next.js 16과 App Router로 실제 웹 애플리케이션을 기획하고 개발해 배포하는 흐름을 익히는 것입니다. 코드를 따라 치는 데서 그치지 않고, 왜 그렇게 작성해야 하는지와 Next.js의 각 기능이 어떤 문제를 해결하는지까지 이해하도록 돕습니다.
구체적으로는 Next.js가 나온 배경부터 App Router의 작동 방식, 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)의 차이, 데이터 페칭 전략 같은 핵심 개념을 분명히 이해합니다. 라우팅과 레이아웃, 데이터 관리, 상태 관리, 폼 처리처럼 실제 웹 애플리케이션에 필요한 기술을 Next.js로 구현하는 방법을 배우고, Next.js의 최적화 기능으로 성능과 검색 노출에 유리한 구조를 만드는 방법을 익힙니다. 만든 애플리케이션을 Vercel 같은 플랫폼에 배포하고 관리하는 과정을 경험하며, 개발하면서 흔히 만나는 문제를 해결하는 요령과 디버깅의 단서를 익혀 스스로 문제를 푸는 힘을 기릅니다.
이 목표는 기능의 목록이 아니라, 각 장을 마쳤을 때 설명하거나 구현할 수 있어야 하는 결과로 읽는 편이 좋습니다. 각 장을 마친 뒤에는 코드가 어디서 실행되는지, 기능이 어떻게 이어지는지, 렌더링과 메타데이터를 그렇게 고른 이유, 환경 변수와 런타임을 포함한 배포 과정, 오류가 난 위치를 자신의 말로 설명해 봅니다. 교재를 모두 읽은 뒤에는 Next.js로 성능과 구조를 고려한 웹 애플리케이션을 구현하는 흐름을 설명할 수 있어야 합니다.
학습을 시작하기 위한 전제 조건
Next.js는 웹의 기초와 React 위에 라우팅과 서버 기능을 더하는 프레임워크입니다. 아래 질문을 먼저 읽고 결과를 예상해 보세요. 지금은 새 프로젝트를 만들지 않고, 연결된 다른 교재의 코드와 설명을 읽는 것으로 시작할 수 있습니다.
먼저 HTML과 CSS, JavaScript의 기초로, 요소의 구조와 선택자로 적용한 스타일, 함수의 입력과 반환값을 읽을 수 있어야 합니다. HTML 구조와 문법의 h1을 CSS의 h1 선택자가 어떻게 고르는지, 함수와 스코프의 add(5, 3)이 어떤 값을 돌려주는지 답해 보고, 구조와 스타일이 헷갈리면 CSS 기본 문법과 선택자를 함께 복습합니다.
React의 props와 state도 구분해야 합니다. 부모가 넘긴 입력과 컴포넌트가 기억하는 값의 차이입니다. props를 이용한 데이터 전달의 UserProfile에 보이는 이름은 어디에서 넘어오는지, state와 useState 훅 기초의 ToggleSwitch가 두 개 있고 둘 다 꺼져 있을 때 첫 버튼을 한 번 누르면 두 스위치가 모두 켜지는지 답하고, 그 state를 가진 위치를 설명해 보세요.
명령줄(CLI)에서는 터미널의 현재 폴더와 프로젝트의 명령을 구분합니다. cd는 작업 폴더를 옮기고 npm run은 그 프로젝트의 스크립트를 실행합니다. Next.js 16 프로젝트 생성에서 my-next-app을 만든 뒤 npm run dev는 어느 폴더에서 실행하는지, 그 명령의 정의는 어느 파일에서 찾을 수 있는지 답해 보세요.
Node.js와 npm에서는 개발 도구가 실행되는 것과 패키지 설치, 서버 시작이 성공하는 것이 서로 다른 확인입니다. node -v가 응답하면 npm 설치와 Next.js의 요구사항까지 모두 확인했다고 말할 수 있을까요? node.js 및 npm 설치에서 npm -v와 프로젝트가 요구하는 버전을 확인하는 곳을 찾아보세요. Next.js 16이 요구하는 Node.js의 최소 버전은 20.9이며, 최솟값을 만족하는 것과 지금 지원 중인 LTS를 고르는 것은 다른 기준입니다(Next.js 문서의 시스템 요구사항). 뒤의 장에서 설치하는 테스트와 배포 도구 가운데는 Node.js 22 이상을 요구하는 것도 있으므로, 이 교재는 지금 지원 중인 LTS를 기준으로 실습합니다.
데이터 페칭을 배우기 전에는 비동기 결과의 성공과 실패도 구분해야 합니다. 비동기 프로그래밍의 Promise 예제는 fetchData()를 호출한 뒤 바로 시작 로그를 찍습니다. 시작 로그, 성공이나 오류 로그, finally의 완료 로그는 어떤 순서로 나올지, 언제나 성공한다고 정해도 될지 생각해 보세요.
예상 결과와 확인할 코드
h1 선택자는 h1 요소에 스타일 선언을 적용하고, add(5, 3)은 8을 돌려줍니다. 다르게 예상했다면 요소와 선택자의 대응, 함수의 return을 다시 봅니다.
UserProfile의 이름은 부모인 App이 name props로 넘기며, 자식은 넘겨받은 값을 읽을 뿐 직접 바꾸지 않습니다. 두 ToggleSwitch는 각자 state를 가지므로 첫 스위치만 false에서 true로 바뀌고, 첫 번째의 상태 문구와 버튼은 켜짐과 끄기로, 두 번째는 꺼짐과 켜기로 그대로 남습니다. 헷갈리면 useState(false)의 위치와 setIsToggled(prev => !prev)를 봅니다.
명령은 만들어진 my-next-app 프로젝트의 루트에서 실행하며, 그 폴더의 package.json에 있는 scripts.dev를 확인합니다. 프로젝트를 만들었다는 사실만으로 개발 서버까지 시작된 것은 아닙니다.
node -v는 터미널이 Node 실행 파일을 찾았다는 신호일 뿐입니다. npm -v와 Next.js의 Node 요구사항·지원 상태, 패키지 설치 오류는 따로 확인하며, 명령 자체를 찾지 못하면 설치 글의 PATH와 새 터미널 안내로 돌아갑니다.
Promise 예제에서는 시작 로그가 먼저 나옵니다. 그 뒤에는 Math.random()으로 정한 조건에 따라 성공이나 오류 로그가 나오고, 체인이 끝나면 완료 로그가 이어집니다. 이 코드에는 두 경로가 있으므로 성공 하나로 정하지 않으며, 순서가 헷갈리면 곧바로 실행되는 줄과 then·catch·finally의 콜백을 구분합니다. 타이머가 끝나는 정확한 시각까지 이 순서처럼 보장되는 것은 아닙니다.
질문이 어렵다면 연결된 예제만 복습한 뒤 같은 질문으로 돌아옵니다. React 화면을 고치는 일부터 낯설다면 개발 환경 설정과 첫 번째 React 앱 만들기를 먼저 살펴보세요. React 교재를 모두 끝내야만 Next.js를 시작할 수 있다는 뜻은 아닙니다.
다음 장은 TypeScript를 골라 src/app/page.tsx를 만드는 흐름입니다. :number, :string, :boolean 같은 표기가 낯설다면 기본 타입의 숫자·문자열·불리언 부분만 복습합니다. 서버와 클라이언트의 구분, 캐싱, 인증은 뒤의 장에서 배우므로 지금의 시작 조건으로 늘리지 않습니다.
필요한 답을 설명할 수 있게 되면 node.js 및 npm 설치에서 Node.js와 npm의 조건을 확인하고, Next.js 16 프로젝트 생성의 교재 설정으로 이어 갑니다. 막히면 전체를 다시 설치하기보다, 지금의 질문과 관련된 파일과 값, 첫 오류부터 확인합니다.
학습 운영 기준
초반의 장에서는 기능을 많이 익히는 것보다, 글마다 입력과 처리, 출력의 흐름을 분명히 되짚는 습관이 중요합니다. 새 개념을 적용할 때는 먼저 어디까지가 서버이고 어디부터가 클라이언트인지 표시하고, 예제를 실행한 뒤에는 결과 화면뿐 아니라 네트워크 요청과 렌더링 시점까지 함께 확인합니다. 막히는 곳이 생기면 전체를 다시 읽기보다 연결된 전제 개념만 필요한 만큼 복습하고 같은 질문과 예제로 돌아오며, 데이터 페칭과 캐싱, 배포에서도 예상한 결과와 실제 결과가 갈린 위치를 기록하면 다음에 복습할 범위를 고르기 쉽습니다.
각 글에서는 다음 순서로 짧게 확인합니다. 먼저 파일의 위치와 실행 주체를 표시하고 입력과 처리, 출력을 예측합니다. 가장 작은 예제를 실행해 화면과 네트워크, 빌드 출력, 서버 로그를 확인하고, 조건 하나를 바꾸어 예측과 실제 결과가 갈린 곳을 찾습니다. 필요한 전제를 보충한 뒤 지금의 예제로 돌아오고, 기능을 그 위치에 둔 이유와 실패의 원인을 자신의 말로 기록합니다. 화면이 보인다는 것만으로 마치지 말고, 어느 코드가 서버와 브라우저에서 실행되며 데이터가 언제 바뀌는지 설명할 수 있는지 확인합니다.
정리
- 이 교재는 Next.js 16과 App Router로 웹 애플리케이션을 기획하고 개발해 배포하는 흐름을 익히는 것을 목표로 합니다.
- 시작하려면 HTML·CSS·JavaScript의 기초, React의 props와 state, 명령줄, Node.js와 npm의 준비가 필요하며, 막히면 연결된 글만 복습합니다.
- Next.js 16은 Node.js 20.9 이상을 요구하지만, 최솟값과 지금 지원 중인 LTS는 다른 기준입니다.
- 글마다 파일의 위치와 실행 주체를 표시하고, 예측과 실제 결과가 갈린 곳을 기록합니다.
연습 문제
1. 실행 위치 표시하기
이 교재의 상품 상세 예처럼, 서버에서 상품을 조회하고 브라우저에서 수량 버튼을 누르는 화면이 있습니다. 이 화면을 처음 공부할 때 학습 운영 기준에 따라 가장 먼저 표시해야 할 것은 무엇일까요?
해설 보기
파일의 위치와 실행 주체, 곧 어느 코드가 서버에서 실행되고 어느 코드가 브라우저에서 실행되는지를 먼저 표시합니다. 상품 조회는 서버, 수량 버튼은 브라우저에서 실행됩니다.
그다음 입력(상품 ID와 클릭), 처리(조회와 수량 변경), 출력(첫 HTML과 바뀐 수량)을 예측하고, 실행해서 화면과 네트워크, 서버 로그로 확인합니다.
2. 버전 확인의 범위
터미널에서 node -v를 실행했더니 버전 번호가 나왔습니다. 이것만으로 Next.js 16 프로젝트를 만들고 개발 서버를 띄울 준비가 끝났다고 할 수 있을까요?
해설 보기
할 수 없습니다. node -v는 Node 실행 파일을 찾았다는 것만 알려 줍니다. 그 버전이 Next.js 16이 요구하는 20.9 이상인지, npm -v도 응답하는지, 실제로 패키지를 설치하고 개발 서버를 시작할 수 있는지는 따로 확인해야 합니다.
최소 버전을 만족하더라도 지원이 끝난 버전이라면 지금 지원 중인 LTS로 올리는 것을 검토합니다.
3. 복습할 범위 고르기
TypeScript 코드의 const count: number = 0;에서 : number가 무슨 뜻인지 모르겠고, Promise 예제의 로그 순서도 헷갈립니다. Next.js를 시작하기 전에 React 교재와 TypeScript 교재를 처음부터 끝까지 모두 다시 읽어야 할까요? 어디를 얼마나 복습하면 될까요?
해설 보기
그럴 필요는 없습니다. : number 같은 표기는 기본 타입의 숫자, 문자열, 불리언 부분만 복습하면 되고, 로그 순서는 비동기 프로그래밍의 Promise 예제에서 곧바로 실행되는 줄과 then, catch, finally의 콜백을 구분해 보면 됩니다.
복습한 뒤에는 같은 질문으로 돌아와 결과를 다시 예상해 봅니다. 서버와 클라이언트의 구분이나 캐싱처럼 뒤의 장에서 배울 내용은 지금의 시작 조건으로 늘리지 않습니다.
Next.js의 설치 조건은 Next.js 설치 안내에서 확인할 수 있습니다.
이것으로 1장을 마칩니다. 1장에서는 React만으로 생기는 빈틈과 Next.js 16에서 달라진 점, App Router와 Pages Router의 차이, 이 교재의 학습 목표와 전제 조건을 살펴봤습니다. 다음 장의 node.js 및 npm 설치부터는 개발 환경을 갖추며, Node.js와 npm을 설치하고 버전을 확인하는 것으로 시작합니다.