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
반응형
'Framework > Next.js' 카테고리의 다른 글
| [Next.js] Next에서 svg 사용하기 (0) | 2024.10.22 |
|---|---|
| [Next.js] Page Router 총정리 (1) | 2024.09.23 |
