Studioframe — Photography Portfolio Starter for Next.js

Studioframe is a Next.js 15 App Router starter for a photography portfolio. It ships as a real project — typed site config, components for every section, metadata and sitemap wired up — with the same design you see in the preview.

Colours, radius and type live in one CSS file; copy, plans and FAQ live in one typed config. Rename, retheme, deploy.

• Teams launching a photography portfolio on Next.js
• Developers who want typed config instead of a CMS on day one
• Agencies with a house design system to plug in
• Anyone who needs a fast, accessible site without a CSS framework

• Next.js 15 App Router with React 19 and strict TypeScript
• Typed site.config.ts drives navigation, copy, pricing and FAQ
• Header with mobile menu, hero, features, how-it-works, pricing, FAQ, CTA band and footer components
• Metadata, Open Graph and sitemap generated from config
• Plain CSS design tokens with dark-mode-ready palette
• Accessible markup with focus states and reduced-motion support
• Static preview of the homepage included for design reviews
• No CSS framework, no runtime CSS-in-JS

• A complete Next.js project (app/, components/, site.config.ts, package.json)
• app/globals.css with the design system
• README with setup and deployment notes
• preview/index.html static render

• Node.js 18+
• Next.js 15
• Any host that runs Node or static export

• Node.js 18 or newer
• npm, pnpm or yarn
• Basic React familiarity to add sections

1. Unzip and run npm install, then npm run dev

2. Edit site.config.ts — name, navigation, copy, plans, FAQ

3. Adjust tokens at the top of app/globals.css

4. Replace the hero placeholder with a product screenshot

5. Deploy with npm run build to Vercel, Netlify or your own host

• All colours, radius and fonts are CSS custom properties
• Sections are independent components; reorder in app/page.tsx
• Add a page by adding a route under app/
• Swap the font pairing by changing one Google Fonts link

• Personal — for your own private, non-commercial projects. Not for client work.
• Commercial — for one commercial project or one client project.
• Agency — for multiple client projects, up to the limits stated on this page.

No tier permits reselling or redistributing the files themselves.

Questions about Studioframe are handled through your DistroSource account — open a support ticket from the order and include your order number.