Структура компонента для отображения прелоадера в Next.js может выглядеть примерно так:
```jsx
import { useState, useEffect } from 'react';
import styles from './Preloader.module.css';
const Preloader = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
// Имитация загрузки данных
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
loading ? (
<div className={styles.preloader}>
<div className={styles.loader}></div>
</div>
) : null
);
};
export default Preloader;
```
В данном примере используется хук `useState` из библиотеки React для создания состояния `loading`, которое указывает, должен ли отображаться прелоадер или нет. Также используется хук `useEffect`, который запускает эффект только при первом рендере компонента и после его монтирования. Внутри хука `useEffect` мы имитируем загрузку данных, установив состояние `loading` в `false` через 2 секунды.
Компонент прелоадера представляет собой простой `div`, у которого есть классы стилей `preloader` и `loader`. Стили можно определить в отдельном файле CSS или CSS-модуле.
Чтобы использовать компонент прелоадера на нужных вам страницах, вы можете импортировать его и разместить в нужном месте в JSX структуре вашей страницы. Например:
```jsx
import Preloader from './Preloader';
const HomePage = () => {
return (
<div>
<h1>Welcome to my page</h1>
<Preloader />
{/* остальной контент страницы */}
</div>
);
};
export default HomePage;
```
В данном примере прелоадер будет отображаться на странице до завершения имитации загрузки данных, после чего он пропадет и будет показан остальной контент страницы.
