How to Add a Star Rating Component in NextJS?

We can add a star rating feature in NextJS by using a library such as react-star-rating. This library allows us to easily display a star rating system and allows for customization of the number of stars and the ability to handle user interactions.Next.js is an open-source web development framework. The Next.js is React Based framework with server side rendering capability. Both speed and SEO are excellent. You can simply build and test sophisticated react-based applications using Next.js.

Next.js is written in Typescripts. It offers a Link component that links other components together and has a prefetch property that allows for background prefetching of page resources. It enables dynamic import of React Components and JavaScript modules. Additionally enables you to export your web application's entire static site.

Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript.

To get started first create a new NextJS app and run it on our dev server like this −

npx create-next-app rating-app
cd phone-input
npm start

Approach

• First, install the react-star-rating-component package using npm or yarn −

npm install react-star-rating-component

• In the component where you want to add the star rating, import the StarRating component and useState hook from react −

import StarRating from 'react-star-rating-component';
import { useState } from 'react';

• In the component, define a state variable to store the current rating and a function to handle the onStarClick event −

const [rating, setRating] = useState(0);
const handleStarClick = (nextValue, prevValue, name) => {
   setRating(nextValue);
}

• In the JSX code, use the StarRating component and set the required props such as value and onStarClick −

<StarRating 
   value={rating} 
   onStarClick={(nextValue, prevValue, name) => handleStarClick(nextValue, prevValue, name)}
/>

• Optional −You can also customize the appearance of the star rating component by passing additional props such as starCount, starColor, emptyStarColor, etc.

<StarRating 
   value={rating} 
   onStarClick={(nextValue, prevValue, name) => handleStarClick(nextValue, prevValue, name)}
   starCount={5}
   starColor={'#ffb400'}
   emptyStarColor={'#ccc'}
/>

• Make sure to include the necessary CSS for the StarRating component. The package documentation provides a sample CSS file that can be used for styling.

• Finally, include the StarRating component in your JSX code and test it out. The users should now be able to select a rating and the value will be updated in the state.

Example

Therefore, the final code for the rating component app will be −

StarRating.js

import React, { useState } from 'react';
import Rating from 'react-star-rating-component';
function StarRating(){
   const [rating, setRating] = useState(0);
   const handleStarClick = (nextValue, prevValue, name) => {
      setRating(nextValue);
   }
   return (
      <div>
         <Rating
            value={rating}
            onStarClick={(nextValue, prevValue, name) => handleStarClick(nextValue, prevValue, name)}
            starCount={5}
            starColor={'#ffb400'}
            emptyStarColor={'#ccc'}
         />
      </div>
   )
}
export default StarRating;

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import StarRating from "./StarRating";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
   <StrictMode>
      <StarRating />
   </StrictMode>
);

Output