Formix is a premium Next.js 16 template for design studios, creative agencies and digital product teams that sell their work and their retainers from the same site. It ships 23 page templates covering 51 fully static routes: a nine-project work portfolio with individual case studies, a ten-article blog with category tabs, five service pages that each carry their own inclusions and process, four job openings, and three subscription plans with a working basket and a three-page checkout. React 19, TypeScript in strict mode, no CMS or backend required.

Built for studios that want a portfolio that argues for the work rather than just displaying it — and that want to take a retainer without bolting on a storefront. Content lives in JSON or MDX files, so you can swap in your own projects, articles, services and plans and launch in hours rather than weeks.

Tech Stack

• Next.js 16 (App Router) — every route prerendered to static HTML at build time, deployable to any static host
• React 19 — server components by default; only the basket, the buy box and the interaction layer are client components
• TypeScript — strict mode, no any, the content collections fully typed
• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
• Self-hosted webfont — Inter Tight as a single variable woff2, no third-party font requests at runtime
• gray-matter — the only runtime dependency beyond React and Next
• No animation library — no GSAP, no Lenis, no jQuery; the motion is CSS driven by one TypeScript file

Included Pages and Templates

Marketing

• Home, About Us, Contact Us
• Services listing, plus 5 individual service pages
• Careers listing, plus 4 individual job opening pages

Portfolio

• Work grid, plus 9 individual case study pages

Blog

• Blog index with category tabs and a featured strip
• 10 individual article pages

Commerce

• Pricing grid with monthly and yearly panes
• 3 plan pages, each with a billing switcher and an add-to-cart box
• 3 category pages
• Checkout, PayPal checkout, order confirmation

Utility

• Instructions, Style Guide, Licenses, Changelog, 401 password page, 404

23 page templates covering 51 routes, all prerendered as static HTML.

Easy Content Editing

Every collection is a file. Add one and it publishes itself — no component to touch.

• src/content/blog/*.mdx — the 10 articles: author, date, reading time, category, pull quote, card and banner images, and a Markdown body
• src/content/works/*.mdx — the 9 case studies: client, country, live date, card copy, banner, and a body of three regions
• src/content/careers/*.mdx — the 4 openings: position, role type, location, experience, and a body
• src/content/services/*.mdx — the 5 services: hero, tags, six inclusions and five process steps
• src/content/products.json — the 3 plans, their billing options and what the basket stores
• src/content/categories.json — the 3 categories

Which items each surface prints is a rule rather than a list: mark an article featured and it moves from the tabs to the featured strip, mark a case study featured and it moves from the work grid to the home page.

Theming is one block: every colour, type size and spacing step 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 all 51 routes.

Performance and SEO

• Every route prerendered to static HTML — no server rendering at request time
• Zero third-party requests on load; the only external call any page can make is the video lightbox's YouTube embed, and only after a visitor clicks play
• Lazy-loaded imagery with responsive srcset rungs, above-the-fold artwork eager
• Per-page metadata: title, description, Open Graph and Twitter cards, with the share image resolved to an absolute URL
• Semantic headings, aria-current on the active navigation link, keyboard support on the tabs, the accordion, the carousel and the draggable rail
• All motion respects prefers-reduced-motion, and the site is fully readable with JavaScript disabled

Deployment

Deploys to Vercel with no configuration. npm run build prerenders every route, so the output also runs on Netlify, Cloudflare Pages, GitHub Pages or any static host, and on any Node 20 server via npm run start.

What You Get

• The complete Next.js 16 project, ready to run
• 23 page templates, 51 static routes
• Six content collections, four MDX and two JSON
• A working basket and a three-page checkout flow
• Full HTML documentation
• Changelog and third-party license attributions

Requirements

• Node.js 20 or newer
• npm 10 or newer (or pnpm, yarn or bun)
• Basic familiarity with React and Next.js to customise beyond the content files