Next.js 14 시작하기 #1 Routing

HanHyuk·2024년 1월 2일

Next.js

목록 보기
2/18

강의 5번

Routing

  • next.js는 라우팅 메커니즘에 기반한 파일 시스템을 가지고 있음
  • 유저들이 브라우저를 통해 access 가능한 URL paths는 내 codebase가 있는 파일이나 폴더에 의해 정의됨

Routing Convention(라우팅 규칙)

  • 모든 라우트는 app 폴더 내에 존재
  • 라우트에 해당하는 모든 파일은 page.js나 page.tsx로 이름 지어져야 한다
  • 모든 폴더는 브라우저 URL의 특정 위치로 해당되어진다 (폴더 이름에 따라 /폴더이름 과 같이 URL 라우팅이 된다는 뜻)

예시

  • Scenario 1

    localhost:3000/ 페이지는

    src/app에 page.js 파일이 있어야 함
    layout.js 파일은 삭제하더라도 root route를 로드할때 자동으로 다시 생겨남

  • Scenario 2

    localhost:3000/about 과 localhost:3000/profile URL에 각각 접근시 해당 페이지가 뜨도록 하려면

    src/app/about과 src/app/profile에 page.js 파일 있어야 함

    폴더 디렉토리 구조를 정리해보면 다음과 같음

profile
선한 영향력을 펼치는 개발자가 되겠습니다.

0개의 댓글