@musicmedia/next-git-version

A Next.js component for displaying git version information in your application.

Features

• Shows git branch and commit information
• Real-time updates for uncommitted changes in development
• Links to GitHub repository
• Configurable display options
• Works in both development and production environments
• Supports Heroku deployments

Installation

npm install @musicmedia/next-git-version

Setup

1. Add the build script to your package.json:

{
  "scripts": {
    "build": "node node_modules/@musicmedia/next-git-version/dist/scripts/set-git-env.js && next build"
  }
}

2. Create an API route at app/api/git-info/route.ts:

import { NextResponse } from 'next/server'
import { getGitInfo } from '@musicmedia/next-git-version'
import { headers } from 'next/headers'

export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'

export async function GET() {
  const headersList = headers()
  const accept = headersList.get('accept')

  if (accept === 'text/event-stream') {
    const encoder = new TextEncoder()
    let closed = false

    const stream = new ReadableStream({
      start: async (controller) => {
        while (!closed) {
          try {
            const gitInfo = await getGitInfo()
            const data = encoder.encode(`data: ${JSON.stringify(gitInfo)}\n\n`)
            controller.enqueue(data)
            await new Promise(resolve => setTimeout(resolve, 2000))
          } catch (error) {
            console.error('Error in SSE stream:', error)
            controller.close()
            closed = true
            break
          }
        }
      },
      cancel() {
        closed = true
      }
    })

    return new Response(stream, {
      headers: {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
      }
    })
  }

  const gitInfo = await getGitInfo()
  return NextResponse.json(gitInfo)
}

Usage

import { GitVersion } from '@musicmedia/next-git-version'

export function Footer() {
  return (
    <footer>
      <GitVersion 
        repoUrl="https://github.com/your-org/your-repo"
        className="text-sm text-gray-500"
        label="Version: "
        showBranch={true}
      />
    </footer>
  )
}

Props

• repoUrl (required): Your GitHub repository URL
• className: Custom CSS class for the container
• showBranch: Whether to show the branch name (defaults to showing only in development)
• label: Custom label before the version info (defaults to "Version: ")

Environment Variables

For Heroku deployments, set:

• HEROKU_HOSTED=true
• HEROKU_BRANCH (optional, defaults to 'main')
• SOURCE_VERSION (set automatically by Heroku)

License

MIT