Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to add Skeleton Loading in NextJS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we are going to learn how we can add Skeleton Loading in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.

Approach: To add our skeleton loading we are going to use the react-loading-skeleton package. The react-loading-skeleton package helps us to add a skeleton loading anywhere in our app. So first, we will install the react-loading-skeleton package and then we will add a loading screen on our homepage.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg


Install the required package: Now we will install the react-loading-skeleton package using the below command:

npm i react-loading-skeleton

Project Structure: It will look like this.

Adding the Skeleton Loading: After installing the package we can easily add loading to our app. For this example, we are going to add a skeleton loading to our homepage.


import React, { useState } from 'react';
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
export default function SkeletonLoading(){
  const [checked, setChecked] = React.useState(false);
  const handleChange = () => {
  return (
      <p>{checked?<Skeleton />: 
           NextJs Skeleton Loading - GeeksforGeeks

Explanation: In the above example first, we are importing our Skeleton component from the installed package. After that, we are using the Skeleton component inside a new function. We are also using react hook to check the current value in the checkbox. If the checkbox is checked then we are showing our loading screen.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev


My Personal Notes arrow_drop_up
Last Updated : 02 Feb, 2023
Like Article
Save Article
Similar Reads
Related Tutorials