Як показати версію вебпрограм в Next.js (next js 14 app router)

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

1. Можна прочитати та проаналізувати файли JSON самостійно:

import { readFile } from 'fs/promises';

const json = JSON.parse(

  await readFile(

    new URL('./some-file.json', import.meta.url)

  )

);

2. Або скориставшись функцією CommonJS require для завантаження файлів JSON:

import { createRequire } from "module";

const require = createRequire(import.meta.url);

const data = require("./data.json");

Залишилось налаштувати Next.js використовши next.config.js та publicRuntimeConfig.

Oтже мій footer.tsx:

import getConfig from 'next/config';

export default function Footer() {

    const { publicRuntimeConfig } = getConfig();

    return (

      <footer>

          ...

          <small>

              App Version: {publicRuntimeConfig?.version}

          </small>

      </footer>

    );

}

та мій next.config.js:

import { createRequire } from "module";

const require = createRequire(import.meta.url);

const json = require("./package.json");

const nextConfig = {

    ...

    publicRuntimeConfig: {

        version: json.version,

   },

};

export default nextConfig;

Користуйтесь на здоров’я!