Getting started with Next.js

Next.js is probably the most popular React Framework providing:

• Out-of-the-box project structure
• Routing
• Built-in optimizations
• Server-side rendering(SSR)
• The getting more and more popular Server Components
• Many other cool features related to the building and maintaining of your React application

From 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.

Prerequisites

• React 18
• NodeJS v18.17.1 or greater. Use the node -v command to check your node versions.
• A bash terminal of your choice, for example, the one available in the Visual Studio Code console.

Create a Next.js Project using the App router

The following instructions will result in a project that uses the latest official Next.js version but if one needs a specific framework version it can be specified during the installation.

You can set up a Next.js project by using the following command:

Copy Codenpx create-next-app@latest

After running npx create-next-app, you will be prompted with a couple of options that you can choose based on your preference. If you want to have routing with the app directory, make sure to choose Yes for that option:

Copy Codenpx create-next-app
What is your project named? » my-app
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 (choose YES)
Would you like to customize the default import alias? » No / Yes
cd my-app

Create a Next.js Project using Kendo CLI

As an alternative to the default way of creating Next.js projects, we at Kendo provide our own CLI that helps you generate projects with JavaScript or TypeScript and with or without a router. To generate a project with our CLI, you have to do the following:

1. Install the @progress/kendo-cli package using the following command:

Copy Codenpm install --global @progress/kendo-cli

2. Based on your preferences, use one of the following commands:
   • npx kendo react create nextjs MyKendoApp - Generates a JavaScript project with routing
   • npx kendo react create nextjs MyKendoApp --no-app - Generates a JavaScript project without routing
   • npx kendo react create nextjs MyKendoApp --ts - Generates a TypeScript project with routing
   • npx kendo react create nextjs MyKendoApp --ts --no-app - Generates a TypeScript project without routing

The CLI also provides an option to define which Kendo Theme will be added to the generated project. To set a theme, add one of the following to the above commands:

• --theme=default - Adds the Kendo Default Theme
• --theme=bootstrap - Adds the Kendo Bootstrap Theme
• --theme=material - Adss the Kendo Material Theme

The result of using the Kendo CLI will be a Next.js project that has a KendoReact Grid component added to it. The idea behind the CLI we provide is to help you test our components fast and easy, however, you don't necessarily need to use it if you prefer the default Next.js CLI.

Below you will find information on how we can add components to a Next.js project, no matter how it is generated.

Using KendoReact Components in a Next.js Project

Now, when we have a working Next.js project, we can start using the KendoReact suite in our application. All KendoReact components are compatible with the latest Next.js version. What we recommend you is to use the latest available release of the suite but if you need to specify an exact version for the KendoReact components, our advice is to use v.7.0.0 or newer.

It is possible to use KendoReact components that have been released before v.7.0.0, only after explicit wrapping of the KendoReact components in your own Client Components as it is discussed here. Nevertheless, not using the use client directive is only valid if neither event listeners or hooks are used.

Install the DropDowns Package

All KendoReact packages are distributed through npm and offer a similar installation experience. The dependencies needed for the installation of each component package are listed in a dedicated Getting Started article on the component package level, for example, Getting Started with the React DropDowns.

To use the KendoReact DropDowns package in your Next.js project, first, install the following KendoReact packages by using NPM or YARN.

Copy Codenpm install --save @progress/kendo-react-dropdowns @progress/kendo-react-buttons @progress/kendo-react-treeview @progress/kendo-react-intl @progress/kendo-licensing @progress/kendo-svg-icons

Import the DropDownList Component

After installing the needed packages, you can import the DropDownList component in the Next.js App. If you want to add the DropDownList to the main page that is first loaded, you can directly import it into the initial page.js or page.tsx file of the project.

However, if you want the DropDownList to be present in a separate route, you can create a separate folder that contains a page.js file in the app directory. For example, you can import the DropDownList component in app/dropdownlist/page.js. In this case, the URL that navigates to the DropDownList will be localhost:3000/dropdownlist.

Copy Codeimport { DropDownList } from "@progress/kendo-react-dropdowns";

Use the DropDownList Component

If you use a version of the KendoReact suite that is released prior to v.7.0.0, you should add the use client directive at the top of each file that uses our components. This is not required when using KendoReact v.7.0.0 or newer unless event listeners or hooks are used. For more information on this matter, check this article.

1. Define the data we want to list in the DropDownList component.

   Copy Code   const categories = ["Pizza", "Burger", "Pasta", "Burrito"];

2. Add the component's definition to the app/dropdownlist/page.js file in your project. The result should be the following:

   Copy Code   export default function DropDownListComponent() {
         const categories = ["Pizza", "Burger", "Pasta", "Burrito"];
   
         return (
            <>
               <div>Choose food category</div>
               <DropDownList
               style={{ width: "300px" }}
               data={categories}
               defaultValue="Pizza"
               />
            </>
         );
      }

3. To style the DropDownList, install and import the Default theme, which is one of the four beautiful themes for KendoReact.

   3.1. Install the Default theme package.

   Copy Codenpm install --save @progress/kendo-theme-default

   3.2. Import the CSS file from the package in the main layout.js file.

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

4. Start a development server by typing the following command in the root folder of your project:

   Copy Codenpm run dev

5. Navigate to http://localhost:3000/dropdownlist to see the KendoReact DropDownList component on the page.

Sample Project

You can find a complete and more complex Next.js project integrated with KendoReact in this project from our GitHub repository. It contains an example of the KendoReact Grid, Drawer, Chart, DropDownList and other components using the app router.

Activating Your License Key

Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key.

Since version 5.16.0 (26 July 2023) of KendoReact, a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section.

To experience the full potential of the KendoReact components, follow the steps below to activate your license and hide the invalid/non-activated license attributes:

1. Delete the .next folder that is generated when running npm run dev. This is because it stores the page cache and will still show the watermark and license activation warnings in the console if not deleted.
2. Follow the instructions in the My License Page article.

Suggested Links

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