Next.jsで使用する方法

Next.jsアプリケーションでは、次の手順でInputManJSのコンポーネントを使用することができます。

• Create Next Appを利用して、Next.jsアプリケーションを作成します。(プロジェクト名はinputmanjs_nextappとします。また、この手順ではTypeScriptを有効にしたものを想定しています。)

  npx create-next-app@latest
  

• アプリケーションプロジェクトのフォルダに移動します。

  cd inputmanjs_nextapp
  

• 以下のコマンドでInputManJSのパッケージをインストールします。

  npm install @mescius/inputman.react
  

• アプリケーションのルートフォルダに「components」フォルダを作成し、TextBox.tsxファイルを作成します。ここでは、GcTextBoxコンポーネントを利用したTextBoxコンポーネントを設定します。次のようにGcTextBoxコンポーネントをインポートしそれぞれtextプロパティとtextChangedイベントを設定します。また、TextBox.tsxをクライアントコンポーネントとするためuse clientを設定します。

  'use client';
  
  import { useState } from "react";
  import '@mescius/inputman/CSS/gc.inputman-js.css';
  import * as GC from "@mescius/inputman";
  import { GcTextBox } from "@mescius/inputman.react";
  
  const TextBox = () => {
      const [text, setText] = useState('テキスト');
      const textChanged = (sender: GC.InputMan.GcTextBox) => console.log(`テキストは"${sender.text}"に変更されました。`);
      return (
          <>
              <GcTextBox text={text} onTextChanged={(s) => textChanged(s as GC.InputMan.GcTextBox)}></GcTextBox>
          </>
      )
  }
  export default TextBox;
  

• 次にpage.tsxを開き、先ほど作成したTextBoxコンポーネントをインポートします。ここではdynamic importを利用し、ssrオプションにfalseを設定してください。（現在、InputManJSではクライアントサイドレンダリングのみ対応しています。）

  import dynamic from 'next/dynamic'
  
  const TextBox = dynamic(
      () => {
          return import("../components/TextBox");
      },
      { ssr: false }
  );
  
  export default function Home() {
      return (
          <>
              <h1>
              Next.jS + InputManJS demo
              </h1>
              <TextBox></TextBox>
          </>
      )
  }
  
  

• Next.jsアプリケーションを実行します。必要に応じてapp/globals.cssの内容を変更して下さい。

  npm run dev