Собственный прелоадер для NextJs

Йо! Я сейчас переделываю свой блог на nextjs и мне понадобился прелоадер. В интернете есть информация, но она несколько устарела. Мой пример будет демонстрировать как сделать прелоадер на хуках nextjs.

Прежде всего вам нужно найти прелоадер, который вы хотите видеть. Один из вариантов я показывал в другой статье.

Создаём файл _app.jsx

Если вы не делали этого, то в папке pages создайте файл _app.jsx. Там нужно написать всего лишь вот это:

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Импортируем хук роутера

Добавляем импорт хуков из react и next

import { useRouter } from "next/router";
import { useState, useEffect } from "react";

Добавляем обработку событий роутера и управление состоянием

import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import { Preloader } from "features/Preloader";

function MyApp(appProps) {
  const { Component, pageProps } = appProps;

  // Состояние загрузки 
  const [loading, setLoading] = useState<boolean>(false);

  const router = useRouter();

  useEffect(() => {
    // Обработка начала загрузки
    router.events.on("routeChangeStart", () => {
      setLoading(true);
    });

    // Обработка окончания загрузки
    router.events.on("routeChangeComplete", () => {
      setLoading(false);
    });
  }, []);

  return (
    <>
      {
        // Если загружается то показываем прелоадер
        loading && <Preloader />
      }
      <Component {...pageProps} />
    </>
  );
}

export default MyApp

Вот так просто! Если хотите посмотреть как это работает, то переходите на https://express.xakplant.ru/