처음 만난 Next.js 문서
4.1
Pages
먼저 Next.js의 페이지는 우리가 일반적으로 알고있는 웹페이지와 같은 개념이라고 생각하면 됩니다. 한 가지 다른 점은 Next.js에서는 페이지를 구성하는 컴포넌트가 담긴 파일의 이름을 page.js(TypeScript의 경우 page.ts)라고 하기로 정해두었다는 점입니다. 그래서 아래 그림과 같이 웹사이트의 루트 경로(/)로 접근할 경우에는 App Router의 최상위 폴더인 app 폴더 내에 있는 page.js가 렌더링 되며, /posts 경로로 접근할 경우에는 posts 폴더 내에 있는 page.js가 렌더링 됩니다.
NOTE. 페이지 컴포넌트 파일의 확장자
위 그림에서 페이지 컴포넌트의 확장자는.js로 되어 있지만, 리액트를 사용해서 개발할 때 대부분 JSX를 사용하기 때문에 페이지 컴포넌트의 파일 이름은 일반적으로page.jsx(TypeScript의 경우page.tsx)가 됩니다.
아래 코드는 아주 간단한 형태의 page.tsx 파일의 예시 코드입니다. 페이지 컴포넌트라고 해서 특별한 것이 아니라, 우리가 일반적으로 알고 있는 리액트 컴포넌트라고 보면 됩니다. Next.js에서는 이 파일을 어떤 폴더 내에 위치시키느냐에 따라서 해당 경로로 접속했을 때 나오는 페이지가 달라집니다.
// app/page.tsx
function Page() {
return <h1>안녕하세요, 소플입니다!</h1>
}
export default Page;
이전 장에서 App Router에 대해 배울 때 나왔던 것처럼, Next.js에서는 아래 그림과 같이 app 폴더 내에 중첩된 폴더 구조를 통해 Route를 구성하게 됩니다.
페이지 컴포넌트는 기본적으로 서버 컴포넌트이지만, "use client" 지시어를 사용하여 클라이언트 컴포넌트로 설정할 수 있습니다. 만약 서버 컴포넌트 형태로 구현을 하게 되면, 페이지 컴포넌트 내에서 곧바로 서버로부터 데이터를 받아와서 SSR(Server Side Rendering)을 할 수 있습니다.
마지막 업데이트: 2025년 10월 24일 02시 06분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page