Routes 정의하기

계속하기 전에 라우팅 기본 사항 페이지를 읽어보시기 바랍니다.

이 페이지에서는 Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법을 안내합니다.

1. Creating Routes

Next.js는 폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용합니다.

각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 중첩된 경로를 만들려면, 각 폴더를 서로 중첩할 수 있습니다.

경로 세그먼트를 공개적으로 액세스할 수 있도록 하기 위해 특별한 page.js 파일이 사용됩니다.

이 예제에서는 /dashboard/analytics URL 경로에 해당하는 page.js 파일이 없기 때문에, 공개적으로 액세스할 수 없습니다. 이 폴더는 컴포넌트, 스타일시트, 이미지 또는 기타 배치된 파일을 저장하는 데 사용할 수 있습니다.

알아둘만한 점 : .js, .jsx 또는 .tsx 파일 확장자는 특수 파일에 사용할 수 있습니다.

2. Creating UI

특별한 파일 규칙을 사용하여 각 경로 세그먼트에 대한 UI를 생성합니다. 가장 일반적인 것은 경로에 고유한 UI를 표시하는 페이지와 여러 경로에서 공유되는 UI를 표시하는 레이아웃입니다.

예를 들어, 첫 번째 페이지를 만들려면 app 디렉토리에 page.js 파일을 추가하고, React 컴포넌트를 내보내세요:

1
export default function Page() {
2
  return <h1>Hello, Next.js!</h1>
3
}