Realization of Online Excel Based on Next.js

What are the steps required to build a complete web application with React from scratch?
Of course, this is not as simple as putting the elephant in the refrigerator. It only needs to be divided into three steps: open the refrigerator, pick up the elephant, and put it in the refrigerator.

There are many details we need to consider, such as:

• The code must be packaged using a bundler such as webpack and transpiled using a compiler such as Babel.
• Requires optimizations for production environments, such as code splitting.
• Some pages need to be pre-rendered to improve page performance and SEO, and you may also want to use server-side rendering or client-side rendering.
• Some server-side code must be written to connect the React application to the data store.
  These problems are all we need to pay attention to, but the emergence of Next.js perfectly solves these problems, and can be won with one framework.
  The Next.js framework has the right level of abstraction and an excellent "developer experience", including static and server-side fusion rendering, support for TypeScript, intelligent packaging, route prefetching and other functions, without any configuration, out of the box, these contents Let the development team have a silky "rainy day with chocolate" experience when writing code.

Meet Next.js

Next.js is a React development framework that helps us build React applications. As a lightweight React server-rendered application framework, it has many built-in features, including but not limited to:

• Intuitive, page-based routing system (and supports dynamic routing)
• Pre-rendering - supports static generation (SSG) and server-side rendering (SSR) at the page level
• Automatic code splitting to improve page loading speed
• Client-side routing with optimized prefetching
• Built-in CSS and Sass support, and support for any CSS-in-JS library
• Development environment supports fast refresh
• Building API functions with Serverless Functions and API routing
• Fully scalable Currently, Next.js is being used in tens of thousands of websites and web applications, including many world-renowned companies and leading brands. It can be said that its visible ease of use has firmly grasped the hearts of users. Whether it is for enterprise users or small and micro developers, it provides corresponding solutions from basic framework to release operation and maintenance.

Next, we will take you to realize the function of online table editing of Excel-like controls based on Next.js.

combat tour

First you need to install Node.js, and the Node.js version needs to be higher than 10.13,
The installation process can refer to: https://nodejs.org/en/
Once installed, you can create your Next.js application.
Open a terminal window, go to the program directory where the application was created, and execute the following commands:

 # 其背后的工作是通过调用create-next-app工具完成的，该工具会创建一个Next.js应用程序。
npx create-next-app nextjs-spreadjs

After the installation is complete, execute npm run dev . If the project can be started normally, it means that the project has been created normally. By default, the created project will be started on port 3000, as shown below:

Then you can delete some unnecessary content elements in index.js under the project pages, and load the Excel-like table control we wrote next under the project path.

The final display effect is as follows:

The red area is the main body of the table, and the toolbar above is the online table editor. In the actual project, we can introduce the component runtime separately, or we can import all the online table editing area (the online table editor will contain a runtime associated with it).
First, we need to add the following dependencies to package.json:

 "@grapecity/spread-sheets": "15.1.0",
"@grapecity/spread-sheets-react": "15.1.0",
"@grapecity/spread-excelio": "15.1.0",
"@grapecity/spread-sheets-charts": "15.1.0",
"@grapecity/spread-sheets-print": "15.1.0",
"@grapecity/spread-sheets-pdf": "15.1.0",
"@grapecity/spread-sheets-barcode": "15.1.0",
"@grapecity/spread-sheets-shapes": "15.1.0",
"@grapecity/spread-sheets-resources-zh": "15.1.0",
"@grapecity/spread-sheets-languagepackages": "15.1.0",
"@grapecity/spread-sheets-pivot-addon": "15.1.0",
"@grapecity/spread-sheets-tablesheet": "15.1.0",
"@grapecity/spread-sheets-designer": "15.1.0",
"@grapecity/spread-sheets-designer-resources-cn": "15.1.0",
"@grapecity/spread-sheets-designer-react": "15.1.0"

Next, we create a new components folder in the project root directory and create the OnlineDesigner.js file. In this file, we introduce the resources related to spreadjs and introduce the component runtime. The detailed code is as follows:

 import React,{useState,useEffect} from "react"
import '@grapecity/spread-sheets-resources-zh';
import GC from '@grapecity/spread-sheets'
import {SpreadSheets,Worksheet} from '@grapecity/spread-sheets-react'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css'
GC.Spread.Common.CultureManager.culture("zh-cn");




export default function OnlineSpread(){
    const [spread,setSpread] = useState(null)
    const initSpread = (entity) => {
        setSpread(entity)
        //获取活动工作表

        let sheet = entity.getActiveSheet()
        //设置数据
        sheet.setValue(0,0,'Grapecity')
    }
    return(
        <>
            <SpreadSheets
                hostStyle={{height:'98vh'}}
                workbookInitialized={initSpread}
            ></SpreadSheets>
        </>
       
    )
}

After the creation is complete, we need to introduce the defined components in index.js in the pages directory. It should be noted here that when introducing components, do not use server-side rendering (SSR), otherwise there will be an error of document undefined. This error is generally related to the inability of nodejs to operate DOM objects. The specific introduction method is:

 const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{
  ssr: false
})

引入完成之后，我们就可以在当前页面中使用了，精简index.js中的代码，最终代码如下：
import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'


const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{
  ssr: false
})


const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{
  ssr: false
})


export default function Home() {
  return (
    <div>
        <Head>
          <title>Nextjs-SPreadJS</title>
          <meta name="description" content="Generated by create next app" />
        </Head>
        <OnlineSpread/>
    </div>
     
  )
}

Execute npm run dev, the display effect is as follows:

Next. We need to continue to create a new OnlineDesigner.js under the components folder to introduce the online form editor:

 import React,{useState,useEffect} from "react"
import '@grapecity/spread-sheets-designer-resources-cn';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-barcode";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-languagepackages";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-pdf";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import {Designer} from '@grapecity/spread-sheets-designer-react';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
GC.Spread.Common.CultureManager.culture('zh-cn')

export default function OnlineDesigner(){
    const [designer,setDesigner] = useState(null)
    const initDesigner = (entity) => {
        setDesigner(entity)
        let spread = entity.getWorkbook()
        let sheet = spread.getActiveSheet()
        sheet.setValue(0,0,'Grapecity')
    }
    return(
        <>
            <Designer
                styleInfo={{height:'98vh'}}
                designerInitialized={initDesigner}
            ></Designer>
        </>
       
)

}

After the writing is complete, the integration can be introduced in index.js:

 import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'

const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{
  ssr: false
})

export default function Home() {
  return (
    <div>
        <Head>
          <title>Nextjs-SPreadJS</title>
          <meta name="description" content="Generated by create next app" />
        </Head>
       {/* <OnlineSpread/> */}
       <OnlineDesigner/>
    </div>
     
  )
}

Execute npm run dev, the display effect is as follows:

Here we have successfully completed the online form editing function based on Next.js.
The example in this article gets the address: https://gitee.com/GrapeCity/nextjs-spreadjs

If you are interested in more application examples, you can check:
https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html