[Next.js] App Router - 페이지 라우팅

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
3.2) 페이지 라우팅 설정하기

3.2 페이지 라우팅 설정하기

Page Router vs App Router

공통점

- 폴더기반 페이지 라우팅이 가능하다.

차이점

- Page Router : 특정 폴더 안에 index.tsx가 페이지 컴포넌트 역할, 경로.tsx(ex. search.tsx) 역시 페이지 경로(/search)로 구분 가능

- App Router : page.tsx가 페이지 컴포넌트 역할을 함, 무조건 page.tsx로 페이지 컴포넌트를 지정할 수 있기 때문에 경로 폴더가 필요

 

App Router의 query string 받아오기

App Router에서는 페이지 컴포넌트에게 자동으로 전달이 되는 Props에는 쿼리 스트링이나 URL 파라미터와 같은 값들이 포함된다.

{
  params: Promise {  // URL parameter
    <pending>,
    [Symbol(async_id_symbol)]: 56857,
    [Symbol(trigger_async_id_symbol)]: 56856,
    [Symbol(kResourceStore)]: {
      isStaticGeneration: false,
      page: '/search/page',
      fallbackRouteParams: null,
      route: '/search',
      incrementalCache: [IncrementalCache],
      cacheLifeProfiles: [Object],
      isRevalidate: false,
      isPrerendering: undefined,
      fetchCache: undefined,
      isOnDemandRevalidate: false,
      isDraftMode: false,
      requestEndedState: [Object],
      isPrefetchRequest: false,
      buildId: 'development',
      reactLoadableManifest: {},
      assetPrefix: '',
      afterContext: [AfterContext],
      dynamicIOEnabled: false,
      dev: true,
      previouslyRevalidatedTags: [],
      refreshTagsByCacheKind: [Map],
      fetchMetrics: []
    },
    ...
  },
  searchParams: Promise {
    <pending>,
    [Symbol(async_id_symbol)]: 56798,
    [Symbol(trigger_async_id_symbol)]: 56792,
    [Symbol(kResourceStore)]: {
      isStaticGeneration: false,
      page: '/search/page',
      fallbackRouteParams: null,
      route: '/search',
      incrementalCache: [IncrementalCache],
      cacheLifeProfiles: [Object],
      isRevalidate: false,
      isPrerendering: undefined,
      fetchCache: undefined,
      isOnDemandRevalidate: false,
      isDraftMode: false,
      requestEndedState: [Object],
      isPrefetchRequest: false,
      buildId: 'development',
      reactLoadableManifest: {},
      assetPrefix: '',
      afterContext: [AfterContext],
      dynamicIOEnabled: false,
      dev: true,
      previouslyRevalidatedTags: [],
      refreshTagsByCacheKind: [Map],
      fetchMetrics: []
    },
    ...
  }
}

 

따라서 이 props를 활용해서 query string를 받아올 수 있다.

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ q: string }>;
}) {
  const { q } = await searchParams;
  return <div>Search 페이지 : {q}</div>;
}

URL Parameter를 포함하는 페이지

동적경로를 설정하기 위해 [id] 와 같이 대괄호가 포함된 폴더를 생성하고, 내부에 page.tsx를 생성해준다.

.
└─ book
   └── [id]
       └── page.tsx

URL Parameter 꺼내오기

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return <div>book/[id] 페이지 : {id}</div>;
}

Catch All Segment / Optional Catch All Segment

[...id] : book/1/1과 같은 페이지에 접근이 가능하도록 Catch All Segment를 설정해줄 수 있다.

[[...id]] : Catch All Segment로는 /book 에 접근 불가능하기 때문에 Optional Catch All Segment로 접근 가능하게 만들 수 있다.