[NextJS] Routing

728x90

React Router와는 다르게 Next는 파일 시스템 기반 라우팅으로 작동한다.

기본 라우팅

app 디렉토리 내부의 폴더들은 자동으로 라우팅된다.

폴더 내부에 page.js가 있어야 URL 경로로 접근이 가능하다.

// dashboard/page.js

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

폴더를 중첩해서 중첩 라우팅을 사용할 수 있다.

[]를 사용해서 폴더 이름을 감싸주면 된다.

// app/blog/[slug]/page.js

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

params를 사용해서 URL에 지정한 slug 값을 가져올 수 있다.

/blog/a 경로로 접속하면 params는 { slug: 'a' } 로 설정된다.

중괄호로 폴더이름을 감싸서 [...폴더이름]으로 사용해주면 된다.

Route를 app/shop/[...slug]/page.js로 설정하고 /shop/a/b/c 경로에 접속하면 params는 { slug: ['a', 'b', 'c'] } 로 설정된다.

중괄호 두개로 폴더 이름을 감싸서 [[...폴더이름]]으로 사용해주면 된다.

Route를 app/shop/[[...slug]]/page.js로 설정하고 /shop 경로에 접속하면 params는 {} 로 설정된다.

cach-all과의 차이점은 파라미터가 없어도 경로가 /shop으로 설정된다.

app 폴더 내부의 폴더들은 URL 경로로 매핑된다. Route Group을 만들면 이 패턴을 깰 수 있다.

폴더 이름을 () 괄호로 묶으면 URL에 생략된다.

새로운 route 그룹 (shop)을 만들고 동일한 레이아웃(account, cart)을 공유하는 route를 옮길 수 있다. 그룹 밖에 있는 route(checkout)에는 레이아웃을 공유하지 않는다.

가장 바깥에 있는 layout.js를 지우고 각 route 그룹마다 layout.js를 만들어서 여러개의 루트 레이아웃을 만들 수 있다.

각 루트 레이아웃에는 <html>, <body>를 반드시 작성해주어야한다.

주의점: route group 내부의 URL 구조가 겹치면 안된다.

예를 들어, (marketing)/about/page.js과 (shop)/about/page.js는 둘 다 /about으로 경로가 설정되기 때문에 에러가 발생한다.

728x90

[Next.js][react-query] API Routes 사용시 무한 request 발생 이슈 (0)	2023.02.09
[Nextjs] Linking & Navigating (0)	2023.01.31
[NextJS] Pages, Layouts (0)	2023.01.31