[Next.js] Defining Routes(라우트 정의)

라우트 생성

Next.js는 폴더 자체가 라우트를 정의하는 파일 시스템 기반 라우터를 사용한다. 각 폴더는 URL 세그먼트 에 매핑되는 라우트를 나타내며, 폴더를 서로 중첩해서 중첩 라우트를 구현할 수 있다.

라우트에 액세스할 수 있도록 page.ts 파일을 사용하며, page.ts는 각 라우트의 루트이다.

위 예시에서 /dashboard/analytics에는 page.ts 파일이 없으므로 엑세스 할 수 없다.

UI 생성

각 라우트에 대한 UI를 생성하기 위해 일반적으로 page.ts 파일을 사용하며, 여러 라우트의 공용 UI를 생성하기 위해서는 layout.ts 파일을 사용한다.

예를 들어, Next.js에서 첫 번째 페이지를 만든다고 하면, app 폴더 내부에 page.ts 파일을 생성하고 해당 컴포넌트를 내보내면 된다.

const Page = () => {
  return <h1>Hello, Next.js!</h1>;
};

export default Page;