
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 typecheckcleanHand-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 scoresrc/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: swapand zero third-party requestsLazy-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-motionsupport, 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
Waida Studio