TIL | NEXTjs Build indicator 대신 Loading spinner로 변경하기

NEXTjs Build indicator 대신 Loading spinner로 변경하기

• Nextjs에서 페이지 이동시 혹은 페이지 진입시 build 과정 동안 우측 하단에 나타나는 Build indicator 대신 페이지의 Loading Spinner 를 띄우기 위해 공식 문서를 참조하여 적용해보았다.

Build Activity deActivate

// next.config.js
module.exports = {
  devIndicators: {
    buildActivity: false,
  },
};

• build indicator를 비활성화하기 위해 next.config.js에서 위와 같이 설정해주었다.

---

 

Loading spinner

import React, { useState, useEffect } from "react";
//
const HeaderPresenter = (): JSX.Element => {
  const router = useRouter();
  const [isPageLoading, setIsPageLoading] = useState<boolean>(false);
  //
  useEffect(() => {
    router.events.on("routeChangeStart", () => {
      setIsPageLoading(true);
    });
    //
    router.events.on("routeChangeComplete", () => {
      setIsPageLoading(false);
    });
  }, [router]);
  //
  return (
    <StyledHeaderPresenter>
      {isPageLoading && <PageLoadingSpinner />}
      <StyledMainHeaderConents />
    </StyledHeaderPresenter>
  );
};
export default HeaderPresenter;

• useRouter에서 제공하는 route,events.on, 즉 페이지를 이동할때(route가 변경될 때) 상탯값에 따라서 Loading spinner가 렌더링이 되도록 지정해주었다.

---

 

Reference

• Build Indicator - Next.js Docs
• Router events - Next.js Docs