The world's No. 1 Excel Component for Next.js Developers.

1. Go to the Next.js app folder and install the SpreadJS library.

npm install @mescius/spread-sheets-react

2. Add a css file to apply SpreadJS styles.

Access the global.css file of the Next.js app you are working on and add the SpreadJS css file.

Add the CSS file with the desired style from among the various CSS files. (Check the entire theme)

// app/global.css

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

3. Create a file called SpreadSheet.jsx.

Create a SpreadSheet.jsx file in the components folder in the root folder of your application.

* If the components folder does not exist, create the components folder.

4. SpreadJS does not support server-side rendering (SSR), so configure the component to render only on the client side.

Add the following directive to the components/SpreadSheet.jsx file.

'use client';

5. Add the SpreadJS module.

Add the SpreadJS module to the components/SpreadSheet.jsx file as follows.

import { SpreadSheets } from  '@mescius/spread-sheets-react';

import  *  as  GC  from  '@mescius/spread-sheets';

6. Set the Korean cultural sphere.

1) Install resource package. ex) Korean

npm install @mescius/spread-sheets-resources-ko

2) Add code to import the Korean resource package to the components/SpreadSheet.jsx file.

// components/SpreadSheet.tsx

import    '@mescius/spread-sheets-resources-ko'     ;

3) Add the code below.

// components/SpreadSheet.tsx

GC.Spread.Common.CultureManager.culture("ko-kr");

7. Initialize the SpreadJS control and add it to the screen.

Initialize the SpreadJS control and write code to display it on the screen.

Please check the detailed code in the sample below.

8. Run the Next.js app to see the results.

npm run dev

When you run the Next.js app, you will see that the spreadsheet has been added as shown below.