В современных веб-приложениях крайне важно обеспечить удобство и привлекательный пользовательский интерфейс. Один из способов добиться этого — реализовать индикатор загрузки страницы. Индикатор загрузки страницы информирует пользователей о загрузке контента, уменьшая путаницу и разочарование. В этой статье мы рассмотрим различные методы реализации индикатора загрузки страницы в Next.js, популярной среде React. Мы обсудим различные подходы и приведем примеры кода, которые помогут вам улучшить взаимодействие с пользователем в ваших приложениях Next.js.

Метод 1: CSS Spinner
Один простой подход — использовать CSS для создания анимации счетчика, указывающей состояние загрузки. Вот пример:

// styles.css
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
// Page component
import React from 'react';
import styles from './styles.css';
const MyPage = () => {
  return (
    <div>
      {isLoading && <div className={styles.loader}></div>}
      {/* Rest of the page content */}
    </div>
  );
};
export default MyPage;

Метод 2: библиотека NProgress
NProgress — популярная библиотека JavaScript для создания индикаторов загрузки страниц. Он предоставляет простой API для отображения и скрытия индикаторов прогресса. Чтобы использовать NProgress с Next.js, выполните следующие действия:

Шаг 1. Установите пакет NProgress:

npm install nprogress

Шаг 2. Создайте файл _app.jsв каталоге pages:

// pages/_app.js
import React from 'react';
import Router from 'next/router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import './styles.css';
Router.events.on('routeChangeStart', () => {
  NProgress.start();
});
Router.events.on('routeChangeComplete', () => {
  NProgress.done();
});
Router.events.on('routeChangeError', () => {
  NProgress.done();
});
const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};
export default MyApp;

Метод 3: скелет загрузки React
React Loading Skeleton — это библиотека, которая помогает создавать заполнители загрузки в виде скелетов. Он обеспечивает эффект плавного перехода при загрузке фактического контента. Вот пример:

Шаг 1. Установите пакет React Loading Skeleton:

npm install react-loading-skeleton

Шаг 2. Используйте скелет загрузки React в компоненте страницы:

import React from 'react';
import Skeleton from 'react-loading-skeleton';
const MyPage = () => {
  return (
    <div>
      {isLoading ? (
        <Skeleton height={200} />
      ) : (
        /* Render the actual content */
      )}
    </div>
  );
};
export default MyPage;

Внедрение индикатора загрузки страницы — это эффективный способ улучшить взаимодействие с пользователем ваших приложений Next.js. В этой статье мы рассмотрели три различных метода: использование счетчиков CSS, использование библиотеки NProgress и использование библиотеки React Loading Skeleton. Каждый метод имеет свои преимущества и может быть адаптирован в соответствии с вашими конкретными требованиями. Включив индикатор загрузки страницы, вы можете сделать свои приложения Next.js более интересными и удобными для пользователей.