Nextjs 13 configration

[hira aziz]

I need to few things Nextjs version has been updated and there is new folder structure.

https://ej2.syncfusion.com/react/documentation/getting-started/nextjs this documentation tells me getting started setup of nextjs 12 but now Iam working on nextjs 13. How can do this?

[Theveshwar Jayakumar]

Hi hira aziz,

Sorry for the delay caused!

Thank you for your query regarding the compatibility of Syncfusion React components with Next.js version 13. We appreciate your interest in using our components with the latest version of Next.js.

Yes, we would like to confirm that Syncfusion React components are compatible with Next.js version 13. We are testing all our components, and to get started, you can follow the provided detailed instructions on how to integrate Syncfusion React Spreadsheet components into your Next.js version 13 projects. You can find step-by-step guides and code examples for integrating the spreadsheet below.

For your convenience we have prepared a Next.js and attached below for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Ej2-SpreadSheet703434554.zip 

Stpe1:  Create a Next.js application.

To create a new "Next.js" application, use one of the commands that are specific to either NPM or Yarn.

npx create-next-app@latest

yarn create next-app

Using one of the above commands will lead you to set up additional configurations for the project as below:

Step 2: Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as "ej2-nextjs-spreadsheet".

1. What is your project named? » ej2-nextjs-spreadsheet.
2. Select the required packages.

√ What is your project named? ... ej2-nextjs-spreadsheet

√ Would you like to use TypeScript? ... No / `Yes`

√ Would you like to use ESLint? ... No / `Yes`

√ Would you like to use Tailwind CSS? ... `No` / Yes

√ Would you like to use `src/` directory? ... No / `Yes`

√ Would you like to use App Router? (recommended) ... No / `Yes`

√ Would you like to customize the default import alias? ... `No`/ Yes

Creating a new Next.js app in D:\ej2-nextjs-spreadsheet.

Step 3: Once completing the above mentioned steps to create "ej2-nextjs-spreadsheet", navigate to the directory using the below command:

cd ej2-nextjs-spreadsheet

The application is ready to run with default settings. Now, let's add Syncfusion components to the project.

Step 4: Install Syncfusion React packages.

Syncfusion React component packages are available at npmjs.com. To use Syncfusion React components in the project, install the corresponding npm package.

Here, the React Spreadsheet component is used in the project. To install the React Spreadsheet component, use the following command:

npm install @syncfusion/ej2-react-spreadsheet --save

yarn add @syncfusion/ej2-react-spreadsheet

Step 5: Import Syncfusion CSS styles.

Syncfusion React components come with built-in themes, which are available in the installed packages. It’s easy to adapt the Syncfusion React components to match the style of your application by referring to one of the built-in themes.

Import the `Material` theme into the "src/app/globals.css" file and removed the existing styles in that file, as shown below:

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-grids/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css';

To know more about built-in themes and CSS reference for individual components, refer to the themes section.

Step 6: Add Syncfusion React component.

Follow the below steps to add the React Spreadsheet component to the Next.js project:

Before adding the Spreadsheet component to your markup, create a "datasource.tsx" file within the "src/app/" folder and add the Spreadsheet component data.

