Next.js

Next.js는 React에 무엇을 더할까요?

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

이럴 때 필요해요

React 컴포넌트를 여러 주소의 페이지로 구성하는 출발점을 이해합니다.

React로 버튼과 화면을 만들었다면 이제 주소별 페이지, 공통 레이아웃, 서버 데이터 연결이 필요할 수 있습니다. Next.js는 이런 앱의 기반을 제공하는 React 프레임워크입니다.

이 학습은 Next.js 16의 App Router를 기준으로 합니다. app 폴더의 page 파일로 페이지를 구성합니다. React의 컴포넌트, props, 상태를 알고 있으면 이어서 읽기 쉽습니다.

아래 코드는 Next.js 프로젝트의 app/page.tsx에 넣는 읽기 예제입니다. 이 노트 안에서 Next.js 서버를 새로 실행하거나 배포하지 않습니다. 별도 프로젝트를 준비한다면 공식 설치 안내에서 현재 Node.js 요구사항도 확인하세요.

동작을 설명하는 읽기 전용 예제입니다.

example.tsx

// app/page.tsx
export default function Home() {
  return <h1>공연 예매</h1>;
}

tsx · 읽기 전용4줄

App Router 프로젝트의 / 경로에 공연 예매 제목을 표시할 페이지입니다.

React 컴포넌트와 Next.js 페이지는 어떤 관계일까요?

생각할 단서 페이지 파일의 내용과 그 파일을 주소에 연결하는 규칙을 나누어 생각하세요.

예시 답변 확인

Next.js 페이지도 React 컴포넌트입니다. Next.js가 파일 위치를 주소와 연결하는 규칙과 앱 실행 기능을 더합니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.