Page Router

1. Page Router 실습 전 넥스트 앱 만들기

npx create-next-app@14 section2

 

npx(node-package-execute)

npmjs.com에 있는 최신 버전의 노드 패키지를 다운로드 없이 실행시키는 명령어

 

/src/pages/_app.tsx와 /src/pages/_document.tsx파일은 페이지역할을 하지 않고 넥스트 앱의 모든 페이지에 공통적으로 적용될 로직이나 레이아웃, 데이터를 다루기 위한 파일이다 .

 

/src/pages/_app.tsx은 리액트에서 app컴포넌트(root컴포넌트)와 같은 역할을 함.

/src/pages/_document.tsx은 리액트에서 index.html과 비슷한 역할을 함.

모든 페이지에 공통적으로 적용되어야 하는 넥스트 앱의 html코드를 설정한다.

 

2. 페이지 라우팅 설정

● pages폴더 안에 폴더나 파일을 중첩해서 경로를 라우팅할 수 있다.

/src/pages/search.tsx -> localhost:3000/search의 url에서 렌더링 되는 내용

/src/pages/search/index.tsx도 같은 방식으로 렌더링 된다(폴더로 관리할 수 있음)

 

●  쿼리스트링

페이지 라우팅에서는 next/router에서 import를 함(호환성문제 or 버전문제)

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  console.log(router);

  return <h1>Search</h1>;
}

쿼리 스트링 읽기 전 콘솔창 쿼리 스트링 읽은 후 콘솔창

 

쿼리 스트링을 읽어오는 과정에서 리렌더링 되므로 콘솔창에 두 개가 찍힘

 

● 동적 경로

src/pages/book/[id].tsx는 동적경로를 갖는 북페이지이다.

 

    ○ Catch-All Segments

        [id].tsx대신 [...id].tsx를 쓰면 여러 개의 아이디가 연달아 전달되는 경로에 대응

        ex) /book/233/244/231 가능, {id: [233, 244, 231]}로 전달됨

 

     ○ Optional Catch-All Segments

        [[...id]].tsx를 쓰면 /book으로 끝나는 경로에도 대응됨

 

● 존재하지 않는 페이지(404)

404.tsx는 존재하지 않는 경로로 들어왔을 때 렌더링 되는 페이지이다.