Next.jsのチュートリアル、その5

Next.jsのチュートリアル、その1、Next.jsのチュートリアル、その2、Next.jsのチュートリアル、その3、Next.jsのチュートリアル、その4に続いて5つ目です。

API Routes

さーて、今日も気合入れてやってくかーって思ってたら、ページネーションが4つしかないので、サクっとイケるかも？的に淡い期待がありつつ(笑)、進めていきます。

Next.jsはAPI Routesをサポートしているので簡単にNode.jsのサーバーレスなファンクションのAPIエンドポイントを作ることが出来るとのことです。ということで、今回のブログアプリを作っていくというチュートリアルにはあんまり関連のないところなのでサクっといきます、とのこと。

ってことで、ここでは↓こんな感じで学んでいきます、と。

• API Routeの作り方
• API Routeに関する便利な情報

API Routesを作る

pages/apiの中にfunctionを作っていくことでNext.jsなAPIエンドポイントを作ることができるとのことです。で、それはServerless Functions(a.k.a Lambda)としてデプロイすることが出来るのだそうです。

ってことでやっていきましょう。

pages/apiにhello.jsというファイルを作って↓以下のように。ただレスポンスコード200でHelloっていうJSONを返すだけのヤツ。

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

↓いやー、めっちゃお手軽ｗ

で、上記のfunctionにおけるリクエストとレスポンスについて

• req: Node.jsのhttp.IncomingMessageのインスタンスで、それにプラスしてreq.cookies、req.query、req.bodyなんていうビルトインなmiddlewareが使えるのだそうです。
• res: こちらもNode.jsのhttp.ServerResponseのインスタンスで、res.status(code)、res.json(json)、res.send(body)、res.redirect([status,] path)なんてことができるとのことです

ってことでTIPS。

API Routeの使い所として、getStaticPropsやgetStaticPathsから呼ばないでね、と。それはなぜかというと、getStaticPropsもgetStaticPathsもサーバー側でのみコールされるもので、クライアント側にバンドルされもしないので、APIを用意するっていうよりは、その中で直接実装したらイイじゃないっていう話。

ユースケース: Formのインプット

PostリクエストをAPI Routeに送るっていうヤツ。そうするとデータベースに直接データを登録するような機能を作れる。API Routeのコードはクライアントバンドルには含まれないので、そういった意味でも安心してサーバーサイドのコードを書くことができますよ、と。

export default function handler(req, res) {
  const email = req.body.email
  // メールアドレスをデータベースに登録したり
}

プレビューモード

Static GenerationはヘッドレスCMSからデータを取得してページを作る時とか便利だけど、ヘッドレスCMSでドラフトを書いて、それをすぐにプレビュー表示したい時にはちょっと微妙ですよね、と。そんな時はビルド時ではなくリクエスト毎にページをレンダリングさせることでドラフトのコンテンツを取りに行くことができますよ、と。 で、Next.jsはプレビューモードがあって、そういったことが出来るわけだけど、そのPreview ModeはAPI Routesを活用しているとのことで。

Preview Modeのドキュメントみたけど、APIでプレビューモードかどうかを判別してHTTPのヘッダにそれっぽい情報を付加してやることで、getStaticPropsの中で、プレビューの場合だけリクエスト毎にレンダリングするようにして〜っていう実装。

Dynamic API Routesってのもあるらしい

Pageと同様にAPIにもDynamicがある、と。これもドキュメント読んだけど、pages/api/post/[pid].jsこんな感じでカッコで括るっていうのは同じな感じで、コードも↓のように書くと、例えば/api/post/abcだったらPost: abcがレスポンスされますよ、とのこと。

export default function handler(req, res) {
  const { pid } = req.query
  res.end(`Post: ${pid}`)
}

ってことで、API Routesは以上っす。