[next.js 공식문서] 02. Defining Routes

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Defining Routes

경로 생성

폴더를 만들고 page.js, page.jsx, page.tsx 등을 넣어라

UI 만들기

page.js내에 리액트 컴포넌트를 추가하고 export default로 내보내기

Path Group

규칙

()로 묶어서 생성.
이름은 별 의미 없음.
다른 URL path랑 겹치면 안됨
여러 루트 레이아웃을 탐색하면 전체 페이지 로드가 발생함.(다중 루트 레이아웃 시))

• URL 구조에 영향을 주지 않고 경로 구성
  
  ex) /(marketing)/about/page.js
• 특정 경로 세그먼트에 레이아웃 적용
  
  ex) /(marketing)/layout.js
• 애플리케이션을 분할하여 다중 루트 레이아웃 만들기
  
  ex) /의 layout.js 삭제
  
  => /(marketing).layout.js 생성(html 태그 body 등 추가해야함)

동적 세그먼트

[]로 묶어서 생성할 수 있음.
ex) [id] 등
동적 세그먼트는 params에 props로 전달됨

export default function Page({ params }) {
  return <div>My Post</div>;
}

포괄적인 세그먼트

[...이름] 말 줄임표롤 이용하여 생성하여 모든 후속 세그먼트로 확장 가능

path	URL	params
app/shop/[…slug]/page.js	/shop/a
app/shop/[…slug]/page.js	/shop/a/b
app/shop/[…slug]/page.js	/shop/a/b/c

선택적 포괄 세그먼트

...이름

path	URL	params
app/shop/[…slug]/page.js	/shop	{}
app/shop/[…slug]/page.js	/shop/a
app/shop/[…slug]/page.js	/shop/a/b
app/shop/[…slug]/page.js	/shop/a/b/c

타입스크립트

export default function Page({
  params,
}: {
  params: { slug: string };
}) {
  return <h1>My Page</h1>;
}