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

Formix - Next.js 16 Creative Agency Template