Как сделать индикатор загрузки при переходе между страницами NextJS

Шаг 1: Создание компонента Preloader

Создайте новый файл Preloader.js в папке components вашего проекта:

const Preloader = () => {
  return <div className="preloader">Загрузка...</div>;
};

export default Preloader;

Шаг 2: Стилизация Preloader

Добавьте стили для компонента Preloader. Создайте файл preloader.module.css в той же папке, где находится компонент Preloader:

.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  color: white;
  font-size: 1.5rem;
}

Шаг 3: Использование Preloader

Теперь вам нужно включить этот Preloader в ваше приложение, чтобы он появлялся во время загрузки новой страницы. Отредактируйте файл _app.js в папке pages следующим образом:

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Preloader from '../components/Preloader';
import styles from '../components/preloader.module.css';

function MyApp({ Component, pageProps }) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const handleStart = () => {
      setLoading(true);
    };
    const handleComplete = () => {
      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 (
    <div>
      {loading && <Preloader />}
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

Заключение

Теперь у вас есть простой preloader, который будет появляться во время загрузки новой страницы в Next.js. Пользователи будут видеть индикатор загрузки, что улучшит их впечатление от работы с вашим веб-приложением.