When deploying this blog I wanted a quick way to monitor that specific versions of the blog had rolled to the public. The eventual solution is outlined below.

Versioning package.json

Using the pre-commit package a hook can be setup that runs prior to any commit. This looks like:

"scripts": {
  "patch": "npm version --no-commit-hooks --no-git-tag-version patch && git add package*.json",
},
"scripts": {
  "patch": "npm version --no-commit-hooks --no-git-tag-version patch && git add package*.json",
},
  • commit-hooks: Disable any default node hooks which could interfere
  • git-tag-version: Creates a version commit and tag - I wanted the version change to be part of the existing commit
  • git add package*.json: Add the updated versioning files to the commit

Going Meta

To then display this version as part of the <meta> required some small tweaks.

next.config.js
const { version } = require('./package.json');

module.exports = {
  ...mdx,
  publicRuntimeConfig: {
    version,
  }
}
next.config.js
const { version } = require('./package.json');

module.exports = {
  ...mdx,
  publicRuntimeConfig: {
    version,
  }
}
Layout.tsx
import Head from 'next/head';
import getConfig from 'next/config'; 

const { publicRuntimeConfig } = getConfig();

const Layout = ({ children }) => {
  return (
    <Head>
      <meta name='version' content={publicRuntimeConfig?.version} />
    </Head>
  );
};
Layout.tsx
import Head from 'next/head';
import getConfig from 'next/config'; 

const { publicRuntimeConfig } = getConfig();

const Layout = ({ children }) => {
  return (
    <Head>
      <meta name='version' content={publicRuntimeConfig?.version} />
    </Head>
  );
};

And voilà - the version now appears in the header:

<head>
  <meta name="version" content="0.1.65">
</head>
<head>
  <meta name="version" content="0.1.65">
</head>