Next.js

처음 접하는 개념부터 원리와 설계 적용까지, 필요한 단계부터 시작하세요.

개념 노트 8개 · 직접 실습 0개

시작 전 React 컴포넌트·props·상태와 JavaScript의 Promise·모듈을 먼저 알아두면 좋습니다.

순서는 권장 경로입니다. 이미 아는 내용은 건너뛰어도 됩니다. Next.js 16 App Router 기준의 읽기 학습입니다. 코드 예제는 별도 프로젝트 환경이 필요하며 이 사이트에서 서버를 실행하지 않습니다.

시작하기

React와 Next.js의 관계를 알고 시작합니다.

Next.js는 React 화면에 라우팅과 서버 실행 같은 앱의 기반을 더하는 프레임워크입니다.

페이지·레이아웃·이동·실행 환경·데이터 표시를 연결합니다.

page는 주소의 화면을, layout은 여러 페이지를 감싸는 공통 구조를 정의합니다.

Link로 경로를 연결하고 대괄호 폴더로 주소의 가변 부분을 표현합니다.

서버의 데이터 작업과 브라우저의 상호작용을 실행 환경에 맞게 배치합니다.

서버 컴포넌트는 비동기 작업을 기다린 뒤 결과를 화면에 사용할 수 있습니다.

초기 화면·상호작용 연결·전달 방식과 캐시 조건을 구분합니다.

입력 검증과 서버 변경 작업을 사용자·실패 경계에 맞게 설계합니다.

폼의 입력 수집과 서버에서 데이터를 변경하는 책임은 다릅니다.

공개 공연 소개와 로그인 사용자의 예매 내역 화면을 나누어 실행 위치와 재사용 정책을 설명해 보세요.

과제는 직접 작성·확인하는 연습입니다. 자동 채점이나 완료 기록은 제공하지 않습니다.