[Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법

Next.js 는 File System Routing 을 제공한다.

즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다.

 

1. pages/파일명.tsx : /파일명 접속 라우팅

2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅

3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득

* index.tsx 는 파일명을 제외한 / 경로로 인식. 

* 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용

 

 

그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다.

이 글에서는 이에 대해 간략하게 정리한다.

 

# pages 라우팅 파일명, 컴포넌트 이름 작성 방법

- pages 경로의 라우팅 용 컴포넌트 작성 시,파일명과 컴포넌트명은 같을 필요가 없다

 

1. 파일명

파일명은 접속경로가 될 이름으로 작성해주면 되며, 어떤 파일 이름을 사용해도 된다.

- index.js, about.js, auth.js, mainPage.tsx 등으로 자유롭게 작성해주면 된다.

 

 

2. 컴포넌트명

컴포넌트 이름은 파일 이름과 달라도 된다.

컴포넌트명은 접속 경로와 무관하다.(오직 파일명에 의해서만 접속경로가 정해진다.)

어떤 컴포넌트 이름을 사용해도 되지만, 보통 대문자로 시작한다.

* 단, 컴포넌트는 export default 로 익스포트 되어야만 한다.

 

예를 들어 index.js 파일 생성시,

컴포넌트 명은 HomePage 등으로 다르게 작성해도 된다.(export default 는 꼭 해줘야 한다.)

// pages/index.js 파일

// 컴포넌트 명은 파일명과 달라도 되지만, 대문자로 시작하는게 권장된다.
function HomePage() {
  return <div>홈페이지입니다.</div>;
}

// 반드시 default 로 export 해줘야 한다. 
export default HomePage;

 

공식문서의 원문을 첨부한다.

The component can have any name, but you must export it as a default export.