API Routes の詳細

API Routes について知っておくべき重要な情報です。

getStaticProps または getStaticPaths から API Route をフェッチしないでください

getStaticProps または getStaticPaths から API Route をフェッチするべきではありません。代わりに、サーバーサイドのコードを getStaticProps または getStaticPaths に直接記述するか（またはヘルパー関数を呼び出すか）してください。

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

良い使用例: フォーム入力の処理

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

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

プレビューモード

Static Generation は、ヘッドレスCMSからデータをフェッチするページには有用です。しかし、ヘッドレスCMSで下書きを記述していて、その下書きをページで即座にプレビューしたい場合には理想的ではありません。Next.js には、ビルド時ではなくリクエスト時にこれらのページをレンダリングし、公開されたコンテンツではなく下書きコンテンツをフェッチさせたいと思うでしょう。Next.js にこの特定のケースでのみ Static Generation をバイパスさせたいのです。

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

動的 API Routes

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

以上です！

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