Newt's starter

Demo | Newt

概要

Newt と Next.js を利用した問い合わせフォームです。
App Router を用いて、問い合わせフォームを作成してみたい方はぜひお試しください。

問い合わせフォーム	送信成功

開発をはじめる

Step1: Newt スペースをセットアップ

1. スペースを作成します
   • スペース UID を控えておきましょう。スペース UID は 管理画面 URL（ https://app.newt.so/{スペースUID} ） もしくは スペース設定 > 一般 から確認できます。
2. App を作成します
   • Appを追加 > テンプレートから追加 から、Contactを選んで「このテンプレートを追加」をクリックしてください。
3. フォームを作成します
   • 作成した Form App のトップページより、フォームを作成します
   • フォーム設定 > セットアップ より API エンドポイントをコピーします

Step2: .env.local ファイルを作成する

.env.local.example ファイルを参考に、.env.local ファイルを作成します。
Step1 で取得した API エンドポイントの値を設定します。

NEXT_PUBLIC_NEWT_FORM_ENDPOINT=APIエンドポイント

Next.js における環境変数の扱いについては、公式ドキュメントを参照してください。

Step3: dev サーバーを起動する

Yarn を使う

# 依存パッケージをインストール
$ yarn install

# localhost:3000でdevサーバーを起動
$ yarn dev

npm を使う

# 依存パッケージをインストール
$ npm install

# localhost:3000でdevサーバーを起動
$ npm run dev

ページの構成

ページ	パス	ファイル
問い合わせフォーム	/	ソース
送信成功	/thanks	ソース
送信失敗	/error	ソース

License

MIT License