100 fast and flexible Next.js UI components

* The guide below uses Next.js 14.2.5.

1. Go to the Next.js app folder and install the Wijmo library.

When using Wijmo in Next.js, you use Wijmo components for React.

npm install @mescius/wijmo.react.all

2. Create a folder and file to load the Wijmo library.

This article explains how to set up Wijmo's FlexGrid control.

If you would like to add other controls, please check the detailed code samples for each control below.

Create a "components" folder in the root folder of your project, then create a FlexGrid.tsx file in that folder.

3. Wijmo does not support server-side rendering (SSR), so configure the component to render only on the client side.

Add the following directive to the components/FlexGrid.tsx file:

'use client';

4. Add css file to apply Wijmo style.

Add the Wijmo css file to the components/FlexGrid.tsx file.

import '@mescius/wijmo.styles/wijmo.css';

5. Add the Wijmo modules you want to use.

Add the Wijmo module as follows:

Please check the sample below for detailed code for each control.

import * as { namespace } from '@mescius/wijmo.react.{control name}' ;

6. Initialize the Wijmo control and add it to the screen.

After initializing the Wijmo control and generating sample data, we write code to display the Wijmo control on the screen.

Please check the detailed code for each control in the sample below.

7. Run the Next.js app to see the results.

npm run dev