sanguk.dev
작성완료
NextJS 페이지 전환 로딩처리

NextJS 페이지 전환 로딩처리

로딩 컴포넌트를 생성하고 NextJS의 페이지 전환 시 로딩 상태를 관리하는 방법을 설명합니다. Loading.tsx에서 로딩 컴포넌트를 만들고, page.tsx에서 라우터 이벤트를 사용하여 로딩 상태를 설정합니다.

NextJS

1. 로딩 컴포넌트 생성

/src/components/Loading.tsx

typescript
export default () => (
  <Loading>
    <Spinner />
  </Loading>
)

2. 로딩 상태 및 컴포넌트 적용

/src/app/page.tsx

typescript
import { useEffect, useState } from "react";
import Router from "next/router";
import Loading from "@/components/Loading";

export default () => {
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    const start = () => setLoading(true);
    const end = () => setLoading(false);

    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);

    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);

  return (
    <Layout>
      {loading ? <Loading /> : <Component {...pageProps} />}
    </Layout>
  );
}