Next.js Admin Panel Documentation

What is this

This is a system that allows you to make your website content editable without using a CMS.

Instead of hardcoding text directly in your components, you replace it with special keys.

<h1>Welcome to my website</h1>

<h1>{c.hero_title}</h1>

Now this text can be changed from an admin panel without touching the code.

Important: You still keep full control over your layout, design, and logic. Only the content becomes editable.

How it works

The system works in a very simple way:

• You replace text in your code with keys
• Default values are stored in defaultContent.ts
• Supabase stores updated values
• Admin panel lets you edit content
• Website always shows the latest version

What you are going to do

You are not creating a new project.

You are adding this system to your existing Next.js website.

• Connect Supabase (database)
• Add environment variables
• Copy required files into your project
• Copy required files into your project
• Replace text with content keys
• Configure admin panel

After that, you will be able to edit your website content from the /admin page.

Want a faster setup? Skip the detailed guide and use the GitHub README instead.

Before you start

Make sure you have:

• A Next.js project
• Access to your code
• Basic understanding of React components

Estimated setup time: ~20–40 minutes depending on your project size

Important: This system works only with Next.js applications.

What is content system

This system is built around three main parts:

• Keys — unique identifiers in your code
• Default content — local fallback for development
• Supabase — remote storage for production

Each piece of text on your website is linked to a key.

This key is used everywhere:

• In your code
• In admin panel
• In database

Step 1. Create account

Go to https://supabase.com

Click "Start your project"

Sign in using GitHub or email.

Step 4. Create storage

Go to Storage → Create bucket

Name: images

This is required to store uploaded images.

Step 5. Get API keys

Go to Settings API and copy these values:

• Project URL
• anon public key

You will need them in the next step.

File

sections

Groups fields into logical blocks.

Example:

export const sections = {
	Hero: [
		'hero_title',
		'hero_subtitle',
	],
	Demo: [
		'demo_title', 
		'demo_subtitle'
	],
	Problem: [
		'problem_title',
		'problem_text',
	],
}

This makes editing structured and easier to manage.

labelMap

Controls how field names appear in the UI.

export const labelMap: Record<ContentKey, string> = {
	hero_title: 'Hero Title',
	hero_subtitle: 'Hero Subtitle',

	demo_title: 'Demo Title',
	demo_subtitle: 'Demo Subtitle',

	problem_title: 'Problem Title',
	problem_text: 'Problem Text',
}

You can use any language.

scrollMap

Links the editor with the preview.

const scrollToSection = (section: string) => {
		const map: Record<string, string> = {
			Hero: 'hero',
			Demo: 'demo',
			Problem: 'problem',
		}
		etc...
}

<section id='hero'> Your Content </section>

When you open a section, the preview scrolls to the corresponding block.

Important

Install dependencies

$ pnpm install

Start dev server

$ pnpm dev

Open admin panel

Using admin panel

• Live preview
• Edit text
• Save changes
• Reset to default
• Upload images

Works on both mobile and desktop.

Common mistakes

• Text was not replaced with keys
• Missing environment variables
• Supabase is not configured

Questions