[next.js]Link, pre-fetching, fallback

Link

• next/link
• 클라이언트 사이드 렌더링 방식의 링크 생성

---

programmatic navigation

• => push
• => replace : 뒤로가기를 방지하며 페이지 이동
• => back : 페이지 뒤로가기

import { useRouter } from "next/router";
...
const router = useRouter();
const onClickbutton = () => {
   router.push("/test");
};

---

인텔리센스 : 코드 문법 자동 완성 기능

---

Pre-fetching

• 사전에 페이지를 미리 불러옴
• 빠른 페이지 이동을 위해 제공되는 기능
• 연결된 모든 페이지의 JS Bundle 불러옴

---

API Routes

Next.js에서 API를 구축할 수 있게 해주는 기능

---

@경로

src 폴더를 가리킴

import book from "@/mock/books.json";

 

---

SSG에서 fallback옵션 : 없는 경로로 요청시 옵션 설정

• false : path에 설정하지 않은 경로는 모두 404
• blocking : SSR 방식으로 실시간 페이지 생성(사전 렌더링)
• true : fallback 상태의 페이지(props 데이터가 없는 상태의 페이지)부터 생성해서 보내줌

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: false,
  };
};

---

router.isFallback

로딩중일때

const Page = ({ book }: InferGetStaticPropsType<typeof getStaticProps>) => {
  const router = useRouter();
  if (router.isFallback) return "로딩중입니다";
  if (!book) return "문제가 발생했습니다";
  ...
};

---

notFound

설정하지 않은 경로로 이동시 404에러페이지를 보여주고 싶을때

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const id = context.params!.id;
  const book = await fetchOneBook(Number(id));
  if (!book) {
    return { notFound: true };
  }
  ...
};