Как добавить Звездный рейтинг в NextJS ?

В этой статье мы узнаем, как мы можем добавить звездный рейтинг в 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 из установленного пакета. После этого мы используем компонент и устанавливаем количество, размер и цвет. Затем мы показываем Звездные рейтинги.

Шаги для запуска приложения: Выполните приведенную ниже команду в терминале, чтобы запустить приложение.