Next.js

SpreadJSは、Windows、Linux、MacなどのさまざまなプラットフォームでWebアプリケーションを開発できる React ベースのフレームワークである Next.jsをサポートします。Next.jsは、TypeScriptのサポート、静的サイトジェネレーター（SSG）／サーバーサイドレンダリング（SSR）、ルートの事前取得、スマートバンドルなど機能を提供します。

詳細については、https://nextjs-ja-translation-docs.vercel.app/docs/getting-startedを参照してください。

このチュートリアルでは、SpreadJS を使用する Next.jsアプリケーションを作成します。

type=warning
メモ：Node.jsのバージョンはV14以降が必要です。

Next.jsアプリを作成する

Next.js アプリケーションを簡単に作成するには、Create Next App ツールを使用します。

コマンドプロンプトまたはターミナルで次のコマンドを実行して、Next.js TypeScriptプロジェクトを作成します。
npx create-next-app@latest nextjs-with-spreadjs --use-npm
コマンドが実行されると、プロジェクトの構成の設定を行います。TypeScriptのオプションを有効にしてください。また、作成には時間がかかる場合がありますので、そのままお待ちください。
次のコマンドを実行します。
cd nextjs-with-spreadjs
npm run dev
ブラウザで次のリンクを開きます。Next.jsの公式ページが表示されます。
http://localhost:3000/
現在のターミナルを閉じて、Visual Studio Code（または他のIDE）を使用してnextjs-with-spreadjs フォルダを開きます。

SpreadJSをインストールする

SpreadJSパッケージ、および日本語リソースをインストールします。
npm install @mescius/spread-sheets-react@xx.x.x
npm install @mescius/spread-sheets-resources-ja@xx.x.x
type=warning
'xx.x.x'の部分には製品のバージョンを指定してください。（例：17.1.10）
バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
製品のバージョンについては、製品購入時またはトライアル版でダウンロードした製品コンテンツに含まれるリリースノートをご確認ください。
アプリケーションのルートフォルダに、「components」フォルダを作成します（componentsフォルダが存在しない場合のみ）。

JavaScript XMLファイル（ファイル名：SpreadSheet.jsx）を「components」フォルダに追加し、次のコードを入力します。

'use client';

import React, {  useState } from "react";
import { SpreadSheets, Worksheet, Column } from "@mescius/spread-sheets-react";
import * as GC from "@mescius/spread-sheets";
import '@mescius/spread-sheets-resources-ja';

// カルチャ設定
GC.Spread.Common.CultureManager.culture('ja-jp');

export default function SpreadSheet() {

    const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
    const [sheetName, setSheetName] = useState('Empolyees');
    const [hostStyle, setHostStyle] = useState({
        width: '100%',
        height: '700px'
    });
    const dataArr = [
        {
            "jobTitleName": "Developer",
            "preferredFullName": "Romin Irani",
            "region": "CA",
            "phoneNumber": "408-1234567"
        },
        {
            "jobTitleName": "Developer",
            "preferredFullName": "Neil Irani",
            "region": "CA",
            "phoneNumber": "408-1111111"
        },
        {
            "jobTitleName": "Program Directory",
            "preferredFullName": "Tom Hanks",
            "region": "CA",
            "phoneNumber": "408-2222222"
        }
    ];
    const [data, setData] = useState(dataArr);
    const [columnWidth, setColumnWidth] = useState(200);
    return (
        <SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle}>
            <Worksheet name={sheetName} dataSource={data}>
                <Column dataField='preferredFullName' width={columnWidth}></Column>
                <Column dataField='jobTitleName' width={columnWidth}></Column>
                <Column dataField='phoneNumber' width={columnWidth}></Column>
                <Column dataField='region' width={columnWidth}></Column>
            </Worksheet>
        </SpreadSheets>);
}

app/page.js または app/page.tsxファイルの内容を、次のコードに変更します。

'use client';

import dynamic from "next/dynamic";

const SpreadSheet = dynamic(
  () => {
    return import("../components/SpreadSheet");
  },
  { ssr: false }
);

export default function Home() {
  return (
    <div>
      <h1>
      Next.JS + Spreadsheets demo
      </h1>
      <SpreadSheet />
    </div>
  )
}

スタイルをインポートする

app フォルダにある globals.css ファイルに次のコードを追加して、SpreadJSの CSS をアプリケーションにインポートします。

@import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful';

アプリを実行する

npm run dev コマンドを使用してアプリケーションを実行します。デフォルトでは、プロジェクトは http://localhost:3000/ で実行されます。