next.jsとnetlifyを使用して連絡先フォームを作成する方法

next.jsで効率的な連絡先フォームを構築し、強力なスパム検出をネットライディングして統合します！この記事では、確認ページで連絡先フォームを作成し、Netlifyの組み込み機能を使用してスパムアンチスパム機​​能を改善するように導きます。

Next.jsは、高性能でスケーラブルなReactアプリケーションを構築できる強力なReactフレームワークです。 Netlifyと組み合わせることで、サーバー側のコードを作成せずに連絡先フォームをすばやく構築できます。

Netlifyフォームはセットアップに便利で、無料バージョンが利用可能です（各Netlifyサイトは最大100の無料時間からフォームを送信できます）。提出されたフォームは、Netlifyの内蔵スパムフィルター（Akismetを使用）を自動的に渡され、スパム検出を強化するためのさまざまな構成オプションを提供します。

連絡先フォームを作成します

next.jsアプリケーションで、 ContactFormコンポーネントを作成して、連絡先ページにフォームをレンダリングします。フォームを/contactパスの下でレンダリングする場合は、タグと入力フィールドを含むpages/contact.jsファイルの次のContactFormコンポーネントを使用する必要があります。

 const contactform =（/ * code see */ exlow）;

次のコードスニペットは、名前、会社、電子メール、メッセージフィールドを備えたフォーム、および送信ボタンを作成します。フォームを送信した後、 /contact/?success=trueにリダイレクトされますaction現在、クエリパラメータがsuccessた場合とまったく伴わないページの見た目に違いはありません。後で更新します。

現在のContact.jsファイルは次のとおりです。

 「React」からのImport React;
const contactPage =（）=> {
 const contactform =（/*上記のコードスニペットのコード*/）

 戻る （
   <div>
     <h1 id="お問い合わせ">お問い合わせ</h1>
     {contactform}
   </div>
 ）;
};

デフォルトの連絡先をエクスポートします。

基本フォームの設定が完了したら、Netlifyが将来のサイトの展開でフォームを自動的に認識するように、情報を追加する必要があります。これを行うには、フォームを更新し、 data-netlify="true"プロパティとフォーム名を含む非表示の入力フィールドを追加する必要があります。 Netlifyダッシュボードで、サイトに移動し、[フォーム]タブをクリックして、非表示フィールドに設定された名前に基づいてフォーム応答を表示します。重要なことに、サイトに複数のフォームがある場合は、各フォームに一意の名前を設定して、ネットライフを正しく設定する必要があります。

 {/*コードについては以下を参照*/}

サイトを正常に展開してNetLifyを展開し、 data-netlify属性とform-nameフィールドを追加した後、展開されたサイトにアクセスしてフォームに入力できます。フォームを送信した後、 https://app.netlify.com/sites/site-name/forms （ site-nameはサイト名）に移動し、フォームが正常に設定されている場合は、最新のフォーム提出履歴を表示する必要があります。

確認ページにリダイレクトします

ユーザーエクスペリエンスを改善するには、URLが/contact/?success=trueに変更されたときにフォームが送信された後、確認ページにリダイレクトするロジックを追加する必要があります。フォームが送信されたときにまったく異なるページにリダイレクトすることもできますが、クエリパラメーターを使用すると、次のルーターを使用して同様の効果を達成できます。クエリパラメーターに基づいて、確認ページまたはフォームの可視性を決定する新しい変数を作成できます。 import { useRouter } from "next/router"; next/routerルーターを使用して、現在のクエリパラメーターを取得できます。

 const router = userouter（）;
const cunsimationscreenvisible = router.query？.success && router.query.success === "true";

この例では、ページに表示されていると同時に、次のステートメントを使用して、フォームが表示されるかどうかを判断できます。

 const formvisible =！cumponationscreenvisible;

ユーザーにフォームを再提出するオプションを提供するには、クエリパラメーターをクリアしてフォームにボタンを追加してフォームをリセットできます。 router.replaceを使用する（ router.pushではなく）ページを更新するだけでなく、現在のページをクエリパラメーターを含まないバージョンに置き換えます。

 router.replace（ "/contact"、undefined、{shallow：true}）

その後、フォームが表示されるかどうかに基づいて、フォームを条件付きでレンダリングできます。

 {formvisible？contachmessage}

上記に基づいて、次のコードを使用して、クエリパラメーターに基づいてフォームを条件付きでレンダリングできます（フォームが送信されたときに更新されます）：

 「React」からReact、{UseState}をインポート。
"next/router"から{userouter}をインポートします。

const contactPage =（）=> {
 const [submittername、setsubmittername] = uesestate（ ""）;
 const router = userouter（）;
 const ConfirmenationScreenvisible =
   router.query？.success && router.query.success === "true";
 const formvisible =！cumponationscreenvisible;

 const commisationmessage =（
   
     
フォームを提出していただきありがとうございます。 24〜48時間以内にご連絡いたします。
      router.replace（ "/contact"、undefined、{shallow：true}）}>別の返信を送信します
   
 ）;

 const contactform =（/*最初のコード例のコード*/）;

 戻る （
   

     
お問い合わせ
     {formvisible？contachmessage}
   
 ）;
};

デフォルトの連絡先をエクスポートします。

非表示のロボットフィールドを追加します

フォームのコア機能が完全になったので、デフォルトに含まれるAkismetに加えて、フォームに追加のスパム検出を追加できます。この機能はdata-netlify-honeypot="bot-field"プロパティをフォームに追加することで有効にできます。

 {/*コードについては以下を参照*/}

また、入力を含むbot-fieldと呼ばれるタグを含む新しい非表示段落を作成する必要があります。このフィールドはロボットに「見える」が、人間には「見える」。この隠されたフィールドが入力されると、Netlifyはボットを検出し、提出物をスパムとしてマークします。

<p hidden>
  <label>このアイテムに記入しないでください：</label>
  <input type="text" name="bot-field">
</p>

さらなるカスタマイズ

• Netlifyがサポートする別のスパム保護オプションを探索できます。これは、フォームをNetlifyに追加するためにRecaptcha 2を追加することです。
• フォームを更新し、ファイルのアップロードを許可できます。
• フォーム提出の通知を設定できます。これは、 https://app.netlify.com/sites/[your-site-name]/settings/forms

完全なコード

完全なサイトコードはGitHubで利用できます。 （記事に書かれたものがある場合は、githubリンクを提供してください）

追加コンテンツ

次のコードには、議論したすべてのコードと、名前フィールドで提出されたものを使用してカスタムサブジェクト行を設定するロジックが含まれています。 （コードを提供してください）

上記のコードスニペットには、元のドキュメントに従って完全なコードを補充する必要があることに注意してください。 私は元の文書に基づいて書き直して磨くように最善を尽くし、元の意味を変えずに擬似オリジナルの創造をするよう努めました。

以上がnext.jsとnetlifyを使用して連絡先フォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。