🛤️

Next.js公式チュートリアル要点抜粋 API Routes

2022/02/18に公開

JavaScript

Next.js

tutorial

tech

API Routes

Next.jsはAPIルートの機能を提供し、この機能でNode.jsサーバレス関数を簡単に作成することができる。

What You’ll Learn in This Lesson
このレッスンで学べるのは

APIルートの生成方法
APIルートに関する有用な情報

Creating API Routes
APIルートの作成

APIルートはNext.jsアプリ内にAPIのエンドポイントを構築する機能で、以下で示すようにpages/apiディレクトリーに関数を追加することで構築できる。

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

それをサーバレス関数として作成することも可能（ラムダとも呼ばれる）

Creating a simple API endpoint
簡単なAPIエンドポイントを生成する

早速試してみょう！まずは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のインスタンスで、いくつかのプリビルドミドルウェアを含む。
resはhttp.ServerResponseのインスタンス + いくつかのヘルパー関数。

API Routes Details
APIルート詳細

Do Not Fetch an API Route from getStaticProps or getStaticPaths
getStaticProps あるいは getStaticPathsにAPIルートをfetchする処理を書くべきではない

書けなくもないが、getStaticPropsとgetStaticPathsはサーバサイドでのみ実行されるので、ユーザーイベントでfetchする処理をここに書くと無駄な実行は発生する上にフロントエンドとバックエンドの境界線を見えにくくなり、混乱してしまう可能性がある。

A Good Use Case: Handling Form Input
良いユースケース：

Input欄のイベントにAPIルートにアクセスするハンドルを置くのはよい使い方だ。たとえばfromを作成し、APIルートにPOSTのリクエストを送るケースなどなど。APIルート内に送信されるデータを直接データベースに書き込む処理を書くのはOKだ。APIルート内の処理はクライアントイベントに影響されないため、安心してサーバサイドのコードを書くことができる。

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

Preview Mode
プレビューモード

静的ジェネレーションはヘッドレスCMSと併用すると鬼に金棒だが、下書きを作成中に最新の変更のプレビューしたいためやや不便を感じるでしょう。下書きの作成中にビルド時ではなくリクエスト時にページをレンダリングしたい、公開済みのコンテンツではなく下書きのコンテンツをfetchしたい、これらのような特殊なケースに対応するにはプレビューモードを使う方法がある。そしてこの機能はAPI Routesを使用している。詳しくはプレビューモードのドキュメンテーションを参照してください。

Dynamic API Routes
動的APIルート

APIルートも普通のページと同じく動的ルーティングをサポートする。これも詳しいことがドキュDynamic API Routesのメンテーションに書かれてるので参照してください。

API Routes

Discussion