Pages RouterHead페이지 별로 Head 컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다.import Head from "next/head";export default Page() { return ( 타이틀 // ... );} Fallback 상태에서의 SEO 처리동적 라우팅을 사용하는 페이지(예: 아이템별 상세 페이지)에서 fallback:true를 설정했을 때, 지정하지 않은 경로에 대해 SSR과 유사하게 동작한다. 이때 초기 HTML에 SEO 관련 메타 데이터가 포함되지 않는 문제가 발생할 수 있는데, 이를 방지하기 위해 fallback 상태에서..

Pre-fetching이란?Pre-fetching은 페이지를 사전에 미리 불러오는 기능이다. 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는다. Next.js는 이 기능을 통해 이동을 위한 데이터를 미리 불러와 놓음으로써 페이지 이동을 매우 빠른 속도로 지체 없이 처리할 수 있게 해준다. Link 컴포넌트 사용기본적으로 Link컴포넌트로 명시된 경로는 프리페칭이 된다. index search book/1프리페칭 해제 방법search Programmatic NavigationProgrammatic Navigation이란?프리페칭 설정 방법import { useRouter } from "next/router";export default function ..

페이지 라우터 (Pages Router)기존 방식에서는 _app.tsx를 통해 전역(Global) 레이아웃을 정의하고,특정 페이지에서만 별도의 레이아웃을 적용하고 싶을 때는 getLayout 패턴을 사용한다..├── src│ ├── components│ │ ├── global-layout.tsx│ │ └── searchable-layout.tsx│ ├── pages│ │ ├── _app.tsx│ │ ├── book│ │ │ └── [[...id]].tsx│ │ ├── search│ │ │ └── index.tsx글로벌 레이아웃// global-layout.tsxexport default function GlobalLayout({ childr..

페이지 이동Link index search book/1 Programmatic Navigation사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라, 특정 버튼이 클릭되거나 특정 조건을 만족했을 경우에 어떤 함수 내부에서 페이지를 이동시키는 방법import { useRouter } from "next/router"; // 페이지 라우터 버전import { useRouter } from "next/navigation"; // 앱 라우터 버전export default function App() { const router = useRouter(); const onClickButton = () => { router.push("/test"); }; return ( ..

경로 페이지Pages Router.├── src│ ├── pages│ │ ├── _app.tsx│ │ ├── _document.tsx│ │ ├── index.tsx│ │ └── search│ │ └── index.tsx // '/search'│ │ └── search.tsx // '/search/settiㅍng' App Router.├── src│ ├── app│ │ ├──layout.tsx│ │ ├── page.tsx│ │ └── search│ │ └── page.tsx // '/search' 쿼리 스트링'/search?q=쿼리스트링' Pages Routerimport { useRouter } fro..