🐷

reactチュートリアル6（API Routes）

2024/05/19に公開

Next.js

React

tech

NextJSの学習をする。
以下のページを翻訳し記録する。

Next.jsはAPI Routesをサポートしています。Node.jsサーバーレス関数として簡単にAPIエンドポイントを作ることができます。しかし、ブログアプリには必要ないので、ここでは使い方について簡単にお話します。

このレッスンで何を学ぶか

本レッスンでは以下について学びます。

API Routeの作り方
[API Routes]に付いての便利な情報

API Routesを作る

API RoutesでNext.jsアプリにAPIエンドポイントを作ることができます。pages/apiに次の内容で function をつくります。

// req = HTTP incoming message, res = HTTP server response
export default function handler(req, res) {
  // ...
}

上記リクエストハンドラーの詳細についてはAPI Routes documentation.を御覧ください。

これらはサーバーレスファンクション(あるいはラムダ)としてデプロイされます。

簡単なエンドポイントを作成する

試してみましょう。pages/api に hello.jsというファイルを以下の内容で生成します。

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

http://localhost:3000/api/hello にアクセスしてみましょう。 {"text":"Hello"} が見られるはずです。以下に注目です。

req は http.IncomingMessageのインスタンスと事前ビルド middlewaresから構成されています。
res は http.ServerResponse helper function から構成されています。

以上です！本レッスンのまとめの前にAPI Routesを使うコツについてお話しましょう。

API Routes Details

ここではAPI Routesについて知っておくべき重要な情報を紹介します。

getStaticProps や getStaticPathsからAPI Routeを取得してはいけない

getStaticProps や getStaticPaths からAPI Routeを取得してはいけません。代わりにgetStaticProps や getStaticPathsに直接サーバーサイドのコードを記載(あるいはヘルパー関数を呼び出し)しましょう。

なぜならgetStaticProps や getStaticPathsはサーバーサイドでだけ動作し、クライアント側では動作しないからです。更に、これらの関数はブラウザ用のJSバンドルイメージに含まれません。つまり、ブラウザに送ることなくデータベースに直接クエリを実行するなどのコードを作成できます。更に詳細はWriting Server-Side codeを御覧ください。

良い使い方：フォームの入力を操作する

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はこの問題を解決するためプレビューモードという機能を持ち、API Routeを使います。より詳しく知りたい場合はPreview Modeを参照してください。

Dynamic API Routes

API Routeは通常のページと同様に動的にすることができます。より詳しくはDynamic API Routesを参照して下さい。

以上です！

次の基礎レッスンの最後ではNext.jsアプリを製品デプロイする方法を説明します。