Grin Golf is a Next.js 16 template for golf academies, pro shops, country clubs and sports equipment brands — anyone who has to show a range, take an order and sell a membership from the same site. Built on the App Router with React 19 and TypeScript in strict mode, it ships 19 page templates covering 34 fully static routes, with 6 product pages, 3 membership tiers and a 7-post blog driven entirely by MDX files, plus a working basket and a three-page checkout. No CMS or backend required.

Whether you coach juniors, fit clubs, run a members' club, sell apparel or stock a range's shop, Grin Golf gives you every page a season needs. Content lives in MDX and JSON files — add a product and it appears in Shop All, in its category tab, in the related strip of every other product 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, small client islands for the basket and the interaction layer
• 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, Plus Jakarta Sans, Inter and Big Shoulders Display 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
• localStorage basket — React state sharing one store across the drawer, both checkouts and the confirmation page, with no server
• Zero animation libraries — the scroll reveals, tab sets, testimonial slider, accordions and overlays are one TypeScript file

Included Pages and Templates

Core pages

• Home with hero, featured products, category tabs, membership tiers, testimonials and FAQ
• About with the studio story, counters and a values grid
• Contact with an enquiry form and club details

Shop

• Shop All with six product category tabs
• 6 product detail pages with option pills, live price, add to cart, payment icons and a four-row FAQ
• Basket drawer with quantity editing, removal, running subtotal and a suggested-products empty state

Checkout

• Checkout with customer, shipping and billing fields and an order summary
• PayPal checkout layout
• Order confirmation listing the order that was placed

Membership

• Pricing with three tiers
• 3 plan detail pages with the includes list and full plan copy

Blog

• Blog index with a featured article and six category tabs
• 7 full-length article pages with byline, banner, pull quotes and a share row

Account and utility pages

• Login and signup
• Style guide, licence, changelog
• 401 password-protected page and a 404 page

19 page templates. 34 static routes.

Easy Content Editing

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

• src/content/products/*.mdx — the 6 items: category, price, pictures, review count and rating, stock line, the option sets, the full variant table with a price and picture per combination, and the four FAQ rows
• src/content/blog/*.mdx — the 7 articles: excerpt, author, date, card picture and banner
• src/content/plans/*.mdx — the 3 tiers: tagline, price, billing period, the includes list and the two colours the design sets inline
• src/content/catalog.json — which items sit under each shop and blog tab, and what the home page features
• src/content/images.json — the responsive srcset for each picture, so a card names its picture once

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 product file and it appears in Shop All, in its category tab, in the related strip of the other product pages, on the home page if it is among the first four, and at its own route — with no component to touch.

Body copy is Markdown: headings, paragraphs, lists, quotes 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 the tab sets and the option pills, keyboard-reachable dropdown and overlays
• 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. The basket lives in the visitor's browser.

What You Get

• The complete Next.js 16 project source
• 19 page templates covering 34 static routes
• 6 product pages, 7 blog articles and 3 membership tiers as editable MDX
• A working basket and a three-page checkout, with no backend
• 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