Skip to main content
Studio is the built-in visual CMS included with next-dev-portfolio, powered by @olonjs/studio. It gives you a live, form-driven editor for every section of your portfolio — no code required. Navigate to /admin on your site and you can update hero text, bio copy, skills, project case studies, blog posts, and more, all from a single interface.

​
Accessing Studio

Open Studio by visiting the /admin route on your site:
  • Locally: http://localhost:3000/admin
  • On Vercel: https://your-portfolio.vercel.app/admin
Studio renders an editable view of your portfolio content. Every page section exposes form fields generated directly from its Zod schema, so the editor always stays in sync with the shape of your data.

​
Save Modes

How Studio persists your changes depends on where you’re running it.

​
Local Mode

When you run the dev server locally without a Save2Repo configuration, Studio writes changes directly to the JSON files in src/data/. The save is instant and requires no external services. Use this mode when developing or previewing content changes before pushing to production.

​
Save2Repo Mode

When your site is deployed to Vercel and the Save2Repo integration is enabled, Studio commits the updated JSON files back to your connected GitHub repository. Each save triggers a new Vercel deployment, so your live site reflects the change automatically within seconds.
Save2Repo requires the Vercel integration and a properly configured ADMIN_PUBLIC_KEY environment variable. See the deployment guide for setup instructions.

​
What You Can Edit

Studio gives you full editorial control over every content layer in your portfolio:
  • Page sections — home hero, bio band, skills stack, work preview, contact block, and more
  • Blog posts — title, body (Markdown), tags, date, and cover image
  • Projects / case studies — problem, architecture, result, stack, featured flag, and images
  • Site config — site name, metadata, and social links
  • Navigation menus — labels, links, and order

​
Asset Uploads

Studio includes a built-in asset uploader accessible from any image field. Upload a file directly from your browser and Studio stores it in your project. In Save2Repo mode, the uploaded file is committed to your GitHub repo alongside the JSON content changes.
For best performance, upload WebP images no wider than 1600px, or reference Unsplash URLs with ?w=1600&q=80 query parameters — the approach used by the default content.

​
Admin Access Protection

The /admin route and all mutate API endpoints (/api/save-to-file, /api/upload-asset, /api/list-assets) are guarded by middleware.
  • On Vercel: when VERCEL_ENV is set and ADMIN_PUBLIC_KEY is present, the middleware enforces authentication via a session cookie. Only authenticated users can access Studio or call the save/upload APIs.
  • Locally: the middleware bypasses authentication so you can edit freely during development.
Never expose ADMIN_PUBLIC_KEY in client-side code or public environment variables. Keep it server-side only.

​
Next Steps

Editing Content

Learn how to edit page sections, blog posts, and project case studies step by step.

Managing Assets

Upload and manage images and media files used across your portfolio sections.