В этой статье мы узнаем, как мы можем добавить звездный рейтинг в NextJS. NextJS — это структура, основанная на реакции. Он способен разрабатывать красивые веб-приложения для различных платформ, таких как Windows, Linux и mac.
Подход: Для добавления наших рейтингов мы будем использовать пакет react-stars. Пакет react-stars помогает нам интегрировать различные типы рейтингов. Поэтому сначала мы установим пакет react-stars, а затем добавим звездные рейтинги на нашу домашнюю страницу.
Создайте приложение NextJS: Вы можете создать новый проект NextJS, используя приведенную ниже команду:
npx create-next-app gfg
Установите необходимый пакет: Теперь мы установим пакет react-stars, используя приведенную ниже команду:
npm i react-stars
Структура проекта: Это будет выглядеть так.
Добавление звездных рейтингов: После установки пакета мы можем легко добавлять оценки в наше приложение. Для этого примера мы добавим звездные рейтинги на нашу домашнюю страницу.
import React from 'react';
import ReactStars from 'react-stars'
export default function SkeletonLoading(){
return (
<div>
<h2>NextJs Star Ratings - GeeksforGeeks</h2>
<ReactStars
count={5}
size={24}
color2={'#ffd700'} />
</div>
)
}
Пояснение: В приведенном выше примере сначала мы импортируем наш компонент ReactStars из установленного пакета. После этого мы используем компонент и устанавливаем количество, размер и цвет. Затем мы показываем Звездные рейтинги.
Шаги для запуска приложения: Выполните приведенную ниже команду в терминале, чтобы запустить приложение.
npm run dev