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...
}

Preview Mode

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

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

動的な API Routes

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

これで完了です！

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