[Next.js 13] page.js : 페이지 컴포넌트 기본 정리

# Next.js13 - Page.js 컴포넌트란?

page.js 는 Next.js에서 App Router를 위해 제공하는 React 컴포넌트 파일이다.

따라서 파일명을 바꾸면 안된다. 타입스크립트의 .tsx는 가능하다.

 

page.js 컴포넌트는 크게 아래의 두 가지 역할을 수행한다.

 

• Routable
  • 브라우저에서 접속 가능하게 만든다.
  • page.js 파일이 속해있는 폴더명을 브라우저에서 접속 할 수 있는 경로(url segment)로 만든다.
• UI
  • 현재 접속한 화면의 UI를 만든다.
  • 결과적으로 JSX를 리턴하는 React 컴포넌트이다.

---

# Page.js 사용 방법 (라우트 정의)

page.js 를 통해 라우트(접속 경로 및 화면 UI)를 정의하는 방법은 다음과 같다.

 

1. /app 디렉터리 내부에 폴더를 만든다.
2. 해당 폴더 내부에 page.js 파일을 만든다.
3. 파일 내부에 React 컴포넌트 함수를 정의하고 `export default` 처리한다.

 

예를 들어 다음과 같이 정의된 `/app/page.js` 파일은 `http://localhost:3000/` 으로 접속시 노출되는 화면의 UI를 렌더링한다.

 

export default function Page() {
  return <h1>Hello, Home page!</h1>;
}

 

`app/dashboard/page.js` 파일은  `http://localhost:3000/dashboard/`로 접속시 노출되는 화면의 UI를 렌더링한다.

 

export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>;
}

 

 

만약 app/dashboard 폴더 내부에 page.js 파일이 없으면, 브라우저에서 접속 불가하며 404 에러가 뜬다.

page.js 파일이 존재해야만 외부에서 접속 가능(Routable) 하다.

 

참고로, page.js 는 디폴트로 Server Component 이다.

• 따라서 async 함수로 컴포넌트를 정의할 수 있으며, 컴포넌트 내부에서 바로 await fetch() 호출이 가능하다.
• Client Component 로 전환도 가능하며, 파일 최상단에 "use client" 를 추가해 주면 된다.

---

# page 컴포넌트의 파라미터

page 컴포넌트는 아래의 2가지 파라미터를 Prop으로 받는다.

 

• `params` (optional)
  • `/app/board/[id]` 와 같은 다이나믹 라우팅으로 접속시 전달 받는 경로(dynamic route parameter) 정보를 담고 있는 객체이다.
    • `app/shop/[slug]/page.js` ▶︎ 접속 URL: `/shop/1`  ▶︎ `params: { slug: '1' }`
    • `app/shop/[category]/[item]/page.js` ▶︎ 접속 URL: `/shop/1/2` ▶︎ `params: { category: '1', item: '2' }`
    • `app/shop/[...slug]/page.js` ▶︎ 접속 URL: `/shop/1/2` ▶︎ `params: { slug: ['1', '2'] }`
• `searchParam` (optional)
  • 접속 URL 뒤에 붙는 쿼리 스트링(Search paramteter) 정보를 담고 있는 객체이다.
    • 접속 URL: `/shop?a=1` ▶︎ searchParams: `{ a: '1' }`
    • 접속 URL: `/shop?a=1&b=2` ▶︎ searchParams: `{ a: '1', b: '2' }`
    • 접속 URL: `/shop?a=1&a=2` ▶︎ searchParams: `{ a: ['1', '2'] }`

 

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  return <h1>My Page</h1>;
}

---

page.js 에 대해 Next.js 공식 문서 내용을 참고하여 정리한 글이다.

- Pages and Layout Docs

- page.js API Reference