1

How to add some app version info in a next.js app (available in client) ?

How can I (should I) add some version info as "meta data" to my Next.js app, so that it is available from the browser ?

My goal is that it is not regularly visible to the user, but can be found somewhere, e.g. to confirm which version has been deployed.

I thought of these options:

  • Add a <meta version="1.2.3">,
    but there seems to be no "valid" meta tag for a version number.
  • Add a comment like <!-- v1.2.3 -->,
    but there seems to be no clean way to add comments in Next.js.
  • Add some invisible <div> somewhere,
    but that seems very "hacky" / "dirty" to me.
kca
  • 4,856
  • 1
  • 20
  • 41

2 Answers2

2

A couple of options come to my mind:

  1. Add it as a data-attribute to the root of your app, or even <html> or <body> if you like. It would look like <html data-app-version="1.2.3">
  2. Add it in the global window object to be accessible via JS. Something like `window.appVersion = "1.2.3"
Olavi
  • 821
  • 4
  • 12
1

I still didn't find a perfect solution, but here is some more information / ideas:
(I do realize that this is essentially also just "add it to the window object", as Olavi suggested)

  1. Add the version number to the Next.js page props.
  2. Add the version number to the redux store.
  3. Note: There is an RFC to add a RawHTML Component.

1. Add the version number to the Next.js page props

I've added a property appVersion to the Next.js page props. This way I can read the version number from the browser console with:

window.__NEXT_DATA__.props.pageProps.appVersion

Example:

I took the version number from the package.json, and passed it over to the Next.js page props:

package.json

"version": "1.2.3",

next.config.js:

const nextConfig = {
    serverRuntimeConfig: {
        appVersion:   process.env.npm_package_version || '',
    },
}

.getStaticProps():

import getConfig from 'next/config';
const { serverRuntimeConfig = {} } = getConfig() || {};

export const getStaticProps = function(){
    return {
        props: {
            appVersion: serverRuntimeConfig.appVersion || '',
        },
    };
};

2. Add the version number to the redux store

Add the version number to the redux store, e.g. into state.app.appVersion, then you can read it later from the browser console with:

window.__NEXT_REDUX_STORE__.getState().app.appVersion
kca
  • 4,856
  • 1
  • 20
  • 41