Menu
How can I (should I) add some "invisible" 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:
<meta version="1.2.3">,<!-- v1.2.3 -->,<div> somewhere,
261
A couple of options come to my mind:
<html> or <body> if you like. It would look like <html data-app-version="1.2.3">
65
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)
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
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 || '',
},
};
};
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With