[Next.js] Page Router, 설정, 네비게이팅

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.1) Page Router를 소개합니다.
2.2) 페이지 라우팅 설정하기
2.3) 네비게이팅

2.1 Page Router를 소개합니다

Page Router 란?

많은 기업에서 활용되고 있는 가장 안정적인 라우터

특정 조건을 기준으로 웹서비스 내에 페이지를 분할하고 또 그렇게 분할된 페이지 간의 이동을 처리하는 기능을 제공

파일의 이름(혹은 폴더의 이름)을 기반으로 페이지 라우팅을 제공

 

동적 경로

/page/1, /page/2... 처럼 가변적인 값을 포함하고 있는 경로(블로그 게시글 주소 등)

/page 폴더 하단에 [id].js 로 대괄호를 통해 만들어줄 수 있다.

 

npx(node package execute)

라이브러리들이 실제로 올라가있는 서버인 npmjs.com에 등록되어 있는 최신 버전의 노드 패키지를 다운로드 없이 바로 실행시키는 명령어

 

폴더구조 

public : 페이지 내부에서 사용할 이미지 파일같은 정적인 파일들이 보관되어 있음

 

_app.tsx, _document.tsx 의 역할

pages 폴더 밑에 있긴 하지만 페이지의 역할을 하는 파일이 아님

대신 넥스트 앱의 모든 페이지에 공통적으로 적용될 로직이나 레이아웃, 데이터를 다루기위해 필요한 파일

 

App 컴포넌트의 역할

루트 컴포넌트

Component : 현재 페이지의 역할을 할 컴포넌트

pageProps : 전달될 페이지의 프롭스들을 객체로 모아놓은 곳

import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

모든 페이지에 공통으로 나타나야 하는(헤더, 푸터 등)의 공통 요소는 App 컴포넌트에 넣으면 된다.

 

Document 컴포넌트의 역할

모든 페이지에 공통적으로 적용이 되어야 하는 html 코드를 설정하는 컴포넌트

메타 태그 또는 폰트, 구글 애널리틱스 같은 서드 파티 스크립트 등

 

next.config.mjs

넥스트 앱의 설정을 관리하는 파일

---

2.2 페이지 라우팅 설정하기

쿼리 스트링 설정 방법

useRouter에서 next/router, next/navigation 의 차이

next/navigation : App Router에서 사용되는 패키지임

 

useRouter -> router라는 객체를 컴포넌트 내부에서 사용할 수 있도록 반환해주는 함수

router를 통해 라우팅과 관련된 정보들을 가져올 수 있음

 

book/234/234/234 처럼 id를 여러개 설정하는 방법

- Catch All Segment : 파일 이름에 ... 붙이기 [...id].tsx
다만 Catch All Segment는. index.tsx(/book)는 대응할 수 없다. -> 왜냐하면 Catch All Segment는 /book 뒤에 뭐가 나와야 하는 경로이기 때문이다.

그래도 /book 뒤에 뭐가 오든 안오든 페이지를 보이게 하고 싶다면? -> Optional Catch All Segment : [[...id]].tsx 처럼 대괄호를 한 번 더 감싸주면 된다.

 

404.tsx

pages/ 아래에 404.tsx 만 만들어주면 접속 불가능한 페이지 주소에 해당 컴포넌트를 보여줄 수 있게 된다.

---

2.3 네비게이팅

a / Link 차이점

<a></a> : 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 따라서 상태 값을 잃고 속도가 저하된다.

<Link></Link> : 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다.

 

Programmatic Navigation

사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라 특정 버튼이 클릭이 되었거나 아니면 특정 조건이 만족했을 경우 어떠한 함수 내부에서 페이지를 이동시키는 방식