JRehkemper.de

Import Version from package.json in NextJS

Updating version-numbers is always quite tedious especially if you have to do it on multiple pages of your app.
A neat way to overcome this issue is to use the version-number from your package.json file.

Therefor we need to import the package.json in our next.config.js.

const { version } = require('./package.json')

module.exports = {};

Next we need to export the version as an environment variable.

const { version } = require('./package.json')

module.exports = {
    env: {
        version
    };
};

Now you can access it like every environment variable with process.env.version.
This could look like this.

export function NavBar() {
    return (
        <div>
        	<p>Version number is {process.env.version}</p>
        </div>
    )
}
profile picture of the author

Jannik Rehkemper

I'm an professional Linux Administrator and Hobby Programmer. My training as an IT-Professional started in 2019 and ended in 2022. Since 2023 I'm working as an Linux Administrator.