Visions In Code

Friends and fellow Sitecorians, I hope you are enjoying summer(in the northern hemisphere) 🙂

Today’s post will be about adding a health check to your NextJS app.

We are running our NextJS apps in Kubernetes (AKS). When deploying a NextJS app, it takes some time before the new app is fully running, which means there will be a slight downtime until the website “is back again” 😦

So how do we prevent this?

If it was the CD, then it would be okay because of the health checks endpoints:
/healthz/live
/healthz/ready

So how do we do something similar with the NextJS apps? A peculiar case for the Sitecore dinosaurs!

API Routes to the rescue! Let’s have a quick read at https://nextjs.org/docs/pages/building-your-application/routing/api-routes

API routes provide a solution to build your API with Next.js.
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.

*If you are running on version 13 or newer, you can instead use Route Handlers

Wonderful! With API routes, we can now add our own health check endpoint 🙂

Let’s start by locating the api folder in our NextJS app => src/pages/api

Next will be to create a Typescript file. We will call it healthcheck.ts. This will also be the endpoint name => (hostname)/api/healthcheck

import { NextApiRequest, NextApiResponse } from 'next';

// The endpoint will be (hostname)/api/healthcheck
export default function handler(_req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ status: 'ok' });
}

Woohoo! We have a fully functioning health check (endpoint) that will return 200 when the NextJS app is up and running and telling us it is healthy 🙂

Now we just have to add the new health check to our deployment manifest for the Next JS app:

startupProbe:
  httpGet:
    path: /api/healthcheck
    port: 3000
    httpHeaders:
    - name: X-Kubernetes-Probe
      value: Startup
  timeoutSeconds: 300
  periodSeconds: 30
  failureThreshold: 10

Next time we deploy, the “old” NextJS pod will not “be replaced” by the new NextJS pod until the health check returns 200. No more downtimes 🙂

I hope this will help other fellow Sitecore dinosaurs on their NextJS journey.

That’s all for now folks 😊