Next.jsとServer Actions
Server Actionsは、APIエンドポイント不要でシンプルな実装が可能なNext.jsのデータ送信機能です。TypeScriptとの相性が良く型安全性が向上し、Server ComponentsやClient Componentsとの自然な連携ができます。従来のAPI Routesでは/api/xxxエンドポイントを定義してfetchで呼び出す必要がありましたが、Server Actionsでは関数を直接呼び出すだけで済みます。
'use server'ディレクティブをファイルの先頭に配置すると、ファイル内の全関数がServer Actionsになります（リスト1）。
"use server";
export async function createOrder(formData: FormData) {
// サーバーサイドで実行される処理
}
この例では、クライアントから直接createOrder関数を呼び出しつつ、実際に関数が実行されるのはサーバー側、という動きになります。
プロジェクトのセットアップ
まず、Next.jsプロジェクトを作成します。以下のコマンドを実行し、TypeScript、ESLint、Tailwind CSS、App Routerを有効にする推奨設定を選択します（リスト2）。
npx create-next-app@latest wijmo-serveractions-app cd wijmo-serveractions-app
プロジェクトが作成されたら、npm run devで開発サーバーを起動し、正常に動作することを確認します（図2）。
確認できたら次へ進みましょう。
MySQLとPrismaの設定
次に、データベース環境を構築します。今回はMySQLをPrismaから操作することにします。読者各位の慣れた方法でMySQLを起動して、PrismaでORMを設定しましょう（リスト3）。
# Prismaのインストール npm install prisma --save-dev npm install @prisma/client # Prisma初期化（MySQL用） npx prisma init --datasource-provider mysql
Prismaの初期化後、.envファイルに接続設定を記載します（リスト4）。
# 各位の環境に合わせたMySQLの接続先情報を書いてください DATABASE_URL="mysql://root:rootpassword@localhost:3306/wijmo_db"
次は、prisma/schema.prismaでサンプルデータ格納用のOrderDataモデルを定義します（リスト5）。
# 略
model OrderData {
id Int @id @default(autoincrement())
product String
price Int
quantity Int
orderdate DateTime
}
定義できたら、マイグレーションとシードを実行します。シード（seed）処理とは、データベースに初期データを投入する処理のことで、開発やテストに必要なサンプルデータを自動的に準備できます。今回のシード処理はprisma/seed.tsに定義済みです。詳細はダウンロードサンプルのprisma/seed.tsを参照してください（リスト6）。
npx prisma migrate dev --name init npx prisma db seed
これでデータベースにテーブルが作成され、サンプルデータが投入されます。npx prisma studioで投入されたデータを確認できます（図3）。
シード処理で入れたデータが入っていますね。
Wijmoのインストールとライセンス設定
最後に、Wijmoパッケージをインストールします。@mescius/wijmo.react.allで必要なコンポーネントが一括インストールされます（リスト7）。
npm install @mescius/wijmo.react.all
ライセンスキーは.envファイルにNEXT_PUBLIC_プレフィックスを付けて設定します。このプレフィックスにより、Client Componentからアクセス可能になります（リスト8）。
DATABASE_URL=... NEXT_PUBLIC_WIJMO_LICENSE_KEY="your-license-key"
ライセンスキーを設定したら、これを読み込んで適用するコンポーネントを作成します。見た目を持たないClient Componentとして定義し、setLicenseKey()でライセンスを有効化します（リスト9）。
"use client";
import { setLicenseKey } from "@mescius/wijmo";
const licenseKey = process.env.NEXT_PUBLIC_WIJMO_LICENSE_KEY;
if (licenseKey) {
setLicenseKey(licenseKey);
}
export default function WijmoLicense() {
return null;
}
このコンポーネントをレイアウトファイルからインポートし、全ページで読み込まれるようにします（リスト10）。
import WijmoLicense from "@/components/WijmoLicense";
export default function RootLayout({ children }) {
return (
<html>
<body>
<WijmoLicense />
{children}
</body>
</html>
);
}
これでセットアップは完了です。
