DyadPortal template (coming soon)
Portal template shows Neon DB, Payload CMS and Next.js working together in a simple online store.
The Portal template is currently in development and will be available soon.
Overview
The Portal template is designed for e-commerce and business use cases—especially where you have multiple user roles (e.g. customers and employees) that require distinct permissions and interfaces.
It combines several technologies in a cohesive, production-ready setup:
- Neon DB is a serverless Postgres service with standout features like branching and time-travel restore. You can "undo" database changes just like you would with code, and easily manage development and production branches.
- Payload CMS is a modern, headless content management system. Think of it like a more flexible, extensible WordPress—built on a modern stack. It integrates seamlessly with Next.js, allowing you to host both the admin panel and customer-facing site on a single server (e.g. Vercel).
- Next.js is a full-stack React framework developed by Vercel. It enables seamless front-end and back-end integration and offers a suite of performance optimizations, especially when deployed on Vercel.
You don’t need to be an expert in these technologies to get started, but as your app evolves, becoming familiar with them will help you debug and deploy more effectively.
What it's good for
- Business applications – If you're building an app for customers or employees, start here. The Portal template offers much more out of the box than our minimal templates.
- Complex access control – It’s easy to support different roles and permissions for different data and UIs. For example, customers can view their orders, while employees access a full admin panel. Payload handles this gracefully by auto-generating the admin panel from your schema.
What it's not good for
- One-off prototypes – The Portal template requires a non-trivial setup and deployment process (as you can probably tell from the length of this doc!). If you're just making a quick demo, this may be overkill—though still usable.
- Mobile apps – Since it’s based on Next.js, the Portal template isn’t ideal for mobile apps. If you're building one, use the default React template instead.
Development
Set up Neon DB
Start by going to the Hub tab and setting up the Neon backend provider. You can connect an existing Neon account or create a new one—Neon has a generous free tier.
Use the Portal template
From the Hub, select the Portal template and create your app. This will automatically create a Neon project and link it with your app.
Make sure it works
Since the Portal template involves multiple components, verify that everything works on your machine before making changes. Start by creating an admin user—click the Admin Portal link at the bottom of the page.
The first load of the Portal template can take a while. Don’t worry—subsequent loads will be much faster.
Now you're ready to start customizing your Portal app.
Database management
As mentioned earlier, Neon DB has a few standout features that make it excellent for AI-powered development.
Undo
Neon allows you to restore your database to any point within the last 24 hours (on the free tier). If you made a mistake in Dyad, just click Undo and your database will revert to its previous state.
To retain versions beyond 24 hours, use Snapshots.
Snapshots
You can take a snapshot by opening the version list in your app and clicking Create snapshot. This is like a named save point—you can restore it anytime, even after 24 hours.
Under the hood, snapshots are Neon branches of your database.
Neon's branching is well-optimized, but creating many branches with different changes can add to your storage usage.
Production
When you're ready to launch your Portal app, follow these steps.
Unlike Supabase, the Portal stack uses a different database instance for production and local development. This is a good practice—it allows you to safely iterate on your app after launch.
First-time deployment
Click the Deploy button (top-right) to open the Deployment pane and follow these steps:
Create a database migration
Before pushing to production, create a database migration.
Payload has excellent docs, but the summary is: a migration captures schema changes since your last migration, stores them in a file, and applies them when you deploy via Vercel.
Run build checks
Run the automated build checks to catch common issues. Failing to pass these checks will block deployment.
If something breaks, don't worry—you can ask the AI to fix it and re-run the check.
Sync to GitHub
If you haven’t already, create a GitHub repo and sync your app. See the publishing guide for details.
Create a Vercel project
This is similar to the steps in the publishing guide, but with a couple key environment variables:
POSTGRES_URL– copy the Production Database URL from the deployment pane. This is different from your development DB URL in.env—this separation is intentional.PAYLOAD_SECRET– copy this from the deployment pane. It’s a random string, but it’s important you don’t change it after setting it in Vercel, or your app will break.
Create your admin user
Because the production database starts empty, you'll need to create the admin user immediately—before someone else does.
Congrats—you’ve deployed your app to production! Be sure to check that everything works as expected, since subtle differences can arise between environments. Then, go share your app with the world!
Ongoing deployment
After launch, it’s wise to be more cautious with database changes. You can update your AI rules to be production-safe.
Future changes follow similar steps:
Create a database migration (if needed)
If you made schema changes, generate a migration just like above. If not, skip this step.
Run build checks
Same process as before—check the build to catch errors early.
Push to GitHub and monitor Vercel
Sync to GitHub. This triggers a Vercel deployment. Head to your Vercel dashboard and confirm the build completed successfully.
After each deployment, it’s a good habit to manually test the app. If something goes wrong, you can roll back to a previous deployment in Vercel and use Neon's instant restore to revert the database.