How to add Downloadable Spreadsheet in Next.js ?

Adding a downloadable spreadsheet in a Next.js application involves several steps, including generating the spreadsheet file and providing a download link to the user. In this article, we are going to learn how we can add a downloadable spreadsheet in NextJS.

Approach

To add our downloadable spreadsheet we are going to use the react-xls package. The react-xls package helps us to add a downloadable spreadsheet anywhere in our app. So first, we will install the react-xls package and then we will add a downloadable spreadsheet on our homepage.

Steps to Create NextJS App

Step 1: Initialize a new Next.js Project using the below command:

npx create-next-app gfg

Step 2: Switch to the project directory

cd gfg

Step 3: Install the required package

Now we will install the react-xls package using the below command:

npm i react-xls

Project Structure:

The updated dependencies in the package.json file.

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-xls": "^0.1.1"
}

Example: This example demonstrates how to add Doenloadable Spreadsheet feature in next.js app with the help of react-xls package from npm.

// Filename - pages/index.js

import React from "react";
import { useExcelDownloder } from "react-xls";

function App() {
    const { ExcelDownloder, Type } = useExcelDownloder();

    const data = {
        Data1: [
            { name: "gfg1", category: "gfg4" },
            { name: "gfg2", category: "gfg5" },
            { name: "gfg3", category: "gfg6" },
        ],
        // Worksheet named pokemons
        Data2: [
            { name: "gfg1", category: "gfg1" },
            { name: "gfg1", category: "gfg1" },
            { name: "gfg1", category: "gfg1" },
        ],
    };

    return (
        <div>
            <h3>GeeksforGeeks - Downloadable Spreadsheet</h3>
            <ExcelDownloder
                data={data}
                filename={"book"}
                type={Type.Button} // or type={'button'}
            >
                Download the Spreadsheet
            </ExcelDownloder>
        </div>
    );
}

export default App;

Explanation: In the above example first, we are importing the useExcelDownloader from the installed package. After that, we are creating a new data variable in which we will store the data for our spreadsheet. Then we will add this data in a downloadable spreadsheet using the useExcelDownloader.

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

npm run dev

Output: