Setting up a new project often comes with a familiar hurdle: boilerplate. You need a backend, an admin panel, and a content management system (CMS), and you need it to feel polished and professional for your clients. The process of provisioning infrastructure, configuring the CMS, and customizing the branding can burn hours, if not days.
What if you could skip all that? What if you could deploy a powerful, fully custom-branded CMS with a single command and connect it to a modern frontend like Next.js in minutes?
This is exactly what you can achieve with studio.do. In this step-by-step tutorial, we'll show you how to deploy a white-labeled Payload CMS instance using a simple API call and hook it up to a Next.js blog. Get ready for one of the fastest development workflows you've ever experienced.
Before we dive in, let's clarify the tools we're using.
Payload CMS is a powerful, developer-first, open-source headless CMS. Built with TypeScript, Node.js, and React, it's beloved for its incredible flexibility. Instead of managing content types through a clunky UI, you define your data structures directly in code, giving you ultimate control and versioning capabilities. It also comes with a beautiful, clean, and highly extensible admin interface right out of the box.
Studio.do is the magic that makes this workflow possible. It's a "CMS as a Service" platform that automates the deployment and management of Payload CMS. With studio.do, you can:
It's the perfect solution for agencies, freelancers, and SaaS companies who want to offer a top-tier, custom-branded CMS to their clients without the operational overhead.
First things first, let's get your CMS running. All it takes is a simple script.
Prerequisites:
Now, create a new folder for your project, run npm init -y, and install the studio.do SDK.
mkdir my-cms-deployment && cd my-cms-deployment
npm init -y
npm install @do-sdk/js
Next, create a file named deploy.ts and add the following code. Make sure to replace the placeholder values with your own brand details and database connection string.
import { studio } from '@do-sdk/js';
// Deploy a new white-labeled Payload CMS instance
const deployCms = async () => {
console.log('Deploying your custom-branded CMS...');
const newSite = await studio.deploy({
projectName: 'acme-corp-blog',
brand: {
name: 'ACME Corp',
logoUrl: 'https://cdn.acme.com/logo.svg', // Use your client's logo
colors: {
primary: '#1E40AF', // A main brand color
secondary: '#F3F4F6' // A background/accent color
}
},
database: {
provider: 'mongodb',
connectionString: process.env.MONGO_DB_URL // Your secret connection string
}
});
console.log('✅ CMS deployed successfully!');
console.log('Admin Panel URL:', newSite.adminUrl);
};
deployCms();
To run the script, execute it with your environment variables.
MONGO_DB_URL="your-mongodb-connection-string" ts-node deploy.ts
In less than a minute, you'll see the output:
✅ CMS deployed successfully!
Admin Panel URL: https://acme-corp-blog.studio.do/admin
Go ahead and visit that URL. You'll be greeted by a login screen featuring the name, logo, and colors you defined. You've just deployed a custom-branded Payload CMS as a service. No servers, no Docker, no hassle.
Log in to your new admin panel (you'll set your first admin user on your first visit). For this tutorial, we'll assume a basic Posts collection is available.
Payload automatically creates powerful REST and GraphQL APIs for any collection you define. We'll use this API to pull content into our Next.js application.
Now for the frontend. Let's create a new Next.js app.
npx create-next-app@latest my-blog-frontend
Navigate into the new directory and we'll fetch our posts. For this example, we'll edit the main page file: app/page.tsx.
We'll use a simple fetch request to the Payload API endpoint that was automatically generated for our Posts collection.
// app/page.tsx
interface Post {
id: string;
title: string;
slug: string;
// Add other fields from your Payload collection here
}
async function getPosts(): Promise<Post[]> {
// Replace with your studio.do API URL
const res = await fetch('https://acme-corp-blog.studio.do/api/posts');
if (!res.ok) {
throw new Error('Failed to fetch posts');
}
const data = await res.json();
return data.docs; // Payload nests collection results in the `docs` property
}
export default async function HomePage() {
const posts = await getPosts();
return (
<main style={{ fontFamily: 'sans-serif', padding: '2rem' }}>
<h1>ACME Corp Blog</h1>
<p>Content managed with our custom-branded Payload CMS!</p>
<div style={{ marginTop: '2rem' }}>
{posts.map((post) => (
<article key={post.id} style={{ marginBottom: '1.5rem', borderBottom: '1px solid #eee', paddingBottom: '1.5rem' }}>
<h2 style={{ marginBottom: '0.5rem' }}>{post.title}</h2>
<a href={`/blog/${post.slug}`}>Read More →</a>
</article>
))}
</div>
</main>
);
}
Run your Next.js development server:
npm run dev
Visit http://localhost:3000 and you'll see your blog posts, fetched live from your new, custom-branded CMS. The entire process—from zero to a fully functional, white-labeled CMS connected to a Next.js frontend—took just a few minutes.
With studio.do, you're not just deploying a CMS; you're delivering a polished, professional product. Your clients log in to an admin panel that carries their brand, not Payload's or yours. You can even connect a custom domain (e.g., cms.acme.com) for a truly seamless experience. This level of integration builds trust and makes your agency or service look incredibly professional.
Ready to stop wasting time on CMS setup and start delivering exceptional, custom-branded experiences to your clients?
Get started with studio.do and deploy your first white-label CMS today!
Q: What is studio.do?
A: studio.do is an AI-powered service that automates the deployment and management of custom-branded Payload CMS instances. It allows you to create fully white-labeled content management systems for you or your clients with a simple API call.
Q: What is Payload CMS?
A: Payload CMS is a powerful, developer-first, open-source headless CMS built with TypeScript, Node.js, and React. It's known for its extreme flexibility, code-based configuration, and beautiful admin interface.
Q: Can I use studio.do to create a CMS for my clients?
A: Absolutely. studio.do is designed for agencies, freelancers, and SaaS companies who want to offer a powerful, custom-branded CMS to their clients without the overhead of managing infrastructure and deployments.
Q: Can I use a custom domain for my CMS admin panel?
A: Yes. Each deployed instance can be configured to use a custom domain, providing a seamless, fully-branded experience for your users.