Headless CMS setups often sound simple until you try to give editors a real preview of the site: the right URLs, CORS, Content Security Policy for iframes, and a server token that both Directus and your frontend trust. The Directus + Next.js Visual Editor template on Railway is built so that work is already done. You get Directus as the API and Studio, Next.js as the public site with Visual Editing enabled, plus PostgreSQL and Redis—a production-shaped baseline—wired together on Railway.
What you are actually deploying
Directus is your content hub: schema, permissions, assets, and the Admin UI (Studio). Next.js is the site your visitors see. The Visual Editor connects them: inside Studio, editors can open your live Next.js URL in a controlled way and work on structured content with the page in view instead of guessing from form fields alone.
Under the hood the template runs four pieces:
| Piece | Role |
|---|---|
| PostgreSQL | Directus’s primary database. |
| Redis | Caching and features that expect a Redis-compatible backend. |
| Directus | Public API and Studio, with health checks and environment variables that point at Postgres, Redis, and your Next.js origin. |
| Next.js | Public app with NEXT_PUBLIC_DIRECTUS_URL, NEXT_PUBLIC_SITE_URL, and a shared server token for secure server-side access to Directus. |
Domains and trust boundaries are cross-referenced between services. For example, CORS and CSP frame-src / frame-ancestors are set from the Next.js public domain so Studio can iframe the site for Visual Editing without you hand-copying URLs into four different screens.
What “one-click” really buys you
On Railway, “one-click” means you are not stitching the stack together service by service from a blank project. The template provisions the databases and both applications, resolves public URLs from Railway’s generated domains, and injects the shared static token into Directus and Next.js so they agree on authentication for server-side fetches.
From a setup perspective, the meaningful human input is intentionally small: you typically only supply admin email and password for the first Directus user. Everything else—the database connection string, Redis URL, PUBLIC_URL, Next/Directus public URLs, CORS, CSP, and the static token used on both sides—is intended to be auto-filled from the template so new projects do not start with a broken Visual Editor because someone mistyped an origin.
On first boot, a bootstrap path can create the admin user, attach the shared token, and seed the Visual Editor URL in Directus settings so Studio already knows which site URL to load in the Visual Editor module. After deploy, the practical path is:
- Open your Directus service URL from the Railway project (public domain for the Directus service).
- Sign in with the admin credentials you set at deploy time.
- Open the Visual Editor module.
The Next.js site URL should already be configured.
Why this feels fast
Speed here is not only “containers started quickly.” It is time to first successful edit:
- You skip the integration checklist (domains, CORS, CSP, token plumbing).
- You skip reconciling “what URL does Directus think the site is” vs “what URL does Next think it is.”
- You land in a flow where content and frontend are already speaking the same language.
That is the difference between “I deployed Directus” and “my team can actually use Visual Editing this week.”
After you are up: what to think about next
The template is a strong default for getting a full stack online. For long-lived production file storage (uploads surviving restarts and scaling), you will eventually want object storage—for example Railway’s S3-compatible bucket add-on—and the matching Directus storage environment variables. Plan that once you move past the first milestone; local or ephemeral disk is fine for experiments, less so for scaled or durable media.
Ready to try it? Use the Directus + Next.js Visual Editor deploy page or the Deploy on Railway button at the top of this article. For platform-specific options (domains, variables, plugins), see the Railway documentation.