# SpreadJS with NextJS

How to use SpreadJS in a NextJS web application

## Content

SpreadJS supports NextJS, a react-based framework that 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](https://nextjs.org/docs/getting-started).
In this tutorial, we build a Next.js application that uses SpreadJS.

>type=note
> <strong>Note</strong>: SpreadJS now supports NextJS version 16. To create a Next.js application, ensure the Node.js version installed should be 20.9 or later.

## Create Next.js App

To create a Next.js application, the easiest option is to use the `create-next-app` command on the CLI tool, Before creating the project, make sure Node.js and npm are installed.

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

    ```bash
    npx create-next-app@latest
    ```
2. Enter the project name, such as *nextjs-with-spreadjs*.
3. When the terminal prompts the configuration messages, select the required option and press the Enter key to confirm.
    Wait a while as the terminal installs and creates the project.

    > Next.js 16 uses Turbopack as the default bundler. You no longer need to opt in — it is enabled automatically for both development and production builds.
4. Once the dependencies are installed, type the following commands in the terminal to start the project.

    ```bash
    cd nextjs-with-spreadjs
    npm run dev
    ```
5. Open http://localhost:3000 using a browser. Then you will see the welcome page of NextJS.
6. Close the current terminal and open the *nextjs-with-spreadjs* folder using Visual Studio Code or an IDE.

## Install SpreadJS

1. Install the SpreadJS package.

    ```bash
    npm install @mescius/spread-sheets-react
    ```
2. Create a TypeScript file called *spreadsheet.tsx* and add it to the app folder with the following code into it.

    ```typescript
    'use client';
    
    import React, { useState } from "react";
    import { SpreadSheets, Worksheet, Column } from "@mescius/spread-sheets-react";
    import * as GC from "@mescius/spread-sheets";
    
    // Optional: Set your SpreadJS license key
    var SpreadJSKey = "your-license-key";
    GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    export default function SpreadSheet() {
    
        const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
        const [sheetName, setSheetName] = useState('Employees');
        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 Director",
                "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.

    ```typescript
    'use client';
    import dynamic from "next/dynamic";
    
    const SpreadSheet = dynamic(
      () => {
        return import("./spreadsheet");
      },
      { ssr: false }
    );
    
    export default function Home() {
      return (
        <div>
          <h1>
            Next.JS 16 + SpreadJS demo
          </h1>
          <SpreadSheet />
        </div>
      )
    }
    ```

>type=info
> `next/dynamic` with `ssr: false` is required because SpreadJS relies on browser-specific APIs (`window`, `document`, Canvas). SSR must be disabled for the SpreadSheet component. Make sure `next/dynamic` with `ssr: false` is used inside a Client Component (marked with `'use client'`).

## Import SpreadJS in Next.js 16

When using Next.js 16 with Turbopack, we recommend importing the SpreadJS core package using the default import syntax:

```javascript
import GC from "@mescius/spread-sheets";
```

Avoid using the namespace import form:

```javascript
import * as GC from "@mescius/spread-sheets";
```

In some Next.js 16 environments, the namespace import may prevent SpreadJS add‑on packages (such as Pivot or Report) from correctly extending the `GC` object. As a result, certain namespaces (for example, `GC.Pivot` or `GC.Report`) may appear to be undefined even though the corresponding add‑on package has been installed.
Using the default import ensures that add‑on modules can properly attach their functionality to the SpreadJS core object.

## 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.

```bash
@import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
```

## 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/.