[Next.js 공식문서 정리] Routing : 01. Layouts and Templates

1. Layouts and Templates

Next.js는 파일 기반 라우팅을 사용 → 폴더와 파일을 사용한 경로 정의를 이용함

❗ 레이아웃, 페이지 생성 및 연결방법

페이지

• 특정 경로에서 렌더링되는 UI
• 인덱스 페이지(/)를 만들려면 파일 경로를 아래와 같이 지정한다. (app/page.js)

레이아웃

• 여러 페이지 간 공유되는 UI
• 네비게이션에서 레이아웃은 상태 유지, 상호작용 유지, 렌더링x
• 하위 페이지를 받아들일 수 있게 {children} 사용

❗ 중첩 경로 만들기

중첩경로: 여러 URL 세그먼트로 구성된 경로

/blog/[slug]
root 세그먼트 / 세그먼트 / leaf 세그먼트

폴더 : URL 세그먼트에 매핑되는 route 세그먼트 정의 시 사용
파일(page, layout) : 세그먼트에 표시되는 UI를 만드는 데 사용

중첩 경로를 만들기 위해 여러 개의 폴더를 중첩할 수 있다.

[slug] : 동적 경로 세그먼트 ([] 사용해서 정의)

폴더 내부 레이아웃도 계층 구조 형성 (children prop을 이용해 하위 레이아웃을 감싼다.)

❗ 페이지 간 연결

Link 컴포넌트 사용
Link 컴포넌트: 클라이언트 사이드 네비게이션과 prefetching을 제공하는, HTML의 a 태그를 확장한 next.js 내장 컴포넌트

<Link href={`/blog/${post.slug}`}>{post.title}</Link>

useRouter 훅 사용해서 더 고급스러운 네비게이션을 만들 수 있음

 

 

 

 

---

출처

https://nextjs.org/docs/app/getting-started/layouts-and-pages

Getting Started: Layouts and Pages | Next.js