이 페이지에서는 Next.js 애플리케이션에서 경로(Route)를 정의하고 구성하는 방법을 알아봅니다.

Creating Routes

Next.js는 파일 시스템 기반의 Router를 사용합니다. 여기서 폴더는 경로(route)를 정의하는 데 사용됩니다.

각 폴더는 URL 세그먼트에 매핑되는 경로(route) 세그먼트를 나타냅니다. 중첩된 경로를 생성하려면 폴더를 서로 중첩 시킬 수 있습니다.

경로(route) 세그먼트를 공개적으로 접근 가능하게 만들기 위해 특별한 page.js 파일을 사용합니다.

이 예제에서는 /dashboard/analytics URL 경로에 해당하는 page.js 파일이 없기 때문에 공개적으로 접근할 수 없습니다.

이 폴더는 components, stylesheets, images 또는 다른 공간에 저장된 파일을 저장하는데 사용될 수 있습니다. → 일반적인 폴더처럼 사용 가능

<aside> 💡 Good to know: 특별한 파일에는 .js, .jsx 또는 .tsx 확장자를 사용할 수 있습니다.

</aside>

Create UI

각 경로 세그먼트(route segment)에 대한 UI를 만들기 위해 특별한 파일 규칙이 사용됩니다. 가장 일반적인 것은 각 경로에 고유한 UI를 표시하기 위한 pages와 여러 경로에 결쳐 공유되는 UI를 표시하기 위한 layouts입니다.

예를 들어, 첫 번재 페이지를 만들려면 app 디렉토리 안에 page.js 파일을 추가하고 React 컴포넌트를 export 하면 됩니다.

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