SpreadJS with NextJS

SpreadJS supports NextJS, a react based framework, which lets you develop Web Applications for different platforms such as Windows, Linux and Mac. NextJS provides all the features you need for production, be it TypeScript support, hybrid static & server rendering, route pre-fetching or smart bundling.

For more information, refer to https://nextjs.org/docs/getting-started.

In this tutorial, we build a Next.js application that uses SpreadJS.

Note: The nodejs version installed should be greater than v14.

Create Next.js App

The easiest way to create a Next.js application is to use the Create Next App tool.

1. Run the following command from the command prompt or terminal to create a Next.js TypeScript project.

   npx create-next-app@latest nextjs-with-spreadjs --use-npm  

   When the terminal prompts the configuration messages, select the required option and press Enter to confirm. Wait a while as the terminal installs and creates the project.

2. Type the following commands in the terminal.

   cd nextjs-with-spreadjs
   npm run dev

3. Open http://localhost:3000 using a browser. Then you will see the welcome page of NextJS.

4. Close the current terminal. Open the nextjs-with-spreadjs folder using Visual Studio Code or an IDE.

Install SpreadJS

1. Install the SpreadJS package.

   npm install @grapecity/spread-sheets-react

   Create a folder called components, if it does not exist in the applications' root folder.

2. Create a JavaScript XML file called SpreadSheet.jsx and add it to the components folder with the following code into it.

   You can enter a valid SpreadJS license key before initializing the component.

   “use client“;
   
   import React, {  useState } from "react";
   import { SpreadSheets, Worksheet, Column } from "@grapecity/spread-sheets-react";
   import * as GC from "@grapecity/spread-sheets";
   
   // Licensing SpreadJS
   var SpreadJSKey = "xxx";          // Enter a valid license key.
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   export default function SpreadSheet() {
   
       const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
       const [sheetName, setSheetName] = useState('Empolyees');
       const [hostStyle, setHostStyle] = useState({
           width: '100%',
           height: '700px'
       });
       const dataArr = [
           {
               "jobTitleName": "Developer",
               "preferredFullName": "Romin Irani",
               "region": "CA",
               "phoneNumber": "408-1234567"
           },
           {
               "jobTitleName": "Developer",
               "preferredFullName": "Neil Irani",
               "region": "CA",
               "phoneNumber": "408-1111111"
           },
           {
               "jobTitleName": "Program Directory",
               "preferredFullName": "Tom Hanks",
               "region": "CA",
               "phoneNumber": "408-2222222"
           }
       ];
       const [data, setData] = useState(dataArr);
       const [columnWidth, setColumnWidth] = useState(200);
       return (
           <SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle}>
               <Worksheet name={sheetName} dataSource={data}>
                   <Column dataField='preferredFullName' width={columnWidth}></Column>
                   <Column dataField='jobTitleName' width={columnWidth}></Column>
                   <Column dataField='phoneNumber' width={columnWidth}></Column>
                   <Column dataField='region' width={columnWidth}></Column>
               </Worksheet>
           </SpreadSheets>);
   }

3. Change the index file content. Replace the default content of the app/page.tsx file with the following code.

   import dynamic from "next/dynamic";
   
   const SpreadSheet = dynamic(
     () => {
       return import("../components/SpreadSheet");
     },
     { ssr: false }
   );
   
   export default function Home() {
     return (
       <div>
         <h1>
         Next.JS + Spreadsheets demo
         </h1>
         <SpreadSheet />
       </div>
     )
   }

Import Styles

Import the SpreadJS CSS into the application by adding the following line in the globals.css file, which is present in the app folder.

@import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful';

Run and Test App

You can run the application by using the npm run dev commands. By default, the project runs at http://localhost:3000/.