Using Wijmo with Next.js

Next.js is a powerful React framework that provides features such as server-side rendering (SSR), static site generation (SSG), and API routes, offering a robust platform for building modern web applications.

Wijmo’s React Interop enables you to utilize Wijmo controls within a Next.js project. The interop acts act 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.

type=info

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

This can be achieved by setting the "use client" directive in the files containing Wijmo components, thus preventing Next.js from attempting to render them server-side, which would otherwise fail.

This guide will walk you through the process of setting up and using Wijmo components in a Next.js project.

Installation

Wijmo React components are shipped as a set of npm packages, one package per core library package, with the "react" word in their names.

For example, "wijmo.react.grid" package represents components for controls from the core "wijmo.grid" package. The packages can be installed separately, or all together using the "@mescius/wijmo.react.all" group package:

npm install @mescius/wijmo.react.all 

See this topic for more details about Wijmo npm packages. 

After that you can import modules using ESM import statements. For example, this import statement imports the content of the "wijmo.react.grid" module:

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

Importing Wijmo components

With this setup, you can import Wijmo React modules and use the components they contain. For example, this code adds a FlexGrid component to your component's JSX/TSX: 

'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> 
  ); 
} 

Note: If the component is a server-side component, mark the component as a Client Component by adding 'use client' at the top of the file. 

Adding Wijmo css

For Wijmo controls to look and work correctly, you need to load Wijmo css styles into your application. 

The styles are shipped in the @mescius/wijmo.styles npm package. 

You can load the styles in your application’s layout.tsx root file or your component using Wijmo control, using this ESM import statement.

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

Next.js Syntax

Wijmo components use consistent naming conventions for specifying them in Next.js application. They expose properties for property and event bindings with the same names as in the underlying JavaScript controls they represent. For example:  

export default function Home() { 
  const [amount,setAmount] = useState(100); 
  const onValueChanged = (sender,args)=>{ 
  console.log("updated amount : "+sender.value); 
  } 
  return ( 
    <div> 
      <WjInpt.InputNumber value={amount} 
                          format="n2" 
                          isReadOnly={false} 
                          valueChanged={onValueChanged}> 
      </WjInpt.InputNumber> 
    </div> 
  ); 
} 

Event Binding detail

Wijmo event handlers are defined as functions with two parameters: sender and event argument. When you bind to a component event, you should specify the name of a function with this signature as a binding source. For example: 

export default function Home() { 
  const [amount,setAmount] = useState(100); 
  const onValueChanged = (sender,args)=>{ 
  console.log("updated amount : "+sender.value); 
  } 
  return ( 
    <div> 
      <WjInpt.InputNumber value={amount} 
                          valueChanged={onValueChanged}> 
      </WjInpt.InputNumber> 
    </div> 
  ); 
} 

Initialized event

All Wijmo components include an "initialized" event that is raised after the control has been added to the page and initialized. 

You can use this event to perform further initalization in addition to setting properties in JSX/TSX. The signature of the handler function is the same as any other Wijmo event handlers. For example:

export default function Home() { 
  const [amount,setAmount] = useState(100); 
  const onInitControl = (sender,args)=>{ 
  console.log("updated amount : "+sender.value); 
  } 
  return ( 
    <div> 
      <WjInpt.InputNumber value={amount} 
                          initialized={onInitControl}> 
      </WjInpt.InputNumber> 
    </div> 
  ); 
} 

Creating Wijmo controls in code

Wijmo components are intended for a usage in Next.js app as component . If you want to create a Wijmo control in code, you should use a Wijmo control from a core module for this purpose, instead of a component. A core module has the same name as a corresponding React interop module, but without the "react" word in the name. For example, this code creates a FlexGrid control in code: 

import { FlexGrid } from '@mescius/wijmo.grid'; 

let flex: FlexGrid | null = null;
  useEffect(() => {
    if (!flex) {
      flex = new FlexGrid('#host_element', {
        itemsSource: getData()
      })
    }
  }, [])