DEV Community

loading...
Cover image for Displaying a Deployment Status Badge for your Next.js App on your Github Readme

Displaying a Deployment Status Badge for your Next.js App on your Github Readme

felixmohr profile image Felix Mohr ・2 min read

This article was first published on https://devx.sh.

Some webapp deployment providers, like Netlify, automatically generate badges for displaying the deployment status of your project. Others, like Vercel, don't.

It is, however, quite straight forward to implement your own solution for this use case if you use a provider that is integrated with the Github API, like Vercel.

I have published an NPM package deployment-badge to use with your Next.js app, so you can get started as fast as possible. DevX.sh (Github) is an example of an app using deployment-badge.

Deployment Badge

Let's see how to use this package.

How to use the NPM package to display a status badge on your Readme

Install deployment-badge with your package manager:

yarn add deployment-badge or npm install --save deployment-badge

Create an API handler as follows in the directory pages/api of your Next.js project:

import type { NextApiRequest, NextApiResponse } from 'next'
import deploymentBadgeHandler from 'deployment-badge'

const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  await deploymentBadgeHandler(req, res, { deploymentsUrl: DEPLOYMENTS_URL, namedLogo: 'vercel', env: 'Production' })
}

export default handler
Enter fullscreen mode Exit fullscreen mode

If you aren't using typescript, simply omit the types above.

The third parameter of deploymentBadgeHandler accepts these values as options:

This handler will generate JSON responses that can be used by Shields.io, from where they will be added to the README.md:

[![Deployment Status](https://img.shields.io/endpoint?url=https://devx.sh/api/deployment)](https://devx.sh)
Enter fullscreen mode Exit fullscreen mode

Replace the URL above with the URL of your deployed handler.

Check out the source code of deployment-badge

The source code of this project is quite concise itself. If you are interested, you can find the whole code at Github.

Discussion (0)

pic
Editor guide