Camp is a premium, production-ready template for outdoor brands, camping and hiking shops, adventure outfitters, guided-trip operators, gear rental businesses, national-park and campsite ventures, and expedition companies. Built on Next.js 16, React 19, and TypeScript, it ships with 20 page templates covering 41 prerendered routes, nine product pages with colour and size selection, a working cart and full checkout, nine guided-trip pages with dates and itineraries, a six-article blog, and a fully editable content layer — no CMS or backend required.

Outdoor gear is bought by people planning a trip, not browsing a catalogue, which means a shop and an events calendar have to live in the same site without fighting each other. Camp gives each its own content collection and its own routes, then puts them on one home page: the trips carousel above the products, the journal below both. It is styled with a hand-crafted CSS design system (no utility-framework lock-in) in a warm sand, ember-orange and deep-maroon palette, with Anton headlines set against Geist and scroll-linked motion applied with restraint. Content lives in MDX and JSON files you edit in any text editor, so you can launch in hours.

Tech Stack

• Next.js 16 — App Router, server components, all 41 routes prerendered to static HTML
• React 19 — latest features; interactivity isolated to one script layer plus the cart
• TypeScript — strict mode, fully typed
• MDX content — nine products, nine trips and six articles as .mdx files (frontmatter parsed with gray-matter), served by [slug] dynamic routes
• Hand-crafted CSS design system — colours, type scale, and spacing as CSS custom-property tokens in one :root block; re-theme everything in one place
• Self-hosted fonts — Anton and Geist served locally, no third-party font CDN
• No animation library — scroll reveals, image zoom-outs, curtain wipes, the collapsing navigation, the All Pages menu, the FAQ accordion, the product tab set, five carousels, three scroll-scrubbed sections and two split-text paragraphs in one TypeScript file, no GSAP and no jQuery
• Client-side storefront — cart and order state in localStorage, no database, no vendor SDK

Included Pages and Templates

• Home — a scroll-driven story: the full-bleed hero, the split-text brand statement, the trust panel, the discover strip, the numbered process row, the gear carousel, the press slider, the journal row and the upcoming-trips carousel
• Shop — the full range in a nine-card grid, each card linking to its own product page
• Product — 9 detail pages with the full-bleed photograph, colour and size selection, add-to-cart, a four-tab panel carrying the description, shipping, warranty and four customer reviews, and a related-products row
• Category — the Camping Gear category page with its own breadcrumb and head metadata
• Trips — a nine-trip listing plus 9 trip pages, each with its banner, itinerary, photograph pair and an info panel carrying price, start date, end date and location
• Blog — a six-article index and 6 article pages with a hero, author block, share row, a three-photograph grid and two closing notes
• Storefront — a cart drawer in the navigation bar, checkout, a PayPal checkout variant, and an order confirmation page
• About — the studio story, the split-text statement, the values panels and the journal row
• Gallery — a full-width photographic grid
• Contact and FAQ — an enquiry form with map and questions, plus a standalone FAQ accordion
• Utility — Style Guide, Changelog, Licenses, 401 (password protected), 404

20 page templates, 41 prerendered routes.

Easy Content Editing

No CMS needed — content lives in editable files you can change in any text editor:

• Products — src/content/products/*.mdx. Frontmatter carries the name, the sku, the price in both spellings the design uses, the rating line, the colour and size options, and the four customer reviews. The body holds the description paragraphs.
• Trips — src/content/events/*.mdx. Frontmatter carries the price, start and end dates, location, banner and the photograph pair; the body is the itinerary, with a marker saying where the photographs sit inside it.
• Articles — src/content/blog/*.mdx. Frontmatter carries the title, summary, byline and portrait, date, reading time, photographs and the two closing notes.
• Writing a body — Markdown: paragraphs and ##### headings. The page component puts each one inside the design's own .richtext box, so the words are yours and the layout stays exactly as designed. No special syntax to learn.
• Listing order — order: and related: sit in each item's own frontmatter, so the arrangement travels with the content instead of living in a separate config file. The home page's trip carousel is the first four trips and its journal row the first two articles.
• Shared product copy — src/content/product-tabs.json holds the Shipping and Warranty tabs all nine products share, written once.
• Category — src/content/categories.json. The product category, its breadcrumb and its head metadata.
• Images — src/content/images.json carries each picture's responsive srcset, so naming an image is enough and the sizes follow.
• Theme — brand colours, fonts, type scale, and spacing are CSS custom properties at the top of public/assets/css/styles.css — change them once to re-skin the whole site.
• Navigation, footers and cards — shared components edited once in src/components/.

Performance and SEO

• Static-rendered pages out of the box (App Router) — all 41 routes prerendered, including every product, trip and article page
• Lazy-loaded imagery throughout, WebP and AVIF artwork with responsive srcsets
• Self-hosted fonts — no third-party CDN requests at runtime
• Per-page titles and metadata via the Next.js Metadata API (generateMetadata on all four dynamic routes), with Open Graph and Twitter cards
• Semantic HTML structure, a single H1 per page, a route-aware active navigation state, and clean, crawlable URLs
• Keyboard-navigable menus, accordion, tabs and variant pills, and every animation respects the reduced motion setting

Deployment

One-click deploy to Vercel — build settings are auto-detected. Also runs on Netlify, AWS Amplify, Cloudflare Pages, or any Node 20+ host.

What You Get

• Full Next.js 16 + TypeScript source code
• 20 page templates covering 41 prerendered routes
• Content collections: 9 products, 9 trips and 6 articles as MDX, plus the shared product tabs, the category and the image sizes as JSON
• A working cart and checkout flow, ready to point at your payment provider
• Self-contained HTML documentation
• Comprehensive README with setup and editing guide
• Friendly buyer support

Requirements

• Node.js 20 or higher
• Basic familiarity with the command line
• A text editor (VS Code recommended)