APIルートの詳細

APIルートについて知っておくべき重要な情報がいくつかあります。

getStaticPropsまたはgetStaticPathsからAPIルートをフェッチしない

getStaticPropsまたはgetStaticPathsからAPIルートをフェッチするべきではありません。代わりに、getStaticPropsまたはgetStaticPathsで直接サーバーサイドコードを書く（またはヘルパー関数を呼び出す）必要があります。

理由は次のとおりです。getStaticPropsとgetStaticPathsはサーバーサイドでのみ実行され、クライアントサイドでは決して実行されません。さらに、これらの関数はブラウザ用のJSバンドルには含まれません。つまり、ブラウザに送信することなく、データベースクエリなどのコードを直接記述できます。詳細については、サーバーサイドコードの記述ドキュメントをお読みください。

適切なユースケース：フォーム入力の処理

APIルートの適切なユースケースは、フォーム入力の処理です。たとえば、ページにフォームを作成し、APIルートにPOSTリクエストを送信するように設定できます。その後、コードを記述してデータベースに直接保存できます。APIルートコードはクライアントバンドルの一部ではないため、安全にサーバーサイドコードを記述できます。

export default function handler(req, res) {
  const email = req.body.email;
  // Then save email to your database, etc...
}

プレビューモード

静的生成は、ページがヘッドレスCMSからデータをフェッチする場合に便利です。ただし、ヘッドレスCMSでドラフトを作成し、ページでドラフトをすぐにプレビューしたい場合には理想的ではありません。Next.jsには、ビルド時ではなくリクエスト時にこれらのページをレンダリングし、公開されたコンテンツではなくドラフトコンテンツをフェッチさせる必要があります。この特定のケースでのみ、Next.jsに静的生成をバイパスさせる必要があります。

Next.jsには、上記の問題を解決するためのプレビューモードという機能があり、APIルートを利用しています。詳細については、プレビューモードドキュメントをご覧ください。

動的APIルート

APIルートは、通常のページと同様に動的にできます。詳細については、動的APIルートドキュメントをご覧ください。

以上です！

次の最後の基本レッスンでは、Next.jsアプリを本番環境にデプロイする方法について説明します。