MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: version guard — prompt stale clients to refresh after deploys
All checks were successful
Build and Push Docker Image / build (push) Successful in 7m42s
Details

Browse Source 
- Inject NEXT_PUBLIC_BUILD_ID at build time via next.config.ts
- /api/version static route returns current build ID
- VersionGuard client component checks on tab focus + every 5 min
- Shows persistent toast with Refresh button (no auto-reload)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-03-06 10:54:52 +01:00
parent a358e9940d
commit 8427999578
4 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
next.config.ts
View File

@@ -2,6 +2,9 @@ import type { NextConfig } from 'next'
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
output: 'standalone', output: 'standalone',
env: {
NEXT_PUBLIC_BUILD_ID: Date.now().toString(),
},
serverExternalPackages: ['@prisma/client', 'minio'], serverExternalPackages: ['@prisma/client', 'minio'],
typescript: { typescript: {
// We run tsc --noEmit separately before each push // We run tsc --noEmit separately before each push

7
src/app/api/version/route.ts Normal file
View File

@@ -0,0 +1,7 @@
import { NextResponse } from 'next/server'
export const dynamic = 'force-static'
export function GET() {
return NextResponse.json({ buildId: process.env.NEXT_PUBLIC_BUILD_ID })
}

2
src/app/layout.tsx
View File

@@ -3,6 +3,7 @@ import './globals.css'
import { Providers } from './providers' import { Providers } from './providers'
import { Toaster } from 'sonner' import { Toaster } from 'sonner'
import { ImpersonationBanner } from '@/components/shared/impersonation-banner' import { ImpersonationBanner } from '@/components/shared/impersonation-banner'
import { VersionGuard } from '@/components/shared/version-guard'
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@@ -24,6 +25,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className="min-h-screen bg-background font-sans antialiased"> <body className="min-h-screen bg-background font-sans antialiased">
<Providers> <Providers>
<VersionGuard />
<ImpersonationBanner /> <ImpersonationBanner />
{children} {children}
</Providers> </Providers>

47
src/components/shared/version-guard.tsx Normal file
View File

@@ -0,0 +1,47 @@
'use client'
import { useEffect, useRef } from 'react'
import { toast } from 'sonner'
const CLIENT_BUILD_ID = process.env.NEXT_PUBLIC_BUILD_ID
export function VersionGuard() {
const notified = useRef(false)
useEffect(() => {
async function checkVersion() {
if (notified.current) return
try {
const res = await fetch('/api/version', { cache: 'no-store' })
if (!res.ok) return
const { buildId } = await res.json()
if (buildId && CLIENT_BUILD_ID && buildId !== CLIENT_BUILD_ID) {
notified.current = true
toast('A new version is available', {
description: 'Refresh to get the latest updates.',
duration: Infinity,
action: {
label: 'Refresh',
onClick: () => window.location.reload(),
},
})
}
} catch {
// Network error — ignore
}
}
// Check on tab focus (covers users returning to stale tabs)
window.addEventListener('focus', checkVersion)
// Also check every 5 minutes for long-lived tabs
const interval = setInterval(checkVersion, 5 * 60 * 1000)
return () => {
window.removeEventListener('focus', checkVersion)
clearInterval(interval)
}
}, [])
return null
}