Display app version, commit hash, and build timestamp in your Next.js app footer.

0-next-vercel-build-info.md

Next.js + Vercel Build Info

Inject and display build metadata in your Next.js app deployed on Vercel:

• App version from package.json
• Commit SHA from Vercel git env vars
• Build time generated once per next build

How it works

1. Read package.json for the app version.
2. Capture current ISO timestamp at build.
3. Use Vercel-provided env vars for repo + commit details.
4. Expose everything through NEXT_PUBLIC_* so it’s available in SSR and client code.
5. Render in a shared component (e.g. footer).

Vercel env vars used

• VERCEL_GIT_REPO_OWNER
• VERCEL_GIT_REPO_SLUG
• VERCEL_GIT_COMMIT_SHA

footer.tsx

export default function Footer() {
    const version = process.env.NEXT_PUBLIC_APP_VERSION
    const repoUrl = process.env.NEXT_PUBLIC_REPO_URL
    const commit = (process.env.NEXT_PUBLIC_COMMIT_SHA || '').slice(0, 7)
    const time = process.env.NEXT_PUBLIC_BUILD_TIME

    return (
        <footer className='text-sm opacity-70'>
            <a
                href={`${repoUrl}/releases/tag/${version}`}
                target='_blank'
                rel='noopener noreferrer'
                className='underline'
            >
                {version}
            </a>
            {' · '}
            <a
                href={`${repoUrl}/commit/${commit}`}
                target='_blank'
                rel='noopener noreferrer'
                className='underline'
            >
                {commit}
            </a>
            {' · '}
            {time}
        </footer>
    )
}

next.config.ts

import type { NextConfig } from 'next'

const version = require('./package.json').version
const buildTime = new Date().toISOString()

const repoUrl = `https://github.com/${process.env.VERCEL_GIT_REPO_OWNER}/${process.env.VERCEL_GIT_REPO_SLUG}`
const commitSha = process.env.VERCEL_GIT_COMMIT_SHA || ''

const nextConfig: NextConfig = {
    reactStrictMode: true,
    env: {
        NEXT_PUBLIC_APP_VERSION: version,
        NEXT_PUBLIC_BUILD_TIME: buildTime,
        NEXT_PUBLIC_COMMIT_SHA: commitSha,
        NEXT_PUBLIC_REPO_URL: repoUrl,
    },
}

export default nextConfig