• pages 디렉토리 안에 export 한 js, jsx, ts, tsx파일을 생성하면 파일의 이름을 route로 사용이 가능하게 된다.
• 즉 컴포넌트의 이름이 아닌 파일의 이름이 route로 사용된다.
• 단, export default 일 때에만 가능하다.
• React와 비교하면 react-router-dom 이 필요 없이 동작한다.
• Nextjs를 다룰때에는 반드시 하나의 큰 어플리케이션이 아니라 각각의 나뉘어진 페이지로 생각해야 한다.

// React
<BrowserRouter>
	<Routes>
		<Route to='about' elemenet={ <About /> } />
	</Routes>
</BrowserRouter>

// Nestjs -> pages/about.js
// pathname -> localhost:3000/about
function About() {
  return <div>About</div>
}

export default About;

index

• 예외 사항으로 index.js 는 폴더 디렉토리 접속 파일이기 때문에 따로 index 이름을 route에 넣지 않는다.

// Nestjs -> pages/index.js
// pathname -> localhost:3000/
function Home() {
  return <div>Home</div>
}

export default Home;

• pages 폴더의 index.js 페이지
• *localhost:3000/ (O)*
• *localhost:3000/index (X)*

// Nestjs -> pages/detail/index.js
// pathname -> localhost:3000/detail/
function Detail() {
  return <div>Detail</div>
}

export default Detail;

• detail 폴더의 index.js 페이지
• *localhost:3000/detail (O)*
• *localhost:3000/detail/index (X)*