# StaticKitからFormspreeへの移行

> Formspree Docs · CLIの使用方法 · 2023年7月14日

すでに StaticKit のフォームをお持ちの場合、Formspree への移行は素早く簡単に行えます！手順の概要は以下のとおりです：

1.  StaticKit の各サイトに対して、Formspreeダッシュボードでプロジェクトを作成します。
2.  Formspree CLI をインストールし、Formspree React ライブラリからインポートするようにコードを更新します。
3.  StaticKit のデプロイキーと site プロパティを、Formspree のデプロイキーとプロジェクトIDに置き換えます。
4.  新しいデプロイでテストして、新しい統合が正しく機能することを確認します。

## Formspreeでプロジェクトを作成する

まず、Formspree のアカウントを登録します。アカウントを作成したら、**New Project** を選択して **CLI Project** を選びます。_Project ID_ と _Deploy Key_ が発行されます。後ほど使用しますので、手元に置いておいてください。

## Formspree CLI のインストール

Formspree CLI インターフェースをインストールし、`statickit.json` ファイルを Formspree で使用できるようにリネームします。先ほどのデプロイキーを使用してデプロイを実行し、Formspree にフォームの情報を伝えます。

```shell
npm i -g @formspree/cli
```

## Formspree React ライブラリを使用するようにコードを更新する

Formspree React ライブラリをインストールする必要があります。

```shell
npm install @formspree/react
```

次に、`<StaticKitProvider>` を `<FormspreeProvider>` に置き換える必要があります。先ほど受け取ったプロジェクトキーを覚えていますか？`site` 属性を `project` に置き換え、プロジェクトIDを指定します。

サンプルの Next.js ファイルを例に見てみましょう。以下が移行前のファイルです：

```jsx
import { StaticKitProvider } from '@statickit/react';

function App({ Component, pageProps }) {
  return (
    <StaticKitProvider site="{your-site-id}">
      <Component {...pageProps} />
    </StaticKitProvider>
  );
}

export default App;
```

すべての移行が完了した後の新しいファイルはこちらです：

```jsx
import { FormspreeProvider } from '@formspree/react';

function App({ Component, pageProps }) {
  return (
    <FormspreeProvider project="{your-project-id}">
      <Component {...pageProps} />
    </FormspreeProvider>
  );
}

export default App;
```

フォームが含まれるすべてのファイルで、正しいライブラリを使用するだけです。コードベースを検索して、`@statickit/react` を `@formspree/react` に一括置換できます。フォームの例は次のようになります：

```jsx
import { useForm } from '@formspree/react';

function MyForm() {
  const [state, handleSubmit] = useForm('{your-form-key}');
  if (state.succeeded) {
    return <div>Thank you for signing up!</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" />
      <button type="submit" disabled={state.submitting}>Sign up</button>
    </form>
  )
}
```

`state` オブジェクトは StaticKit と同じ構造を保っているため、`ValidationError` コンポーネントを使用している場合はそのまま利用できます。

## すべてをテストする

すべてが正しく動作することを確認しましょう。ダッシュボードにアクセスして、`formspree.json` に定義したすべてのフォームが作成されていることを確認します。

ウェブサイト上で、Formspree に移行されたフォームが期待どおりに動作することを確認してください。送信すると、フォームの送信テーブルに表示されるはずです。

以上です！これで Formspree がフォームを管理してくれるので、安心してご利用いただけます。