export let defaultData: object[] = [

    {

        "Customer Name": "Romona Heaslip",

        "Model": "Taurus",

        "Color": "Aquamarine",

        "Payment Mode": "Debit Card",

        "Delivery Date": "07/11/2015",

        "Amount": "8529.22"

    },

    {

        "Customer Name": "Clare Batterton",

        "Model": "Sparrow",

        "Color": "Pink",

        "Payment Mode": "Cash On Delivery",

        "Delivery Date": "7/13/2016",

        "Amount": "17866.19"

    },

    {

        "Customer Name": "Eamon Traise",

        "Model": "Grand Cherokee",

        "Color": "Blue",

        "Payment Mode": "Net Banking",

        "Delivery Date": "09/04/2015",

        "Amount": "13853.09"

    },

    {

        "Customer Name": "Julius Gorner",

        "Model": "GTO",

        "Color": "Aquamarine",

        "Payment Mode": "Credit Card",

        "Delivery Date": "12/15/2017",

        "Amount": "2338.74"

    },

    {

        "Customer Name": "Jenna Schoolfield",

        "Model": "LX",

        "Color": "Yellow",

        "Payment Mode": "Credit Card",

        "Delivery Date": "10/08/2014",

        "Amount": "9578.45"

    },

    {

        "Customer Name": "Marylynne Harring",

        "Model": "Catera",

        "Color": "Green",

        "Payment Mode": "Cash On Delivery",

        "Delivery Date": "7/01/2017",

        "Amount": "19141.62"

    },

    {

        "Customer Name": "Vilhelmina Leipelt",

        "Model": "7 Series",

        "Color": "Goldenrod",

        "Payment Mode": "Credit Card",

        "Delivery Date": "12/20/2015",

        "Amount": "6543.30"

    },

    {

        "Customer Name": "Barby Heisler",

        "Model": "Corvette",

        "Color": "Red",

        "Payment Mode": "Credit Card",

        "Delivery Date": "11/24/2014",

        "Amount": "13035.06"

    },

    {

        "Customer Name": "Karyn Boik",

        "Model": "Regal",

        "Color": "Indigo",

        "Payment Mode": "Debit Card",

        "Delivery Date": "05/12/2014",

        "Amount": "18488.80"

    },

    {

        "Customer Name": "Jeanette Pamplin",

        "Model": "S4",

        "Color": "Fuscia",

        "Payment Mode": "Net Banking",

        "Delivery Date": "12/30/2014",

        "Amount": "12317.04"

    },

    {

        "Customer Name": "Cristi Espinos",

        "Model": "TL",

        "Color": "Aquamarine",

        "Payment Mode": "Credit Card",

        "Delivery Date": "12/18/2013",

        "Amount": "6230.13"

    },

    {

        "Customer Name": "Issy Humm",

        "Model": "Club Wagon",

        "Color": "Pink",

        "Payment Mode": "Cash On Delivery",

        "Delivery Date": "02/02/2015",

        "Amount": "9709.49"

    },

    {

        "Customer Name": "Tuesday Fautly",

        "Model": "V8 Vantage",

        "Color": "Crimson",

        "Payment Mode": "Debit Card",

        "Delivery Date": "11/19/2014",

        "Amount": "9766.10"

    },

    {

        "Customer Name": "Rosemaria Thomann",

        "Model": "Caravan",

        "Color": "Violet",

        "Payment Mode": "Net Banking",

        "Delivery Date": "02/08/2014",

        "Amount": "7685.49"

    },

    {

        "Customer Name": "Lyell Fuentez",

        "Model": "Bravada",

        "Color": "Violet",

        "Payment Mode": "Debit Card",

        "Delivery Date": "08/05/2016",

        "Amount": "18012.45"

    },

    {

        "Customer Name": "Raynell Layne",

        "Model": "Colorado",

        "Color": "Pink",

        "Payment Mode": "Credit Card",

        "Delivery Date": "05/30/2016",

        "Amount": "2785.49"

    },

    {

        "Customer Name": "Raye Whines",

        "Model": "4Runner",

        "Color": "Red",

        "Payment Mode": "Debit Card",

        "Delivery Date": "12/10/2016",

        "Amount": "9967.74"

    },

    {

        "Customer Name": "Virgina Aharoni",

        "Model": "TSX",

        "Color": "Pink",

        "Payment Mode": "Cash On Delivery",

        "Delivery Date": "10/23/2014",

        "Amount": "5584.33"

    },

    {

        "Customer Name": "Peta Cheshir",

        "Model": "Pathfinder",

        "Color": "Red",

        "Payment Mode": "Net Banking",

        "Delivery Date": "12/24/2015",

        "Amount": "5286.53"

    },

    {

        "Customer Name": "Jule Urion",

        "Model": "Charger",

        "Color": "Violet",

        "Payment Mode": "Debit Card",

        "Delivery Date": "11/20/2013",

        "Amount": "13511.91"

    },

    {

        "Customer Name": "Lew Gilyatt",

        "Model": "Bonneville",

        "Color": "Crimson",

        "Payment Mode": "Credit Card",

        "Delivery Date": "11/19/2013",

        "Amount": "6498.19"

    },

    {

        "Customer Name": "Jobey Fortun",

        "Model": "B-Series",

        "Color": "Blue",

        "Payment Mode": "Net Banking",

        "Delivery Date": "10/30/2014",

        "Amount": "10359.67"

    },

    {

        "Customer Name": "Blondie Crump",

        "Model": "Voyager",

        "Color": "Turquoise",

        "Payment Mode": "Credit Card",

        "Delivery Date": "04/06/2018",

        "Amount": "8118.39"

    },

    {

        "Customer Name": "Florentia Binns",

        "Model": "Grand Prix",

        "Color": "Orange",

        "Payment Mode": "Cash On Delivery",

        "Delivery Date": "10/13/2016",

        "Amount": "10204.37"

    },

    {

        "Customer Name": "Jaquelin Galtone",

        "Model": "Sunbird",

        "Color": "Red",

        "Payment Mode": "Net Banking",

        "Delivery Date": "10/22/2013",

        "Amount": "6528.06"

    },

    {

        "Customer Name": "Hakeem Easseby",

        "Model": "Mirage",

        "Color": "Crimson",

        "Payment Mode": "Debit Card",

        "Delivery Date": "9/12/2014",

        "Amount": "5619.25"

    },

    {

        "Customer Name": "Nickolaus Gidman",

        "Model": "XK",

        "Color": "Orange",

        "Payment Mode": "Debit Card",

        "Delivery Date": "05/12/2016",

        "Amount": "5091.43"

    },

    {

        "Customer Name": "Jenine Iglesia",

        "Model": "Accord",

        "Color": "Orange",

        "Payment Mode": "Debit Card",

        "Delivery Date": "09/03/2018",

        "Amount": "14566.08"

    },

    {

        "Customer Name": "Fax Witherspoon",

        "Model": "Range Rover Sport",

        "Color": "Orange",

        "Payment Mode": "Credit Card",

        "Delivery Date": "2/22/2018",

        "Amount": "5284.87"

    }

];

