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;
  // メールをデータベースに保存するなどの処理...
}

プレビューモード

静的生成 (Static Generation) は、ヘッドレスCMSからデータを取得するページに有効です。しかし、ヘッドレスCMSで下書きを書いている際に、その下書きをすぐにページ上でプレビューしたい場合には理想的ではありません。このような場合、Next.jsにビルド時ではなくリクエスト時にページをレンダリングさせ、公開済みのコンテンツではなく下書きコンテンツを取得させたいでしょう。Next.jsには、この特定のケースに対してのみ静的生成をバイパスするプレビューモードという機能があり、APIルートを利用しています。詳細については、プレビューモード ドキュメントをご覧ください。

動的APIルート

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

以上です！

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