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 @grapecity/spread-sheets-react

   npm install @grapecity/spread-sheets-resources-ja

   
   

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

   
   

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

   import React, {  useState } from "react";
   import { SpreadSheets, Worksheet, Column } from "@grapecity/spread-sheets-react";
   import * as GC from "@grapecity/spread-sheets";
   import '@grapecity/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. pages/index.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>
     )
   }

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

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

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

アプリを実行する

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