Next.js

はじめに

Next.js は、サーバー側レンダリング (SSR)、静的サイト生成 (SSG)、API ルートなどの機能を提供する強力な React フレームワークで、最新のWeb アプリケーションを構築するための堅牢なプラットフォームを提供します。

WijmoのReact用モジュールを使用すると、Next.js プロジェクト内でWijmoコントロールを利用できます。相互運用機能は Wijmo コントロールのラッパーとして機能し、ref プロパティを介して参照を提供しながら、ベースとなるコントロールのインスタンスを作成および管理します。この設定により、コントロールのプロパティとイベントに宣言的にバインドして、Reactコンポーネントとシームレスに統合できます。

Next.js アプリケーションでWijmoコンポーネントを正常に使用するには、サーバー側レンダリング (SSR) がサポートされていないため、これらのコンポーネントがクライアント側でのみレンダリングされるようにする必要があります。

これは、Wijmo コンポーネントを含むファイルに "use client" ディレクティブを設定することで実現できます。これにより、Next.js がサーバー側でレンダリングしようとするのを防ぐことができます。

このガイドでは、Next.jsプロジェクトでWijmo コンポーネントを設定して使用するプロセスについて説明します。

インストール

WijmoのReact用コンポーネントは、名前に「react」という単語を含む、コアライブラリパッケージごとに1つの npm パッケージのセットとして公開されます。

たとえば、「wijmo.react.grid」パッケージは、コア「wijmo.grid」パッケージのコントロールのコンポーネントを表します。パッケージは個別にインストールすることも、「@mescius/wijmo.react.all」のグループパッケージを使用してすべて一緒にインストールすることもできます。

npm install @mescius/wijmo.react.all

その後、ESM インポートステートメントを使用してモジュールをインポートできます。たとえば、次のインポートステートメントは、「wijmo.react.grid」モジュールのコンテンツをインポートします。

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

Wijmoモジュールのインポートと各種設定

この設定により、Wijmo React モジュールをインポートし、そこに含まれるコンポーネントを使用できます。たとえば、次のコードは、コンポーネントの JSX/TSX に FlexGrid コンポーネントを追加します。

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

*コンポーネントがサーバー側コンポーネントである場合は、ファイルの先頭に「use client」を追加して、コンポーネントをクライアントコンポーネントとしてマークします。

Wijmo CSSの追加

Wijmo コントロールの外観と動作を正しくするには、アプリケーションに Wijmo CSS スタイルを読み込む必要があります。CSSスタイルは @mescius/wijmo.stylesパッケージに同梱されています。

このESMインポートステートメントを使用して、アプリケーションの layout.tsxルートファイルまたは Wijmo コントロールを使用するコンポーネントにスタイルを読み込むことができます。

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

Next.jsでの構文

Wijmo コンポーネントは、Next.js アプリケーションで指定するために一貫した命名規則を使用します。

プロパティとイベントバインディングのプロパティは、それらが表すベースとなるJavaScript コントロールと同じ名前で公開されます。

export default function Home() { 
  const [amount,setAmount] = useState(100); 
  const onValueChanged = (sender,args)=>{ 
    console.log("変更された値 : "+sender.value); 
  } 

  return ( 
    <div> 
      <WjInpt.InputNumber value={amount} 
                          format="n2" 
                          isReadOnly={false} 
                          valueChanged={onValueChanged}> 
      </WjInpt.InputNumber> 
    </div> 
  ); 
}

イベントバインディング

Wijmoイベントハンドラーは、senderとイベント引数のつのパラメーターを持つ関数として定義されます。

コンポーネントイベントにバインドする場合は、このシグネチャを持つ関数の名前をバインディングソースとして指定する必要があります。

export default function Home() { 
  const [amount,setAmount] = useState(100); 
  const onValueChanged = (sender,args)=>{ 
    console.log("変更された値  : "+sender.value); 
  } 

  return ( 
    <div> 
      <WjInpt.InputNumber value={amount} 
                          valueChanged={onValueChanged}> 
      </WjInpt.InputNumber> 
    </div> 
  ); 
}

Initializedイベント

すべての Wijmoコンポーネントには、コントロールがページに追加され、初期化された後に発生する「initialized」イベントが含まれています。ハンドラー関数のシグネチャは、他の Wijmoイベントハンドラーと同じです。

export default function Home() { 
  const [amount,setAmount] = useState(100); 
  const onInitControl = (sender,args)=>{ 
    console.log("コントロールが初期化されました。"); 
  } 
  return ( 
    <div> 
      <WjInpt.InputNumber value={amount} 
                          initialized={onInitControl}> 
      </WjInpt.InputNumber> 
    </div> 
  );

コードでWijmoコントロールを作成する

Wijmoコンポーネントは、Next.JSアプリでコンポーネントとして使用することを目的としています。

コードで Wijmo コントロールを作成する場合は、コンポーネントではなく、コアモジュールのWijmoコントロールを使用する必要があります。コアモジュールの名前は、対応するReact相互運用モジュールと同じですが、名前に「react」という単語は含まれません。たとえば、次のコードはコードで FlexGrid コントロールを作成します。

import { FlexGrid } from '@mescius/wijmo.grid'; 
let flex = new FlexGrid('#host_element');