Framework/Next.js

[Next.js] Page Router - 페이지 라우팅 설정

올콩 2024. 9. 11. 01:32

 

Next.js는 Page Router 방식과 App Router 방식이 있는데 오늘은 Page Router 방식을 알아보고자 한다!

 

📄 Page Router

현재 많은 기업에서 사용되고 있는 안정적인 라우터

  • React Router처럼 페이지 라우팅 기능을 제공한다
  • Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다

 

왼쪽 이미지처럼 파일 이름을 기반으로 페이지 라우팅을 자동으로 제공한다

오른쪽 이미지처럼 폴더 이름을 기준으로도 페이지 라우팅이 자동으로 된다

 

import { useRouter } from 'next/router';

const router = useRouter();

// 쿼리스트링
const { q } = router.query;
// 파라미터
const { id } = router.query;

동적 경로(Dynamic Routes)를 갖는 페이지 라우팅도 가능하다

  • ex) [id].tsx  <-  ~/item/1, ~/item/2
  • 파리미터가 하나일 때는 [id].tsx
  • 파라미터가 여러 개일 때는 [...id].tsx
    • ⇒ Catch All Segment 
    • 모든 구간에 대응하는 페이지를 만든다
    • index(’/’) 경로에는 대응하지 못한다
      • 해결 1: index.tsx를 추가로 만들어서 대응
      • 해결 2: [[...id].tsx
      • ⇒ Optional Catch All Segment
  • 404 대응하기
    • pages/404.tsx

 

🎮 day02 미션

npx create-next-app@14 [폴더명]
cd [폴더명]
yarn install
yarn dev

 

🔸 _app.tsx

  • 모든 페이지 역할을 하는 컴포넌트의 부모 컴포넌트
  • Component: 현재 페이지 역할을 하는 컴포넌트
  • pageProps: Component에 전달될 props
import '@/styles/globals.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <header>글로벌 헤더</header>
      <Component {...pageProps} />
    </>
  );
}

 

🔸 _document.tsx

  • 모든 페이지에 적용되는 html
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang='kr'>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

 

🔸 search/index.tsx

쿼리 파라미터에서 q를 가져와서 화면에 띄운다

q의 값에 따라 검색 결과가 동적으로 바뀐다

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  const q = router.query.q

  return (
    <div>
      <h1 className="text-4xl font-bold">검색 결과 : {q}</h1>
    </div>
  )
}

 

🔸 movie/[id].tsx

동적 라우팅을 활용해 URL의 id를 가져와서 페이지 내용을 바꾼다

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <h1 className="text-4xl font-bold">{id} 영화 상세 페이지</h1>
    </div>
  )
}

 

🔸 현재까지의 폴더 구조

 

 

[출처] 한 입 크기로 잘라먹는 Next.js

반응형