ReactNextCentral

라우트 정의하기

Published on
Next.js에서 첫 번째 라우트를 생성하는 방법을 배우십시오.
Table of Contents

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


라우트 생성하기

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

각 폴더는 라우트 세그먼트를 나타내며 이는 URL 세그먼트에 매핑됩니다. 중첩된 라우트를 생성하려면 폴더를 서로 중첩할 수 있습니다.

라우트 세그먼트와 경로 세그먼트의 매핑

특별한 page.js 파일은 라우트 세그먼트를 공개적으로 접근 가능하게 만드는 데 사용됩니다.

라우트 정의하기

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


UI 생성하기

특별한 파일 규칙은 각 라우트 세그먼트에 대한 UI를 생성하는 데 사용됩니다. 가장 일반적인 것은 라우트별 고유한 UI를 보여주는 페이지와 여러 라우트간에 공유되는 UI를 보여주는 레이아웃입니다.

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

app/page.tsx
export default function Page() {
  return <h1>안녕, Next.js!</h1>
}
JavaScript
app/page.js
export default function Page() {
  return <h1>안녕, Next.js!</h1>
}