Next.js

InputManJSのコントロールを使用したNext.jsアプリケーションを作成するには、次の手順に従います。（その他のコントロールの作成方法は、各コントロールののサンプルを参照してください。）

以下の手順では、事前にNodeJSがコンピュータにインストールされている必要があります。

1. コマンドライン（コマンドプロンプトやターミナル）で次のコマンドを実行して、新しいNext.jsアプリケーションを作成します。 ここでアプリケーションを作成するときに、プロジェクト名はinputmanjs_nextappとし、TypeScriptを有効にしたものを想定します。

npx create-next-app@latest

2. 次のコマンドを実行して、作成したアプリケーションのディレクトリに移動します。

cd inputmanjs_nextapp

3. 次のコマンドを実行して、InputManJSのReactパッケージをインストールします。

npm install @mescius/inputman.react

4. アプリケーションのルートフォルダに「components」フォルダを作成し、TextBox.tsxファイルを作成します。 ここでは、GcTextBoxコンポーネントを利用したTextBoxコンポーネントを設定した例です。また、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;

5. app/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>
        </>
    )
}

6. 次のコマンドを実行して、アプリケーションを起動します。

npm run dev

7. ブラウザで「http://localhost:3000/」を参照し、アプリケーションを表示します。