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 ツールを使用します。

1. コマンドプロンプトまたはターミナルで次のコマンドを実行して、Next.js TypeScriptプロジェクトを作成します。

   npx create-next-app@latest nextjs-with-spreadjs --use-npm

   コマンドが実行されると、プロジェクトの構成の設定を行います。TypeScriptのオプションを有効にしてください。また、作成には時間がかかる場合がありますので、そのままお待ちください。

   
   

2. 次のコマンドを実行します。

   cd nextjs-with-spreadjs

   npm run dev

   
   

3. ブラウザで次のリンクを開きます。Next.jsの公式ページが表示されます。

   http://localhost:3000/

   
   

4. 現在のターミナルを閉じて、Visual Studio Code（または他のIDE）を使用してnextjs-with-spreadjs フォルダを開きます。

SpreadJSをインストールする

1. 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'の部分には製品のバージョンを指定してください。バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

2. アプリケーションのルートフォルダに、「components」フォルダを作成します（componentsフォルダが存在しない場合のみ）。

3. 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>);
   }

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

   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/ で実行されます。