my-site-template

my-site-template is a Next.js 16 portfolio website template that lets non-coders edit text, photos, videos, backgrounds, and menus directly in the browser via an inline edit mode, saving changes to content/site.json and deploying on Vercel. It is made by Sanghyeon Baek (@Mrbaeksang).

What is my-site-template?

my-site-template is a portfolio website template built on Next.js 16, React 19, and TypeScript that provides in-browser content editing so people who don't code can change their site's text and photos. It takes your content (text, images, videos, links, menus) edited on a local dev server and outputs a static-style portfolio site deployed to Vercel, with edits committed back to a JSON file in your repo. It is created by developer 백상현 / Sanghyeon Baek (@Mrbaeksang).

Key Features

• Inline editing mode — Press Ctrl + E (Mac included) in a local development session to toggle edit mode, then hover over items to change text, photos, videos, backgrounds, and menus.
• JSON-backed saves — The save button writes all changes into content/site.json, which drives the rendered site.
• Prebuilt portfolio sections — Includes About, Projects, and Contact sections, plus a contact QR code generated with qrcode.react.
• Dark mode and mobile support — Ships with dark mode via next-themes and responsive layouts for mobile screens.
• Automatic SEO plumbing — Generates link-share previews, robots.txt, and sitemap.xml automatically.
• Upload limits — Image uploads are capped at 5 MB and video uploads at 20 MB.
• Tech stack — Next.js 16, React 19, TypeScript, Tailwind CSS 4, Motion, Lucide, React Icons, next-themes, and qrcode.react.
• One-click deploy — A Deploy with Vercel button clones the repo to your GitHub account and publishes the site.

Who is it for?

• Non-developers building a personal portfolio: clone the repo, run the dev server, and edit About/Projects/Contact content visually without touching code.
• Developers who want a fast starting point: use the Next.js 16 / Tailwind CSS 4 / TypeScript base and customize colors in app/globals.css under @theme and :root.
• Students following the video course: the linked YouTube walkthrough (https://www.youtube.com/watch?v=U6zL8qittGk) guides setup and editing.
• AI-assisted editors: an AGENTS.md file documents structure and cautions for editing with AI tools.

How does my-site-template work?

1. Click the Deploy with Vercel button to create your GitHub repo and deploy the site.
2. Clone the repo locally, run npm install and npm run dev, open http://localhost:3000, press Ctrl + E, edit items, and click Save to write content/site.json.
3. Commit and push; Vercel redeploys automatically.

Editing only works on npm run dev locally — saving is disabled in deployed environments so visitors cannot alter the site.

FAQ

Is my-site-template free?

Yes. The template is released under the MIT license, so you can use and modify it freely. You need GitHub and Vercel accounts, Node.js 20.9 or newer, and Git to run and deploy it.

Can I edit the deployed site in the browser?

No. Inline editing and saving only work in local development via npm run dev. In deployed builds the save function is turned off so visitors cannot change your content; you edit locally and push changes instead.

How do I fix a wrong share-preview URL after connecting a custom domain?

Add the Vercel environment variable NEXT_PUBLIC_SITE_URL set to your domain (for example https://your-domain) and redeploy. If it is not set, the Vercel production address is used for previews.

I used an older version — should I update?

Yes. The earlier Next.js 15.2.4 version has a security advisory, and edit-API protection was added. Older versions stored content in component files, so after updating you must re-enter content in the editor or move it into content/site.json.