Notify users about new deployments with Next.js + SWR

// scripts/create-version-json.mjs

import { writeFile } from 'fs/promises'

async function createVersionJson() {
	const versionJson = {
		timestamp: Date.now()
	}

	const filePath = join(__dirname, '../public/version.json');

	try {
		await writeFile(filePath, JSON.stringify(versionJson), {
			encoding: 'utf8',
			flag: 'w+' //  open the file for reading and writing, positioning the
			//             stream at the beginning of the file. The file is
			//             created if it does not exist.
		})

		console.log(`✅ Version timestamp is now ${versionJson.timestamp}`)
	} catch (error) {
		console.error('❌ Error creating file:\n', error)
	}
}

// call the function so that it can be executed as a node script
createVersionJson()

// package.json

{
...
	"scripts": {
		...
		"predev": "node scripts/create-version-json.mjs",
		"dev": "next dev",

		"prebuild": "node scripts/create-version-json.mjs",
		"build": "next build",
		...
	}
...
}

// lib/usePageLoadVersion.ts

import useSWRImmutable from 'swr/immutable'

import versionJSON from '../public/version.json'

export default function usePageLoadVersion() {
	const { data, isLoading } = useSWRImmutable('pageLoadVersion', () => versionJSON.timestamp)

	return { pageLoadVersion: data, isLoading }
}

// lib/useLatestVersion.ts

import useSWR from 'swr'

export function useLatestVersion() {
	const { data, isLoading } = useSWR('latestVersion', fetchLatestVersion, {
		revalidateOnFocus: true,
		revalidateIfStale: true,
		revalidateOnReconnect: true,
		
		// we don't need to check on mount as the user has just entered the page
		revalidateOnMount: false
	})

	return { latestVersion: data, isLoading }
}

async function fetchLatestVersion() {
	const response = await fetch('/version.json', {
		headers: {
			'cache-control': 'no-cache'
		}
	})

	const version = await response.json()

	return version.timestamp as number
}

// components/NotifyNewVersion.tsx

export default function NotifyNewVersion() {
	const { latestVersion, isLoading: isLoadingLatest } = useLatestVersion()
	const { pageLoadVersion, isLoading: isLoadingPageLoad } = usePageLoadVersion()

	const isLoading = isLoadingLatest || isLoadingPageLoad

	if (isLoading) {
		return <span>Loading...</span>
	}

	// latestVersion and pageLoadVersion will be undefined while loading,
	// so we check if both are truthy before comparing their values
	const hasNewVersion = Boolean(latestVersion && pageLoadVersion)
		? latestVersion !== pageLoadVersion
		: false	

	if(!hasNewVersion) {
	  return null
	}

	return (
		<>
			<span>
				The app has a new version!
			</span>

			<button 
				onClick={() => window.location.reload()} 
				type="button"
			>
				Click here to update
			</button>
		</>
	)
}

// pages/your-page.tsx

import NotifyNewVersion from '../components/NotifyNewVersion'

export default function PageWhereUsersWillBeNotified() {
	return (
		<main>
			<NotifyNewVersion />
		</main>
	)
}

// pages/_app.tsx

import type { AppProps } from 'next/app'

import NotifyNewVersion from '../components/NotifyNewVersion'

import '../styles/globals.css'

export default function App({ Component, pageProps }: AppProps) {
	return (
		<>
			<NotifyNewVersion />

			<Component {...pageProps} />
		</>
	)
}

'use client' // <-- just add this line

// ... the rest of the component stays the same as before:

export default function NotifyNewVersion() {
	const { latestVersion, isLoading: isLoadingLatest } = useLatestVersion()
	const { pageLoadVersion, isLoading: isLoadingPageLoad } = usePageLoadVersion()

	const isLoading = isLoadingLatest || isLoadingPageLoad

	if (isLoading) {
		return <span>Loading...</span>
	}

	// latestVersion and pageLoadVersion will be undefined while loading,
	// so we check if both are truthy before comparing their values
	const hasNewVersion = Boolean(latestVersion && pageLoadVersion)
		? latestVersion !== pageLoadVersion
		: false	

	if(!hasNewVersion) {
	  return null
	}

	return (
		<>
			<span>
				The app has a new version!
			</span>

			<button 
				onClick={() => window.location.reload()} 
				type="button"
			>
				Click here to update
			</button>
		</>
	)
}

// app/app/nested/layout.tsx -- `/app/app` is duplicated in order to have `/app` in the route and easily indicate where you are while testing this

import type { ReactNode } from 'react'
import NotifyNewVersion from '../../../components/NotifyNewVersion'

export default function NestedRouteLayout({ children }: { children: ReactNode }) {
	return (
		<>
			{children}

			<NotifyNewVersion />
		</>
	)
}

// lib/useHasNewVersion.ts

import useSWR from 'swr'

import { useLatestVersion } from './useLatestVersion'
import { usePageLoadVersion } from './usePageLoadVersion'

export function useHasNewVersion() {
	const { latestVersion } = useLatestVersion()
	const { pageLoadVersion } = usePageLoadVersion()

	// wait until both versions are available
	const shouldCheck = Boolean(latestVersion && pageLoadVersion)

	const { data, isLoading } = useSWR(
		shouldCheck ? [latestVersion, pageLoadVersion] : null,
		() => latestVersion !== pageLoadVersion
	)

	return { 
		hasNewVersion: data, 
		isLoading: isLoading || shouldCheck === false 
	}
}

// components/NotifyNewVersionWithHook.tsx

export default function NotifyNewVersionWithHook() {
	const { hasNewVersion, isLoading } = useHasNewVersion()

	if (!hasNewVersion)
		return null

	return (
		<>
			<span className={styles.title}>There is a new version!</span>

			<button 
				className={styles.button} 
				onClick={() => window.location.reload()}
			>
				Click here to update
			</button>
		</>
	)
}