Next.js

KendoReact enables you to add KendoReact components to Next.js projects and utilize server-side rendering.

Installation

The following steps demonstrate how to add the KendoReact components to a Next.js project. For a complete step by step tutorial on how to start a Next.js project with KendoReact with the pages or app router, and activate the license, refer to the Getting Started with Next.js article.

1. Install and import the desired KendoReact components by using NPM or YARN.

   Copy Codenpm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs

2. Install and import any of the following KendoReact themes that are available:

   • Default theme
   • Material theme
   • Bootstrap theme
   • Fluent theme

   Copy Code    npm install --save @progress/kendo-theme-default

   Copy Code    import '@progress/kendo-theme-default/dist/all.css';

If you are using the app directory for routing, you can import the theme in the main layout.js file.

Sample Project

For a complete sample project with Next.js, refer to this example in our GitHub repository.

Known Issues and Troubleshooting

With version 7.0.0 of the KendoReact suite, all components available in the suite are compatible with Next.js, and can be easily integrated into your projects. The issues listed below can be replicated when using the KendoReact components with a components' version released before v.7.0.0.

The following issues can be replicated when using KendoReact components in a Next.js application if the version of the components is one released prior to v.7.0.0. The following errors are NOT replicable with KendoReact v7.0.0 or newer:

• The KendoReact component that does not work in Next.js is the PDFViewer due to an issue related to the Webpack configuration. When using the component with Next.js, it will also be required to install the node-loader library and load it to the webpack in next.config.js as demonstrated below. In addition, depending on the configuration, it might also be needed to install the canvas dependency:

Copy Codeconst nextConfig = {
  webpack: (config, { dev, isServer, webpack, nextRuntime }) => {
    config.module.rules.push({
      test: /\.node$/,
      loader: "node-loader"
    });
    return config;
  }
}

• When running some components in development mode, they show warnings due to hydration errors for the following properties[Fixed in version 7.0.0]:
  • id
  • aria-owns
  • aria-controls
  • style

When not setting these properties to the KendoReact component, the internal guid function sets a random unique id for the id, aria-owns, and aria-controls properties when they are present for the component. However, the guid is currently setting different ids in the client and the server causing a hydration error. As a solution, you can set them as component props:

Copy Code<AppBar
  id="appBarID"
>

Another workaround would be to lazy load the component using dynamic with the SSR option set to false. This will dynamically load the package on the client side. Here is an example for the Grid:

Copy Codeimport { GridColumn, GridDetailRowProps, GridDataStateChangeEvent, GridExpandChangeEvent } from '@progress/kendo-react-grid';

const MyGrid: any = dynamic(
  () =>
    import("@progress/kendo-react-grid").then(
      (module) => module.Grid
    ) as any,
  { ssr: false }
);

• The PivotGrid shows a forwardRef render functions accepts only two parameters warning[Fixed in version 7.0.0].

• Some components are showing a support for defaultProps will be removed warning. We are currently in the process of removing the use of defaultProps from all our functional components[Fixed in version 7.0.0].

• If you are still seeing the license activation console warning and watermark after activating the license, delete the .next file that is generated when running npm run dev. This is because it stores the page cache and does not update the license information after the license is activated. After you delete it and run npm run dev again, the file will be regenerated with the new licensing information.

Suggested Links

• Next.js
• Sample Project with Next.js Integration
• Getting Started with Next.js