NextJS 프레임워크의 기본 작동 원리

이전 강의들에서 우리는 NextJS 프레임워크를 설치하고 기본 구조를 알아보았습니다. 이제 본격적인 작업을 시작할 시간입니다.

NextJS의 핵심 부분은 라우팅입니다. 라우팅은 다음과 같이 작동합니다: 사용자가 브라우저 주소창에 특정 URL을 입력하면, NextJS 프레임워크는 해당 URL에 대응하는 특정 파일을 브라우저로 전송합니다.

NextJS의 라우팅은 특별한 방식으로 구성되어 있습니다. 그 핵심은 요청된 각 URL이 src/app 내부의 특정 폴더에 대응한다는 점입니다.

이때 폴더 내부에는 반드시 page.jsx라는 이름의 파일이 있어야 합니다. 바로 이 파일이 브라우저로 전송될 것입니다. 또한 이 파일에는 JSX로 코드를 작성하게 되며, 브라우저로는 완성된 HTML 페이지 코드가 전송됩니다.

예를 통해 살펴보겠습니다. URL /test/로 접속했을 때 특정 텍스트가 표시되도록 해봅시다.

해당하는 폴더를 생성합니다: src/app/test. 이 폴더 안에 다음 내용을 가진 page.jsx 파일을 만듭니다:

export default function Test() {
	return <h1>hello, user!</h1>;
}

브라우저에서 우리의 URL을 열어보세요: /test. 그러면 JSX 파일 안에 우리가 작성한 텍스트를 볼 수 있을 것입니다.

텍스트를 변경하고 파일을 저장해 보세요. 그러면 브라우저에서도 텍스트가 자동으로 변경될 것입니다. 이것이 개발 모드에서의 NextJS 작동 방식입니다.

/about 주소로 접속했을 때 브라우저에 당신의 이름과 성이 담긴 메시지가 출력되도록 만드세요.