Skip to Content
Suffering builds character
아카이브9.Next.js특징라우팅1.페이지 라우팅

1.페이지 라우팅

라우팅은 사용자가 현재 페이지에서 다른 페이지로 이동할 수 있도록 제공하는 메커니즘,
대부분의 애플리케이션에서 라우팅은 필수적인 요소

1. Next.js의 라우팅 처리 방법

Next.js는 라우팅 전략으로 파일, 폴더 경로를 활용(File-system based)함

만약 사용자에게 다음과 같은 URL 경로로 라우팅하고자 할 경우,

sample-URL
www.acme.com/dashboard/settings

프로젝트 폴더를 다음과 같은 방식으로 구성하면 됨
→ app/dashboard/settings/page.jsx

        • page.js
page.js
export default function Page() { return <h1>settings 페이지입니다.</h1> }
Note

page.js

acme.com/dashboard/settings 경로에 표시될 화면 레이아웃을 작성하는 특수한 파일
이름은 무조건 page.jsx로 생성해야 하며, 해당 URL 페이지에 나타낼 UI를 작성하는 곳

그 외 다른 파일 컨벤션

2. 라우팅 처리 방식

Next.js는 프로젝트의 폴더 이름을 URL 세그먼트로 인식함

또한 settings/ 폴더는 dashboard/ 내부에 중첩된 구조이기 때문에 세그먼트 역시 하위 세그먼트로 분류됨

3. 요약

폴더(Folders)

폴더(Folders)는 라우트(URL Segments 경로)를 정의하는 용도로 사용되며,
폴더를 중첩하면 하위 라우트 경로가 추가됨

파일(Files)

파일(Files)은 특정 라우트에 해당하는 UI 레이아웃을 구성하는 용도로 사용되며, page.js와 같이 Next.js에서 가이드하는 이름 규칙을 준수해야 됨

Last updated on