페이지 전환 시 로딩 상태 사용하기

[punchdrunkard]

next/router 를 이용합니다.

Example

import { useRouter } from 'next/router';

// 해당 내용을 사용할 컴포넌트
const Loading = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(()=>{
    const handleStart = (url: string) => url !== router.asPath && setLoading(true);
    const handleComplete = (url: string) => url === router.asPath && setLoading(false);

  router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  });

  return  loading && /* 로딩 상태일 때 보여줄 컴포넌트 */ ;
}

관련 PR

• feat: 페이지 전환 시 로딩 컴포넌트 추가 #331

참고 자료

Next.js getServerSideProps loading state

[punchdrunkard]

저는 컴포넌트로 만들었지만, 커스텀 훅으로 만들 수도 있겠네요.

출처 : https://stackoverflow.com/questions/60755316/nextjs-getserversideprops-show-loading/73251000#73251000

import Router from 'next/router';
import { useEffect, useState } from 'react';

export const usePageLoading = () => {
  const [isPageLoading, setIsPageLoading] = useState(false);

  useEffect(() => {
    const routeEventStart = () => {
      setIsPageLoading(true);
    };
    const routeEventEnd = () => {
      setIsPageLoading(false);
    };

    Router.events.on('routeChangeStart', routeEventStart);
    Router.events.on('routeChangeComplete', routeEventEnd);
    Router.events.on('routeChangeError', routeEventEnd);
    return () => {
      Router.events.off('routeChangeStart', routeEventStart);
      Router.events.off('routeChangeComplete', routeEventEnd);
      Router.events.off('routeChangeError', routeEventEnd);
    };
  }, []);

  return { isPageLoading };
};