🚀

Next.js App Router でヘルスチェックをする

2023/06/26に公開

Next.js

React

tech

tl;dr

Route Handlers でできます。

app/
- api/
  - health/
    - route.[ts|js]

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ status: 'ok' });
}

参考:

なぜヘルスチェックしたい？

ECS Fargate で Next.js を動かす場合、ヘルスチェックに成功しないとタスクが無限に落とされ続けます。
これを解決するには何かしら適当なエンドポイントを用意して 200 のステータスコードを返せばよいです。

この要件を満たすだけなら別に API を用意しなくても良いですが、用意したほうがお行儀が良さそう。
また Pages Router では以下のような記述があります。

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.

適当訳: pages/api 以下のファイルは /api/* として扱われ、ページではなく API エンドポイントとして扱われます。サーバーサイドのみで動作し、クライアントサイドのバンドルサイズに影響しません。

というわけで何かしら空っぽのページを用意するよりも API 専用の何かを用意してあげたほうが良さそうです。

この記述自体は App Router の方には見当たらなかったので、もしかするともう関係なくなったかもしれないけど・・・

Pages Router 時代はどうやってた？

Next health check api とかでググると pages router 時代のお話が出てきます。

この頃は API Routes というものがあり、これで行われていたようです。

上記から引用

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

これを適当に改造すればヘルスチェック API はすぐ作れるでしょう。

App Router でのヘルスチェック

以下に参考になりそうな情報があります。

Routes Handlers というものによって同じことが実現できそうです。

ディレクトリ構造としても pages の時代によく似ていて app/ 以下のどこかに routes.[ts|js] というファイルを作成すれば良さそうです。

そして適当に GET などの関数を作成すれば良いです。
今回はヘルスチェックなので特に何もせず、ただ { status: 'ok' } を返すだけです。

app/api/health/route.ts

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ status: 'ok' });
}

この状態で /api/health にアクセスすると { status: 'ok' } が返ってくるはずです。

別に app/api/ 以下でなくとも、app/ 以下なら何でも良いです。
例えば app/api/v1/health/route.ts とかでも良いですし、app/hoge/route.ts とかでも良いです。

ただし、同じディレクトリに page.tsx などがある場合はコンフリクトするので注意してください。

そのあたりは以下に書いてあります。

超簡単な API を適当に作りたいときは app/api/ 以下に作っておけば、うっかりコンフリクトもなくて良さそう。

終わりに

ドキュメントを読もう。
でも App Router まわりのドキュメントはまだ不備があったりするので、アレ？と思ったら issue も見に行ってみよう。