안녕하세요 lika-7입니다
이번시간에는 Next.js에서 라우터를 사용하는 방법을 설명하겠습니다,.
Next.js에서 라우터를 사용하는 방법
Next.js에서 route는 파일 시스템 기반 라우터를 지원하여 라우팅 설정을 간단하게 만듭니다.
이 방식을 사용하면 페이지 컴포넌트를 프로젝트의 디렉토리 구조와 일치시키고 URL 경로에 따라 페이지가 자동으로 연결됩니다.
작동 방식 - 파일 기반 네비게이션
pages/
├── index.tsx
├── about.tsx
└── products/
├── index.tsx
├── product1.tsx
└── product2.tsx
페이지 컴포넌트는 pages 디렉토리에 저장됩니다.
이 디렉토리 아래에 새로운 디렉토리를 만들고 해당 디렉토리에 페이지 컴포넌트를 추가하면 별도의 명시적 라우팅 설정을 할 필요가 없습니다.
- about.tsx는 /about 경로로 액세스 됩니다.
동적 라우팅
파일 이름을 [name].tsx 형태로 작성하면 해당 부분은 동적 경로로 처리됩니다.
예를 들어, pages/products/[productId].tsx는 /products/123과 같은 URL에서 동적으로 사용될 수 있습니다.
