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アプリケーションを作成します。

SpreadJSは現在、Next.jsのバージョン15、16 をサポートしています。Next.js アプリケーションを作成するには、インストールされている Node.js のバージョンが 20.9 以降であることを確認してください。

Next.jsアプリを作成する

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

コマンドプロンプトまたはターミナルで次のコマンドを実行して、Next.js TypeScriptプロジェクトを作成します。
```
npx create-next-app@latest
```
プロジェクト名（例：nextjs-with-spreadjs）を入力し、Enterキーを押します。
ターミナルが構成メッセージを表示したら、必要なオプションを選択してEnterキーを押して確定します。
ターミナルがプロジェクトを作成するまでしばらくお待ちください。

Next.js 16 では、Turbopack がデフォルトのバンドラーとして使用されます。開発ビルドと本番ビルドの両方で自動的に有効になるため、オプトインは不要です。

依存関係がインストールされたら、ターミナルで次のコマンドを実行してプロジェクトを起動します。
```
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
```
'xx.x.x'の部分には製品のバージョンを指定してください。（例：19.0.6）
バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
製品のバージョンについては、製品購入時またはトライアル版でダウンロードした製品コンテンツに含まれるリリースノートをご確認ください。

TypeScriptファイル（ファイル名：spreadsheet.tsx）を「app」フォルダに追加し、次のコードを入力します。

'use client';

import React, {  useState } from "react";
import { SpreadSheets, Worksheet, Column } from "@mescius/spread-sheets-react";
import 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('Employees');
    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.tsx ファイルのデフォルトの内容を、次のコードに変更します。
```
'use client';
import dynamic from "next/dynamic";

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

export default function Home() {
  return (
    <div>
      <h1>
        Next.JS 16 + SpreadJS demo
      </h1>
      <SpreadSheet />
    </div>
  )
}
```
SpreadJS はブラウザ固有のAPI（window、document、Canvas）に依存しているため、next/dynamic の {ssr: false} が必要です。
SpreadSheet コンポーネントでは SSR を無効にする必要があります。
'use client' を指定したクライアントコンポーネント内で next/dynamic の {ssr: false} を使用してください。

Next.js 16 における SpreadJS のインポート方法

Turbopack を使用する Next.js 16 では、SpreadJS のコアパッケージをデフォルトインポート構文でインポートすることを推奨します。

import GC from "@mescius/spread-sheets";

以下のような名前空間インポート形式の使用は推奨されません。

import * as GC from "@mescius/spread-sheets";

一部の Next.js 16 環境では、名前空間インポートにより、SpreadJS のアドオンパッケージ（Pivot や Report など）が GC オブジェクトを正しく拡張できない場合があります。その結果、対応するアドオンパッケージをインストールしていても、特定の名前空間（例：GC.Pivot や GC.Report）が未定義となる場合があります。デフォルトインポートを使用することで、アドオンモジュールは SpreadJS のコアオブジェクトに正しく拡張されます。

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

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

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

アプリを実行する

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

npm run dev