Wijmo Supports Next.js

Next.js is a powerful React framework that provides a robust platform for building modern web applications. We are happy to announce official support for Wijmo in Next.js applications.

Wijmo’s React Interop enables you to utilize Wijmo controls within a Next.js project. The interop acts as a wrapper for the Wijmo controls, creating and managing the underlying control instances while providing references via the ref property. This setup allows you to declaratively bind to the control properties and events, integrating seamlessly with your React components.

To successfully use Wijmo components in your Next.js application, you need to ensure that these components are rendered only on the client side, as server-side rendering (SSR) is not supported.

How to Use Wijmo in Next.js

Get started by following our Next.js QuickStart. The basic steps to using Wijmo in Next.js are as follows:

1. Install Wijmo’s React packages from npm
   

   npm install @mescius/wijmo.react.all 

   
   
2. Import the Wijmo modules you will be using
   

   import * as wjcGrid '@mescius/wijmo.react.grid'; 

   
   
3. Declare component in JSX/TSX markup
   

   'use client'  
   import { useState } from "react"; 
   import * as WjGrid from "@mescius/wijmo.react.grid"; 
   
   export default function Home() { 
     const [data,setData] = useState(getData()); 
     return ( 
       <div> 
         <WjGrid.FlexGrid itemsSource={data}></WjGrid.FlexGrid> 
       </div> 
     ); 
   } 

   
   
4. Add Wijmo CSS
   

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

   
   
5. Run the app!

You can also run or fork this Next.js Wijmo sample on StackBlitz.

Ready to See What the Latest Release Has to Offer? Download Wijmo Today!