Link route
Next.js에서는 a 태그를 사용하면 처음 페이지에 진입시 번들 파일을 받고, a 태그에 의해 라우팅 되면 다시 번들 파일을 받기 때문에 사용하지 않는다. 또 redux를 쓰는 경우에는 store의 state 값이 증발되는 현상도 일어나기 때문에 a 태그는 다른 사이트로 페이지를 완전히 이동시켜 다시 돌아오지 않는 경우에만 사용하고, 그 이외에는 모두 Link 태그를 사용하는 것이 좋다.
동적 URL
Next.js는 가변적으로 변하는 url에 대해 동적 url을 지원하는데, 객체 형식으로 동적 페이지를 생성하는 동적 url을 만들 수 있다.
다음의 코드의 경우 localhost:5173/1으로 접속하면 postid가 1으로 나오게 되는데, pages/[id].tsx 페이지 구조의 값은 router.query.{id}와 동일하다.
import { useRouter } from "next/router";
export default () => {
const router = useRouter();
return (
<>
<h1>post</h1>
<p>postid: {router.query.id}</p>
</>
);
};prefetching
prefetching은 백그라운드에서 페이지를 미리 가져오는 기능으로, 기본값은 true. 뷰포트에있는 모든 항목은 초기 또는 스크롤을 통해서 미리 로드되는데, 정적 생성을 사용하는 JSON 페이지는 더 빠른 페이지 전환을 위해 데이터가 포함 된 파일을 미리 로드한다.
prefetching은 Link 컴포넌트를 사용해서 이뤄지는데, 링크 컴포넌트를 렌더링할때
<Link prefetch href="...">위와 같은 형식으로 prefetch 값을 전달해주면 데이터를 먼저 불러온 다음 라우팅을 시작, prefetching은 프로덕션 레벨에서만 이루어지는 기능이다.
next/router
다른 react hooks 처럼 사용해주면 된다.
import { useEffect } from "react";
import { useRouter } from "next/router";
import posts from "../posts.json";
export default () => {
const router = useRouter();
const post = posts[router.query.id as string];
if (!post) return <p>noting</p>;
useEffect(() => {
router.prefetch("/test");
}, []);
return (
<>
<h1>{post.title}</h1>
<h1>{post.content}</h1>
<button onClick={() => router.push("test")}>go to Test</button>
</>
);
};getInitialProps()
서버 사이드 렌더링을 하는 Next.js에서 컴포넌트는 각 페이지마다 사전에 불러와야할 데이터, 즉 data fetching이 필요하다. react나 vue같은 클라이언트 사이드 렌더링 방식의 경우애는 useEffect, created 함수를 이용하여 data fetching을 하지만, 서버 사이드에서 실행하는 Next.js에서는 getInitialProps를 이용해 data fetching 작업을 하게 된다.
server side lifeCycle
lifeCycle을 이해하기 위해서는 우선 getInitialProps를 조금 더 깊게 이해할 필요가 있지만, 간단하게 다음과 같은 프로세스로 정리할 수 있다.
- Next.js 서버가 GET 요청을 받는다.
- GET 요청에 맞는 pages/Component를 찾는다.
- _app.tsx의 getInitialProps가 있다면 실행한다.
- route에 맞는 페이지 Component의 getInitialProps가 있다면 실행하고, pageProps들을 받아온다.
- _document.tsx의 getInitialProps가 있다면 실행하고, pageProps들을 받아온다.
- 모든 props들을 구성하고, _app.tsx → page Component 순서로 렌더링한다.
- 모든 Content를 구성하고 _document.tsx를 실행하여 html 형태로 출력한다.
head 태그 커스터마이징
Next.js는 페이지 제목을 커스텀하고 싶거나 meta 태그를 변경하고 싶을때, next/head로 부터 Head 컴포넌트를 받아 모든 컴포넌트에서 커스터마이징을 할 수 있음.
import Head from "next/head";
export default () => (
<div>
<Head>
<title>새로 만들어진 타이틀 입니다</title>
</Head>
<div>...</div>
</div>
);Next.js는 해당 컴포넌트를 mount 할 때 Head 내부의 태그들을 페이지 HTML의 Head에 포함 시키고, unMount 할때 해당 태그를 제거하게 된다.
마무리
이정도면 기본 개념에 대한 이론?은 간단하게 알아본거 같으니 이제 중요한 부분들을 하나씩 세세하게 공부해보아야 겠다. 지금까지 정리해둔 부분들은 일종의 목차? 라고 봐도 무방하다.
Next.js를 공부할 때 난이도가 어느정도 있을거라 예상했지만, 기본 개념을 이해하고
간단한 사용방법을 익히는건 react와 비슷한 구조를 갖고있어 생각보다 어렵지 않았던거 같다.
