Nuestudio is a premium, production-ready template for creative studios, design agencies, branding shops, and independent designers. Built on Next.js 16, React 19, and TypeScript, it ships with 20 page templates covering 34 prerendered routes, an MDX-powered journal, portfolio, and shop, pricing plans with a working cart, and a fully editable content layer — no CMS or backend required.

It's styled with a hand-crafted CSS design system (no utility-framework lock-in) and a self-contained interaction layer built around scroll-driven motion. Every article, case study, and product is a Markdown/MDX file — so you can launch a real studio site in hours without touching the component code.

Live demo: https://nuestudio-nextjs.vercel.app

Tech Stack

Next.js 16 — App Router, server components, all 34 routes prerendered to static HTML
React 19 — latest features; interactivity isolated to one client component
TypeScript — strict mode, fully typed
MDX — journal, projects, and shop items via next-mdx-remote (frontmatter parsed with gray-matter), served by [slug] dynamic routes
Hand-crafted CSS design system — colors, type scale, and spacing as CSS custom-property tokens in one :root block; re-theme everything in one place
Self-hosted fonts — Plus Jakarta Sans served locally, no third-party font CDN
Zero backend lock-in — no CMS, no commerce backend; the cart persists in localStorage

Included Pages and Templates

Home — a scroll-driven story: split hero with a spinning "Lets Talk" badge, parallax studio intro, cross-fading service panels, staggered project rows with a cursor-tracking View badge, the team picker, pricing cards, a scroll-linked headline that splits as the panel behind it grows, testimonials, and an image marquee
About — studio story, the process walkthrough, odometer counters, the tools row, the team grid, and a questions accordion
Services — what the studio does, with the scroll-blurred service card stack and an FAQ
Projects — portfolio grid plus 4 case-study pages with a client and serial header, two-column prose, four gallery slots, an outcome statement, and related works
Journal — category-filtered listing plus 4 MDX articles with a hero, drop-cap intro, section-by-section body, social sharing, and related posts
Shop — product grid filtered across four category tabs, plus 6 product pages with a description, features and pages lists, a sub-category and styles sidebar, and a ten-row feature accordion
Pricing — plan comparison grid, plus 2 plan detail pages with subscription options, an includes list, a key-features comparison, and add-to-cart
Commerce — mini-cart drawer, Checkout, PayPal Checkout, Order Confirmation (UI demo, no real payment)
Utility — Style Guide, License, Changelog, 401 (password), 404

20 page templates, 34 prerendered routes.

Easy Content Editing

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

Journal posts — src/content/blog/*.mdx (frontmatter + a Markdown body of <Section> blocks). Add a file, list its slug, and the listing, the category tab, and the detail page pick it up automatically.
Case studies — src/content/projects/*.mdx, where the body spells out the layout itself: <Columns>, <Figure slot=…>, and <Outcome> each name a slot the stylesheet sizes, so a project's shape is rearranged where its text lives.
Shop products — src/content/shop/*.mdx, with <Detail label=… wrap=…> blocks for the description column and frontmatter for the price, the sidebar lists, and the feature accordion.
Pricing plans — src/content/products.json drives the pricing grid, the home page plan cards, both plan pages, and the cart from one source.
Listing order and tabs — src/content/collections.json records the order each listing shows and the category tabs; an item appears under a tab when its own category matches the tab label.
Theme — brand colors, 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.
Header, footer & cart — shared components edited once in src/components/layout/.

Performance and SEO

Static-rendered pages out of the box (App Router) — all 34 routes prerendered, including every MDX article, case study, and product
Lazy-loaded imagery throughout, in modern AVIF
Self-hosted fonts — no third-party CDN requests at runtime
Per-page titles and metadata via the Next.js Metadata API (generateMetadata on dynamic routes), with Open Graph and Twitter cards
Semantic HTML structure, a route-aware active navigation state, and clean, crawlable URLs
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 34 prerendered routes
MDX content collections: 4 journal articles, 4 project case studies, 6 shop products, plus 2 pricing plans as JSON
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)

Nuestudio - Next.js 16 Creative Studio & Design Agency Template