[NextJs] Routing과 navigation

Page 기반 Routing

React 로 처음 개발을 할 때 보통 component 작성 후 router를 만들고 시작한다.

nextjs를 처음 배웠을 때 제일 놀라고 편했던 것 router를 작성하지 않아도 된다는 것이다..

 

nextjs 기본 구조

nextJs의 기본 폴더 구조이다.

pages안에 index.js가 "/" 의 위치이다.

npm run dev를 하고 3000 port에서 서버가 열리면 "http://localhost:3000/"에서 index.js를 볼 수 있다.

 

page 폴더

page 폴더 아래 여러 폴더 및 파일을 생성해보았다.

index.js(tsx)와 동일한 경로에 있는 genre.tsx는 "/genre"

즉, "http://localhost:3000/genre" 로 이동 시 표시되는 컴포넌트 이다.

 

client-side navigation 

navigation 또한 react에서 사용했던 useNavigation이 아니라 Link 태그만 작성해주면 된다.

so easy.....

 

a 태그로도 작성할 수 있지만 페이지 이동 시 새로고침(화면 깜빡임)이 발생한다.

next에서 지원하는 Link 태그를 이용하면 새로고침 없이 페이지 이동이 가능하다.

// Import 필수
import Link from "next/link";

export default function Home() {
  return (
    <div>    
        <Link href={{pathname: "/genre"}}></Link>
    </div>
  );
}

 

Link

- 페이지간의 탐색을 CSR으로 진행 할 수 있다.

- 라우팅 라이브러리가 필요하지 않습니다.

- 특정 페이지에서 오류가 발생하더라도 나머지 앱은 정상 작동 합니다.

- Code Splitting이 페이지 별로 진행 되어 각 페이지에서 필요한 것만 로드할 수 있도록 한다.

Code Splitting
프로그램에서 오직 그 페이지를 실행하는데 꼭 필요한 코드만 가져오도록 초기 로딩 시간을 향상시키는 것이다.

Next.js는 코드 분할을 자체적으로 지원한다. 
pages 폴더 안에 각 파일이 빌드하는 동안 자체 자바스크립트 번들로 자동 코드 분할한다.

Link의 Query 전달

// Import 필수
import Link from "next/link";

export default function Home() {
  return (
    <div>    
      <Link 
        href={{
            pathname: `/movies/${id}`,
                query: {
                    id: id,
                    title: title,
                    content: content,
                },
        }}     
      ></Link>
    </div>
  );
}

 

404

NextJs는 404 페이지도 page 폴더 내에 "404" 파일만 만들면

컴포넌트가 존재하지 않는 url로 이동했을 때 자동으로 404 page를 띄워준다.

 

신기하고도 편리한 NextJs의 세계,,