Page Router vs App Router

Page Router

디렉토리 구조

├📦 pages
│├📝 index.js → ~/
│├📝 about.js → ~/about
│├📦 serach
││├📝 index.js → ~/search
││├📝 setting.js → url : ~/search/setting
│├📦 country
││├📝 [code].js → ~/country/[code]

[code].js 추가 내용

• KOR([code]) 뒤에 /2023 이런게 추가 됐을 때 대응할라면 파일 이름을 📝[...code]로 작성해준다.

• 뒤에 동적 경로 URL 파라미터가 없는 ~/country에 대응할라면 📝[[...code]] 두 번 감싸면 code 파라미터 값이 없어도 대응이 가능하다. 대신 code에는 아무런 값이 저장이 안된다.

페이지 이동

useRouter 라우팅과 관련된 정보와 메소드를 포함한 커스텀 훅으로 const router = useRouter(); 정의하여 페이지 이동 간에 router.push, replace, back, reload 메소드를 사용하여 페이지 이동 기능을 수행할 수 있다.

• push() : 지정된 페이지로 이동
• replace() : 현재 페이지를 새로운 페이지로 교체하여 뒤로가기 방지
• back() : 뒤로가기
• reload() : 새로고침

Next.js에서 Link 컴포넌트로 동적 라우팅 처리하는 두 가지 방법

// 템플릿 문자열 방식
<Link href={`/country/${code}`}>{code} Page 이동</Link>
       
// 객체 방식
<Link href={{
            pathname: "/country/[code]",
            query: { code: code },
          }}
        >

App Router