This is a Next.js project bootstrapped with create-next-app.
Production (Vercel) environment
The browser talks to same-origin /api/* on https://leaguesports.co.za. Next.js rewrites unmatched /api paths to the Railway Express API so Google OAuth cookies are first-party.
Set these on the Vercel project (Production):
| Variable | Required | Value |
|---|
NEXT_PUBLIC_SITE_URL | yes | https://leaguesports.co.za |
NEXT_PUBLIC_API_URL | recommended | https://league-sports-api-production.up.railway.app |
API_ORIGIN | optional | Same Railway origin. Overrides NEXT_PUBLIC_API_URL for the rewrite destination if you ever need them to differ. |
NEXT_PUBLIC_SANITY_PROJECT_ID | yes | Sanity project id (sitemap + pages) |
NEXT_PUBLIC_SANITY_DATASET | yes | Sanity dataset |
NEXT_PUBLIC_GA_MEASUREMENT_ID | optional | Google Analytics id |
ABLY_API_KEY | if padel realtime is used | Ably API key |
SANITY_API_TOKEN | if venue claim writes | Sanity write token |
Do not set NEXT_PUBLIC_API_URL to https://leaguesports.co.za — that loops the /api proxy.
The hardcoded production Railway origin is a fallback only when VERCEL_ENV=production. Vercel Preview and local next dev without API_ORIGIN / RAILWAY_API_URL / NEXT_PUBLIC_API_URL do not proxy or server-fetch production.
On the Railway API (not this repo), keep:
GOOGLE_REDIRECT_URI=https://leaguesports.co.za/api/auth/providers/google/callback-url
FRONTEND_URL=https://leaguesports.co.za
Google Cloud Console authorized redirect URI must be that same callback URL. Local Next.js routes that are not proxied: /api/realtime*, /api/venues/claim, /api/venues/search, fixture feed/live, and /api/f1-replay*. Coverage notify (/api/intents/coverage, /api/intents/coverage/unsubscribe) is proxied to Railway.
GA4 conversions (#188)
Client helper: track(event, params) in src/lib/analytics/track.ts. Fires via existing gtag from @next/third-parties/google when NEXT_PUBLIC_GA_MEASUREMENT_ID is set. Events are client-only (no SSR double-fire). No emails or names in event params.
Mark these as GA4 conversions (Brandon):
| Event | When |
|---|
game_start | Live padel / golf / darts start |
game_lock | Scorecard lock or capture result |
generate_lead | Coverage notify submit (POST /api/intents/coverage) |
share_click | WhatsApp or copy-link after start / lock / organise |
Other funnel events (not conversions): cta_click, deep_link_land, auth_soft_wall, roadmap_vote, conversion_fallback.
Params include page_type, cta_slot (hero | sticky | inline | empty), and sport/city/slug enums — never PII.
Local development (padel match create)
The browser always calls same-origin /api/* on this Next.js app. Do not fetch Railway (or :3100) from client code.
To create a match on /padel/new:
- Run Postgres (the API needs
DATABASE_URL).
- Start the sibling
league-sports-api on port 3100.
- Point this app’s rewrite at that process:
NEXT_PUBLIC_API_URL=http://localhost:3100
API_ORIGIN overrides NEXT_PUBLIC_API_URL for the rewrite destination if you need them to differ.
npm run dev and open http://localhost:3000.
If league-sports-api is not listening, Start Match shows an unreachable error that names that origin (Postgres is required for a real create).
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
