Next.jsのローディングに関する方法

ローディング状態の管理: Next.jsでは、ページのロード中にローディング状態を表示する方法がいくつかあります。一般的な方法は、useStateフックを使用してローディング状態を管理することです。例えば、以下のようなコードでローディング状態を管理できます:

import { useState } from 'react';
function MyPage() {
  const [isLoading, setIsLoading] = useState(true);
  // データの取得や処理が完了したらisLoadingをfalseに設定する
  useEffect(() => {
    // データの取得や処理を行う
    // ...
    setIsLoading(false);
  }, []);
  return (
    <div>
      {isLoading ? 'ローディング中...' : 'コンテンツを表示'}
    </div>
  );
}
export default MyPage;

Next.jsの組み込みのローディングコンポーネント: Next.jsには、ページのロード中に表示されるデフォルトのローディングコンポーネントがあります。これは、_app.jsファイルでカスタマイズすることができます。以下のコードは、Next.jsのデフォルトのローディングコンポーネントをカスタマイズする例です:

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();
  useEffect(() => {
    const handleStart = () => {
      setIsLoading(true);
    };
    const handleComplete = () => {
      setIsLoading(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 (
    <div>
      {isLoading ? 'ローディング中...' : <Component {...pageProps} />}
    </div>
  );
}
export default MyApp;

3.外部のローディングライブラリの使用: Next.jsでは、外部のローディングライブラリを使用することもできます。例えば、React SpinnersやReact Loadingなどのライブラリをインストールして使用することができます。以下のコードは、React Spinnersを使用したローディングの例です:

import { useState, useEffect } from 'react';
import { css } from '@emotion/react';
import { RingLoader } from 'react-spinners';
function MyPage() {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    // データの取得や処理を行う
    // ...
    setIsLoading(false);
  }, []);
  return (
    <div>
      {isLoading ? (
        <div css={override}>
          <RingLoader color={'#123abc'} loading={isLoading} size={50} />
        </div>
      ) : (
        'コンテンツを表示'
      )}
    </div>
  );
}
const override = css`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;
export default MyPage;