Goal is a Next.js 16 template for football tournaments, sports clubs, leagues and streaming platforms — anyone who has to publish a schedule, show results as they land, and turn a passing visitor into someone who turns up. Built on the App Router with React 19 and TypeScript in strict mode, it ships 15 page templates covering 36 fully static routes, with 18 match pages and a 5-post blog driven entirely by MDX files. No CMS or backend required.

Whether you run a five-a-side league, a youth academy tournament, a regional cup, a supporters' club or a sports streaming channel, Goal gives you every page a season needs. Content lives in MDX files — add a match and it appears in the fixture table, in the Upcoming tab, on the home page and at its own URL without touching a component — so you can launch in hours rather than weeks.

Tech Stack

• Next.js 16 — App Router, every route prerendered to static HTML at build time
• React 19 — server components by default, one small client island for behaviour
• TypeScript — strict mode, npm run typecheck clean
• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
• Self-hosted webfonts — Anton and Inter Tight as woff2, no third-party font requests at runtime
• MDX content layer — gray-matter frontmatter with a prose parser that renders into the design's own markup
• Zero animation libraries — the scroll reveals, scroll-linked sections, sliders, tab sets and lightbox are one TypeScript file

Included Pages and Templates

Core pages

• Home with hero video, achievements counters, streaming reel and FAQ
• About with an animated split-text mission title and a partner board
• Contact with an enquiry form and club details

Tournament pages

• Tournaments index with Upcoming and Past tabs
• 18 match detail pages with crests, scores, countdowns, venue, format and prize pool
• Fixtures table with an expanding See More panel

Blog

• Blog index with a featured article and a card grid
• 5 full-length article pages with byline, banner, pull quote and closing note

Utility pages

• Style guide, licenses, changelog, privacy policy, terms of conditions
• 401 password-protected page and a 404 page

15 page templates. 36 static routes.

Easy Content Editing

Everything a season changes lives in src/content/ as MDX. Edit a file, rebuild, done.

• src/content/tournaments/*.mdx — the 18 matches: status, both clubs and crests, venue, location, format, prize pool, coverage, and either the countdown and kick-off or the final score
• src/content/blog/*.mdx — the 5 articles: excerpt, date, reading time, images, byline, pull quote and closing block

Each file states its own order, so the sequence the design was built around lives with the content instead of in a separate index. Add a match file and it appears in the right tab, in the fixture table, on the home page if it is among the first six, and at its own route — with no component to touch.

Body copy is Markdown: headings, paragraphs, lists and figures. A prose parser places each block inside the design's own markup, so the words stay editable and the layout stays exact.

Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the :root block at the top of public/assets/css/styles.css. Change a value there and it propagates across every page.

Performance and SEO

• Every route prerendered as static HTML, ready for a CDN
• Per-page title, description and Open Graph and Twitter card metadata
• Absolute share-image URLs so link previews resolve
• Self-hosted fonts with font-display: swap and zero third-party requests
• Lazy-loaded imagery, above-the-fold artwork eager
• Semantic markup with one H1 per page, real buttons, a skip link and landmarks
• Roving tabindex on tab sets, keyboard-reachable dropdown and lightbox
• Full prefers-reduced-motion support, and readable with JavaScript off

Deployment

Deploys to Vercel, Netlify, Cloudflare Pages or any static host. npm run build prerenders every route; there is no server, no database and no API to configure.

What You Get

• The complete Next.js 16 project source
• 15 page templates covering 36 static routes
• 18 match pages and 5 blog articles as editable MDX
• The original stylesheet and self-hosted webfonts
• Full HTML documentation
• Changelog and third-party license file

Requirements

• Node.js 20 or newer
• npm 10 or newer, or pnpm, yarn or bun