Step 7: Then, import and define the Spreadsheet component in the "src/app/page.tsx" file, as shown below:

'use client'

import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective, RowsDirective, RowDirective, CellsDirective, CellDirective, CellStyleModel, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';

import { defaultData } from './datasource';

 

export default function Home(this: any) {

  let spreadsheet!: SpreadsheetComponent;

  const boldRight: CellStyleModel = { fontWeight: 'bold', textAlign: 'right' };

  const bold: CellStyleModel = { fontWeight: 'bold' };

 

  function onCreated(): void {

    spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');

    spreadsheet.numberFormat('$#,##0.00', 'F2:F31');

  }

 

  return (

    <>

      <h2>Syncfusion React Spreadsheet Component</h2>

      <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open'

        saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save'

        ref={(Obj) => { spreadsheet = Obj as SpreadsheetComponent }} created={onCreated.bind(this)} >

        <SheetsDirective>

          <SheetDirective name="Car Sales Report">

            <RangesDirective>

              <RangeDirective dataSource={defaultData}></RangeDirective>

            </RangesDirective>

            <RowsDirective>

              <RowDirective index={30}>

                <CellsDirective>

                  <CellDirective index={4} value="Total Amount:" style={boldRight}></CellDirective>

                  <CellDirective formula="=SUM(F2:F30)" style={bold}></CellDirective>

                </CellsDirective>

              </RowDirective>

            </RowsDirective>

            <ColumnsDirective>

              <ColumnDirective width={180}></ColumnDirective>

              <ColumnDirective width={130}></ColumnDirective>

              <ColumnDirective width={130}></ColumnDirective>

              <ColumnDirective width={180}></ColumnDirective>

              <ColumnDirective width={130}></ColumnDirective>

              <ColumnDirective width={120}></ColumnDirective>

            </ColumnsDirective>

          </SheetDirective>

        </SheetsDirective>

      </SpreadsheetComponent>

    </>

  )

}

Step 8:  Run the application.

To run the application, use the following command:

npm run dev

yarn run dev

If you require any further assistance or have additional questions, please feel free to let us know.

Regards,

Theveshwar