Creating a Next.js Application Using Syncfusion React Components

13 Sep 202510 minutes to read

This section explains how to set up a Next.js application and add the Syncfusion® React Pivot Table component. Follow these steps to create a user-friendly web application with the Pivot Table for data analysis.

What is Next.js?

Next.js is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications.

Prerequisites

To begin building a Next.js application with the Syncfusion® React Pivot Table, ensure the following requirements are met:

  • Node.js 16.8 or a later version installed on your system.
  • A compatible operating system, such as macOS, Windows, or Linux.

Create a Next.js application

To start a new Next.js application, run one of the following commands using either NPM or Yarn. These commands set up a new project with the necessary files and structure.

npx create-next-app@latest
yarn create next-app

After running the command, you will be prompted to configure your project with the following steps:

  1. Name your project: Users can specify the name of the project directly. Let’s specify the name of the project as ej2-nextjs-pivotview.
√ What is your project named? » ej2-nextjs-pivotview
  1. Choose project settings: Select options to customize your project setup. The prompts will ask about using TypeScript, ESLint, Tailwind CSS, a src/ directory, App Router, and import alias customization.
√ What is your project named? ... ej2-nextjs-pivotview
√ 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-pivotview.
  1. Navigate to the project folder: Once the setup is complete, move to the project directory using the command below:
cd ej2-nextjs-pivotview

Your Next.js application is now set up and ready to include Syncfusion® React components, such as the Pivot Table.

Install Syncfusion® React packages

To use the Syncfusion® React Pivot Table component, you need to install its npm package. The package is available on npmjs.com and provides the necessary files to add the Pivot Table component to your Next.js application. Run one of the following commands to install the package:

npm install @syncfusion/ej2-react-pivotview --save
yarn add @syncfusion/ej2-react-pivotview

The provided code installs the Syncfusion React Pivot Table package. The --save flag in the npm command ensures the package is added to your project’s dependencies. Using yarn achieves the same result with a different package manager.

Import Syncfusion® CSS styles

Syncfusion® React components include built-in themes that you can easily apply to style your Pivot Table. These themes are available in the installed Syncfusion packages and can be imported to match your application’s look. To use the Material theme, import its CSS files into the src/app/globals.css file after removing any existing styles, as shown below:

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-buttons/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-inputs/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-splitbuttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-react-pivotview/styles/material.css';

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

Add Syncfusion® React component

This section guides you through adding the Syncfusion® React Pivot Table component to your Next.js project. Follow these steps to set up the data and display the component in your application.

  1. First, create a file named datasource.tsx in the src/app/ folder. This file will hold the data for the Pivot Table component. Add the following sample data to populate the table:
export let pivotData: object[] = [
    { 'In_Stock': 42, 'Sold': 80, 'Amount': 2460, 'Country': 'Germany', 'Product_Categories': 'Accessories', 'Products': 'Hydration Packs', 'Order_Source': 'Retail Outlets', 'Year': 'FY 2015', 'Quarter': 'Q1' },
    { 'In_Stock': 19, 'Sold': 16, 'Amount': 184, 'Country': 'Germany', 'Product_Categories': 'Accessories', 'Products': 'Fenders', 'Order_Source': 'Retail Outlets', 'Year': 'FY 2015', 'Quarter': 'Q1' },
    { 'In_Stock': 36, 'Sold': 25, 'Amount': 188, 'Country': 'Germany', 'Product_Categories': 'Accessories', 'Products': 'Bottles and Cages', 'Order_Source': 'Retail Outlets', 'Year': 'FY 2015', 'Quarter': 'Q1' },
    { 'In_Stock': 6, 'Sold': 51, 'Amount': 229.5, 'Country': 'Germany', 'Product_Categories': 'Accessories', 'Products': 'Cleaners', 'Order_Source': 'Retail Outlets', 'Year': 'FY 2015', 'Quarter': 'Q1' },
    { 'In_Stock': 47, 'Sold': 337, 'Amount': 1110, 'Country': 'Germany', 'Product_Categories': 'Clothing', 'Products': 'Vests', 'Order_Source': 'App Store', 'Year': 'FY 2017', 'Quarter': 'Q4' },
    { 'In_Stock': 14, 'Sold': 535, 'Amount': 10165, 'Country': 'United States', 'Product_Categories': 'Accessories', 'Products': 'Tires and Tubes', 'Order_Source': 'App Store', 'Year': 'FY 2017', 'Quarter': 'Q4' },
    { 'In_Stock': 47, 'Sold': 405, 'Amount': 3037.5, 'Country': 'United States', 'Product_Categories': 'Accessories', 'Products': 'Bottles and Cages', 'Order_Source': 'App Store', 'Year': 'FY 2017', 'Quarter': 'Q4' },
    { 'In_Stock': 14, 'Sold': 385, 'Amount': 11646.25, 'Country': 'United States', 'Product_Categories': 'Accessories', 'Products': 'Hydration Packs', 'Order_Source': 'App Store', 'Year': 'FY 2017', 'Quarter': 'Q4' },
    { 'In_Stock': 11, 'Sold': 426, 'Amount': 1704, 'Country': 'United States', 'Product_Categories': 'Accessories', 'Products': 'Cleaners', 'Order_Source': 'App Store', 'Year': 'FY 2017', 'Quarter': 'Q4' },
    { 'In_Stock': 13, 'Sold': 392, 'Amount': 5989.76, 'Country': 'United States', 'Product_Categories': 'Accessories', 'Products': 'Helmets', 'Order_Source': 'App Store', 'Year': 'FY 2017', 'Quarter': 'Q4' },
    { 'In_Stock': 9, 'Sold': 426, 'Amount': 4686, 'Country': 'United States', 'Product_Categories': 'Accessories', 'Products': 'Fenders', 'Order_Source': 'App Store', 'Year': 'FY 2017', 'Quarter': 'Q4' }
];
  1. Next, update the src/app/page.tsx file to import and set up the Pivot Table component. This step connects the data and configures the table’s report settings. Use the following code to define the component:
'use client'
import { CalculatedField, FieldList, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { pivotData } from './datasource';

export default function Home() {
  const dataSourceSettings: DataSourceSettingsModel = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    dataSource: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    drilledMembers: [{ name: 'Country', items: ['Germany'] }],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  };

  return (
    <>
      <h2>Syncfusion React Pivot Table Component</h2>
      <PivotViewComponent id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]} />
      </PivotViewComponent>
    </>
  )
}

Run the application

To start your Next.js application with the Syncfusion React Pivot Table, run the following command in your project directory:

npm run dev
yarn run dev

To learn more about the functionality of the Pivot Table component, refer to the documentation.

View the NEXT.js Pivot Table sample in the GitHub repository.