Pages

Next.js에서는 Pages라는 개념이 있다.

Next.js 에서 page는 pages 디렉토리 안에 .js, .jsx, .ts, .tsx로부터 export한 React Component이다.

각 페이지는 파일 이름을 기반으로 하는 route와 연결된다.

예시

pages/about.js 으로 생성하고 아래와 같이 React component를 export하면, /about으로 접근 할 수 있다.

function About() {
  return <div>About</div>
}

export default About

pages 폴더에 생성하는 파일들은 경로로 접근하는 주소 대상이 된다.

에를 들어 pages 폴더 밑에 about.js라는 컴포넌트를 하나 만들었다면, 개발 서버 환경에서 localhost:3000/about 으로 바로 접근이 가능하다.
기존 React CRA(Create-React-App)에서는 React-Router-dom을 설치해서 Router 설정을 통해 동일한 기능 구현이 가능하다.

Next.js에서 pages 폴더는 라우터의 기능을 한다.

1. index.tsx