add current build id to footer

components/Layout.tsx

@@ -10,6 +10,7 @@ import Link from 'next/link';
 import { ReactNode, useState } from 'react';
 import { Calendar, File, Home } from 'react-feather';
 import { Messages } from 'tabler-icons-react';
+import useBuildId from '../hooks/useBuildId';
 import LayoutLink from './LayoutLink';
 import Logo from './Logo';
 import ThemeToggle from './ThemeToggle';
@@ -35,6 +36,7 @@ const links = [
 export default function Layout({ children }: { children: ReactNode }) {
   const [opened, setOpened] = useState(false);
   const theme = useMantineTheme();
+  const buildId = useBuildId();
 
   return (
     <AppShell
@@ -61,9 +63,7 @@ export default function Layout({ children }: { children: ReactNode }) {
               <LayoutLink key={ele.label} {...ele} />
             ))}
           </Navbar.Section>
-          <Navbar.Section>
-            Build `insert commit id and branch here`
-          </Navbar.Section>
+          <Navbar.Section>Build {buildId}</Navbar.Section>
         </Navbar>
       }
       header={

components/NewUpdateAvailible.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import useBuildId from '../hooks/useBuildId';
+
+function NewUpdateAvailible() {
+  const buildId = useBuildId();
+
+  useEffect(() => {
+    if (buildId && process.env.BUILD_ID && buildId !== process.env.BUILD_ID) {
+      // There's a new version deployed that we need to load
+      // SHOW MODAL
+    }
+  }, [buildId]);
+
+  return <div>NewUpdateAvailible</div>;
+}
+
+export default NewUpdateAvailible;

hooks/useBuildId.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import useInterval from './useInterval';
+
+function useBuildId() {
+  let [buildId, setBuildId] = useState('unknown');
+
+  useInterval(async () => {
+    let id = await fetchId();
+
+    setBuildId(id);
+  }, 30000); // 30 seconds
+
+  return buildId;
+}
+
+async function fetchId() {
+  let response = await fetch('/api/build-id');
+
+  if (!response.ok) return;
+
+  let data = await response.json();
+
+  return data.buildId;
+}
+
+export default useBuildId;

hooks/useInterval.tsx

@@ -0,0 +1,30 @@
+import { useRef, useEffect } from 'react';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+
+function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+
+  useIsomorphicLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+
+    // Note: 0 is a valid value for delay.
+
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+export default useInterval;

hooks/useIsomorphicLayoutEffect.tsx

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;

next.config.js

@@ -1,18 +1,28 @@
 /** @type {import('next').NextConfig} */
+const nextBuildId = require('next-build-id');
 
 module.exports = {
+  generateBuildId: () => nextBuildId({ dir: __dirname, describe: true }),
   reactStrictMode: true,
   images: {
     domains: ['images.unsplash.com'],
   },
 
-  webpack: (config) => {
+  webpack: (config, { buildId, webpack }) => {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
       use: ['@svgr/webpack'],
     });
 
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env': {
+          BUILD_ID: JSON.stringify(buildId),
+        },
+      })
+    );
+
     return config;
   },
 };

package.json

@@ -21,6 +21,7 @@
     "dayjs": "^1.10.7",
     "graphql": "^16.2.0",
     "next": "^12.1.0",
+    "next-build-id": "^3.0.0",
     "postcss": "^8.4.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

pages/api/build-id.ts

@@ -0,0 +1,8 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (_req: NextApiRequest, res: NextApiResponse): void => {
+  res.status(200).json({
+    buildId: process.env.BUILD_ID,
+  });
+};

yarn.lock

@@ -3769,6 +3769,7 @@ __metadata:
     eslint-config-next: ^12.0.8
     graphql: ^16.2.0
     next: ^12.1.0
+    next-build-id: ^3.0.0
     postcss: ^8.4.5
     react: ^17.0.2
     react-dom: ^17.0.2
@@ -4876,6 +4877,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"next-build-id@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "next-build-id@npm:3.0.0"
+  checksum: e36e15979420c343e32a5e7a55efc1300a4b12aea1637df8300f0085ca862bf78e4fd3ac969ce7c7757cfad40c3c77e02ae4859be77692c9bdcb4243cbabb810
+  languageName: node
+  linkType: hard
+
 "next@npm:^12.1.0":
   version: 12.1.0
   resolution: "next@npm:12.1.0"