NextJS: New nonce on every application load while enabling CSP - next.js

Question

I am trying to implement strict-dynamic CSP rules for my nextjs application. I want a new nonce value at every app load, but it is not happening. Currently a value is set for every build. Since I need the nonce value to set headers for the web pages, I need it in next.config.js.
Please let me know what I'm doing wrong.
next.config.js
const { v4 } = require('uuid');
const { createSecureHeaders } = require("next-secure-headers");
const crypto = require('crypto');
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
const generatedNonce = function nonceGenerator() {
const hash = crypto.createHash('sha256');
hash.update(v4());
return hash.digest('base64');
}();
module.exports = function nextConfig(phase, { defaultConfig }) {
return {
publicRuntimeConfig: {
generatedNonce
},
headers: async () => {
return [
{
source: "/(.*)?",
headers: createSecureHeaders({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'none"],
scriptSrc: [
...(phase === PHASE_DEVELOPMENT_SERVER ? ["'unsafe-eval'"] : []),
`'nonce-${generatedNonce}'`,
"'strict-dynamic'",
],
},
},
nosniff: "nosniff",
referrerPolicy: "no-referrer",
frameGuard: "sameorigin",
})
}
]
}
};
}