Directus + Next.js
IntermediateWeb AppThe open-source backend platform on your own PostgreSQL or MySQL database, rendered by Next.js.
Published 27 September 2026
About Directus + Next.js
Directus is an open data platform that turns a PostgreSQL database into a complete application backend: instant REST and GraphQL APIs generated from your schema, built-in authentication with granular role-based access control, file asset management, event-driven Flows, and realtime subscriptions, all administered through a no-code studio the whole team can use. Instead of hand-writing a CRUD layer, the backend exists as soon as the database does, and the schema stays a standard SQL schema you own.
PostgreSQL is a first-class part of this stack, not an implementation detail. Directus introspects and wraps the database rather than replacing it, so tables, joins, and constraints stay ordinary Postgres that any other tool can query, back up, or migrate. That database-first design is also the practical difference from fully managed platforms like Supabase or Convex: the Directus instance and its database are processes you run, whether on the managed Directus Cloud add-on or on infrastructure you control.
The frontend is Next.js, fetching data from Directus's REST or GraphQL endpoints or through the official TypeScript SDK, which generates types from your collections so queries stay type-safe end to end. React Server Components render straight from Directus data, ISR keeps pages fast without full rebuilds, and the same API serves any additional client, from mobile apps to scripts.
A serverless platform deploys the Next.js app with zero configuration, and the other hosting options cover teams that would rather deploy elsewhere; either way, that host serves only the frontend. The Directus instance needs a home of its own: the managed Directus Cloud add-on, a container platform running Directus's official one-click template, or self-hosting on a VPS. The result suits teams that want managed-backend convenience while keeping their data in a plain Postgres database they fully control.
Key Features
- ✓Instant REST and GraphQL APIs generated directly from your PostgreSQL schema
- ✓Built-in authentication, granular role-based access control, and file asset management
- ✓Flows for event-driven automation and webhooks without a separate job runner
- ✓Realtime subscriptions over WebSockets for live data in the Next.js UI
- ✓Data lives in a standard PostgreSQL database you can query, back up, and migrate independently
- ✓TypeScript SDK with generated types for type-safe queries from Next.js
When to Use Directus + Next.js
- →Full-stack web apps that need a database-backed API, auth, and files without writing a custom backend
- →Internal tools and admin panels layered over PostgreSQL data the team already has
- →SaaS products that want managed-backend convenience with the data in a self-owned database
- →Projects where content and app data should live in one backend with a shared permission model
Pros
- One self-contained backend covers the database API, auth, files, automation, and admin UI
- The schema stays a normal PostgreSQL schema, so the data remains fully portable and queryable
- Free core tier with self-hosting on every plan, or fully managed hosting on Directus Cloud
- REST and GraphQL served side by side from the same instance, with realtime subscriptions included
Cons
- The Directus instance and its PostgreSQL database need their own hosting and operations, unlike fully managed platforms
- Granular access control takes real configuration time to learn and get right
- Commercial use above the Open Innovation Grant threshold requires a paid license
Database Options for Directus + Next.js
Directus + Next.js with PostgreSQL
The default and best-supported Directus backend, and what this stack's pricing and operations assume. Full JSONB support, mature extensions, and the widest set of community examples. MySQL and SQLite below are supported alternatives if the team is already in those ecosystems.
Directus + Next.js with MySQL
A first-class Directus backend if the team already runs MySQL. Feature support is comparable, though Directus's own tooling and most published examples skew toward PostgreSQL.
Directus + Next.js with SQLite
Zero-administration single-file option for local development and small single-server deployments. Not suited to production apps with concurrent write load.
These are highlighted picks. To see all the tools, check the Databases category.
Hosting Options for Directus + Next.js
Deploy Directus + Next.js on Vercel
Zero-config deploys for the Next.js app with native ISR support and a preview environment for every pull request, on the free Hobby tier or Pro at $20 per seat. It hosts only the frontend, so the Directus side pairs with the managed Directus Cloud add-on or a container platform.
Deploy Directus + Next.js on Netlify
A comparable git-based deploy platform for the Next.js app if you'd rather not use Vercel, with ISR support and a free tier, then Personal at $9/mo or Pro at $20/mo. Like Vercel, it hosts only the frontend, so the Directus instance needs its own home.
Deploy Directus + Next.js on Railway
Runs both halves in one place: the Next.js service and a Directus deployment from Directus's official one-click template, with managed PostgreSQL alongside both. The Hobby plan's roughly $5/mo usage credit covers a small setup, though two always-on services plus a database usually bill above it.
Deploy Directus + Next.js on Render
A persistent-service platform with an official guide for deploying Directus's Docker image on managed PostgreSQL, and standard Next.js hosting on the same account. Directus needs an always-on paid instance (from around $7/mo) and a paid database, since free services sleep after inactivity and the free PostgreSQL expires after 30 days.
Deploy Directus + Next.js on Hetzner
A flat-rate VPS that runs the entire stack on one machine: the Directus container with its PostgreSQL database and the Next.js app behind a reverse proxy. The most control for the least recurring cost, at the price of owning the server operations yourself.
These are highlighted picks. To see all the tools, check the Hosting & Cloud category.
Directus + Next.js Add-ons
Each addition below extends this stack with a capability the base stack works fine without. None are required: include the ones your product actually needs when building this stack, and skip the rest.
CI/CD Add-ons
Add CI/CD when you want a dedicated pipeline for running tests, linting, or multi-stage builds before a deploy goes out. Many hosting platforms already redeploy automatically on every push on their own — a CI/CD tool adds the most value on top of that by gating the deploy on a passing test suite, and matters even more when the hosting choice does not auto-deploy at all, such as a self-hosted server.
Directus + Next.js with GitHub Actions
Runs the test and deploy pipeline on every push to GitHub, building and shipping the Next.js app to the host chosen above.
Directus + Next.js with GitLab CI/CD
The same pipeline role for projects whose repositories live on GitLab, with shared runners building the Next.js app and deploying it to whichever hosting option is selected.
These are highlighted picks. To see all the tools, check the CI/CD Pipelines category.
Containerization Add-ons
Add containerization when you want the app packaged the same way across local development, staging, and production, or need to deploy somewhere that isn't a managed serverless platform.
Directus + Next.js with Docker
Directus itself ships as a Docker image, so containerizing the Next.js app with Docker gives the whole stack one consistent deployment unit across local development and any host.
These are highlighted picks. To see all the tools, check the Containerization category.
Observability Add-ons
Add observability when you want to catch errors and performance regressions in production before users have to report them.
Directus + Next.js with Sentry
Error tracking and performance monitoring via SDK in the Next.js app, with releases tied back to your deploy pipeline.
Directus + Next.js with Datadog
A full observability platform across the Next.js app and the servers running Directus, useful once the stack serves real production traffic.
These are highlighted picks. To see all the tools, check the Infrastructure & APM category.
Email Add-ons
Add email when the app needs to send account verification, password reset, or notification messages.
Directus + Next.js with Resend
A transactional email API for verification, password resets, and notification emails sent from the app. Directus Flows can also send mail over SMTP, but a dedicated API keeps deliverability management out of your instance.
Directus + Next.js with SendGrid
The established high-volume choice, with dedicated IP addresses and deliverability tooling for apps sending at serious scale. There is no permanent free plan, so it suits production senders.
Directus + Next.js with Brevo
Combines the transactional API with marketing campaigns and a built-in CRM, with a permanent free tier of 300 emails a day.
Payments Add-ons
Add payments when the product is ready to charge for subscriptions or one-time purchases.
Directus + Next.js with Stripe
Subscription billing, one-time checkout, and invoicing through Stripe's hosted Checkout or embedded Elements, driven from the Next.js app with webhook handling via Directus Flows. The stack works fully without it.
Styling Add-ons
Add styling when you want a component or utility-class system to build the UI faster than hand-writing CSS from scratch.
Directus + Next.js with Tailwind CSS
A utility-class CSS framework composed directly in markup. The default styling choice in most modern Next.js setups.
These are highlighted picks. To see all the tools, check the CSS Frameworks category.
Analytics Add-ons
Add analytics when you want to measure traffic, track visitor behavior, or understand how people actually use the product.
Directus + Next.js with PostHog
Product analytics with event tracking, session replay, and feature flags in one SDK, wired into the Next.js app. The richest option if you want more than pageviews.
Directus + Next.js with Google Analytics
The industry-standard free traffic platform, with Google Ads and Search Console integration. Requires a cookie consent banner in most jurisdictions.
Directus + Next.js with Plausible Analytics
Lightweight, privacy-first traffic metrics with no cookie banner required. Fits when you want simple numbers without PostHog's broader feature surface.
Directus + Next.js with Umami
Open source and self-hostable, keeping analytics on infrastructure you already run alongside Directus. The pick if you want no third-party analytics vendor.
These are highlighted picks. To see all the tools, check the Web & Product Analytics category.
Frequently Asked Questions about Directus + Next.js
How is this different from the Next.js + Headless CMS stack?
In Next.js + Headless CMS, Directus is one of four content platforms serving editorial content to a website, and no database appears anywhere in that stack. Here Directus is the application backend itself: app data, auth, files, and automation on a PostgreSQL database that is part of the stack. Choose the other for content sites; choose this one for apps.
Why choose this stack over Supabase + Next.js?
Both stacks wrap a PostgreSQL database with an instant API; the operating model is the difference. Supabase + Next.js is the fully managed route: Supabase provisions and runs its own Postgres for you, and self-hosting it means running its whole container family. Here, Directus is a single application you deploy against a database you provide, with a no-code studio and automation flows on top, and the schema stays a plain Postgres you can move anywhere. Pick Supabase + Next.js for the most hands-off managed experience; pick Directus + Next.js for maximum control over the database and the admin studio.
Where does the Directus instance itself run?
That depends on which hosting option you pick. Vercel and Netlify serve only the Next.js app, so the Directus instance pairs with the managed Directus Cloud add-on at $99/month. Railway and Render can run both halves: the Next.js service and a Directus deployment from Directus's official one-click template, with managed PostgreSQL alongside. A flat-rate VPS such as Hetzner can host everything on one machine, the fully self-hosted route with the lowest recurring cost. A small production instance runs comfortably on a 2 GB container plus a modest managed Postgres.
What is the cheapest way to run this stack?
The Next.js frontend is free on Vercel or Netlify hobby tiers, and Directus's core tier is free with self-hosting, including the Open Innovation Grant that covers commercial use for qualifying smaller organizations. That puts a full deployment at roughly $5 to $10 per month for a small container and managed Postgres on Railway or Render. The managed Directus Cloud add-on costs $99/month when you would rather not run it at all.
Can I migrate away from Directus later?
The data side is the easy part: everything lives in a plain PostgreSQL schema that Directus introspects but does not own, so pg_dump and restore moves it into any other stack unchanged. What gets rebuilt is the API and permission layer, since Directus's roles, flows, and webhook configuration are platform-specific. That is why this stack is unusually easy to leave among backend platforms.
Stacks Related to Directus + Next.js
Next.js + PostgreSQL
Project
Next.js with a PostgreSQL database, an ORM, and authentication: full-stack TypeScript web apps.
Next.js + Payload CMS
Project
Next.js app with Payload CMS as a code-first, developer-friendly content backend.
Hasura + Next.js
Project
Instant GraphQL API over PostgreSQL with Hasura, consumed by Next.js: a data layer without the boilerplate.
Convex + Next.js
Project
Next.js with a real-time, authenticated Convex backend: type-safe, subscription-first full-stack.
Scores
Popularity3/5
Directus has a large open-source community and steady production adoption, though it trails Supabase and Firebase in mindshare and third-party learning material for backend-first usage.
Learning Curve3/5
React developers already know the Next.js half. Directus adds role-based access control, flows, and collection configuration to learn, though no custom query language is required since the API is plain REST or GraphQL.
Flexibility4/5
Directus wraps any SQL schema without imposing its own, serves REST and GraphQL side by side, and PostgreSQL stays directly queryable for anything the platform layer does not cover. Custom endpoints and flows cover most backend extension needs.
Performance3/5
The API is a standard Node service over PostgreSQL, so throughput scales with the instance you provision rather than with a managed global platform. ISR and edge caching keep the frontend fast, and file assets deliver through a CDN.
Portability4/5
Data lives in a standard PostgreSQL schema outside the platform, and Directus itself is open source and self-hostable anywhere, so both the data and the platform can move. Only the API surface and permission configuration are Directus-specific.
Tools in the Directus + Next.js Stack
Programming Languages
Databases
Add-ons (optional — add any, or none)
CI/CD
Containerization
Observability
Payments
Styling
Analytics
Directus + Next.js Pricing
Next.js, TypeScript, and PostgreSQL are open source and free. Directus's core tier is free, including self-hosting, with the Open Innovation Grant covering commercial use for qualifying organizations; the managed Directus Cloud add-on costs $99/month. Self-hosting the Directus instance with its database starts around $5 to $10/month on Railway or Render. Vercel or Netlify hosting is free to start, with Pro plans around $20/month.
Hobby tiers cover small apps; Pro plans around $20/month.
Free core tier; commercial use for qualifying organizations covered by the Open Innovation Grant.
Managed hosting of the Directus instance and its database, billed as an add-on on any plan tier.
Self-hosted alongside the Directus container on Railway or Render; a small managed Postgres works for development.