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
```

Next.jsで使用する方法