usePublicRuntimeConfig hook for NextJs

autocompletion.png

next.config.d.ts

declare module 'next/config' {
  type ConfigTypes = () => {
    publicRuntimeConfig: {
      staticFolder: string;
      version: string;
    };
    serverRuntimeConfig: {
      mySecret: string;
    };
  };

  declare const getConfig: ConfigTypes;

  export default getConfig;
}

next.config.js

const { version } = require('./package.json');
const commit = process.env.VERCEL_GIT_COMMIT_SHA ? process.env.VERCEL_GIT_COMMIT_SHA.substring(0, 6) : undefined;

/** @type {import('next').NextConfig} */
const nextConfig = {
  publicRuntimeConfig: {
    staticFolder: process.env.STATIC_FOLDER,
    version: commit || version,
  },
  serverRuntimeConfig: {
    mySecret: process.env.SECRET;
  };
};

module.exports = nextConfig;

usePublicRuntimeConfig.ts

import getConfig from 'next/config';

const config = getConfig();

const usePublicRuntimeConfig = () => config.publicRuntimeConfig;

export default usePublicRuntimeConfig;