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)