Directus Next Starter

Directus Next Starter is an open-source boilerplate template that connects a Next.js frontend to a Directus backend, giving you authentication, user profile management, and site-wide settings fetch out of the box. Created by Calderis and distributed under the MIT License, this starter is hosted on GitHub and has a live demo deployed on Vercel.

What is Directus Next Starter?

Directus Next Starter is a starter project for building a website with Next.js while using Directus as the backend service. It consumes the Directus authentication API and the Directus settings collection to pull the project name, project logo, and main site color for theming. The template includes a protected page example and a user settings page form so you can bootstrap development without wiring up auth from scratch. It was built by Calderis and is available on GitHub with documentation in the project wiki.

Key Features

• Authentication ready — Includes signup, login, and protected routes via the Directus auth API; a user settings page form lets logged-in users edit their profile.
• Directus Settings integration — Fetches settings from the Directus directus_settings collection to display the project name, logo, and main site color across the app.
• Contact and legal pages — Ships with a contact form, a policy page, and a privacy page so you have the essentials for a public-facing site.
• Tech stack — Built on Next.js with React, styled with Tailwind CSS, and connected to Directus as the headless CMS; setup targets Directus running on port 8055.
• Environment configuration — Uses an .env.local file for Next.js variables and Directus environment variables for password reset URL allow list and email SMTP settings.
• Live demo — The project is deployed at https://directus-next-starter.vercel.app and includes a demo login flow.

Who is it for?

• Next.js developers who want a working Directus integration without reading through all the API docs; the starter provides auth, settings fetch, and protected routes to model.
• Freelancers and agencies building client sites that need a CMS-backed frontend with user accounts; this boilerplate can be the foundation for a portfolio, company site, or app.
• Directus users looking for a reference implementation of the Directus JavaScript SDK with Next.js App or Pages Router; the code shows login, fetching settings, and a user profile form.

Use cases

• Personal or company websites: Set up a Next.js site with Directus as the CMS, using Directus settings to update the site name and logo without touching code.
• Web apps with user accounts: Start from the included authentication flow and user settings page to give visitors signup and profile editing.
• Learning projects: Read through the source to see how to call Directus's API from Next.js for auth, settings, and user data.

How does it work?

1. Clone the repository and install dependencies with yarn.
2. Copy .env.local.example to .env.local and configure your environment variables.
3. Start or create a Directus instance on port 8055 with the required role and permission settings for Public access to directus_settings and directus_users.
4. Run yarn dev to launch the Next.js app and npx directus start to run Directus in a separate terminal.

Roadmap and limitations

The README lists finished features and planned work. Already implemented: authentication, user settings page form, Directus Settings fetching, contact form, policy page, and privacy page. Planned items include a search page, a footer, profile picture upload, session reload on user settings change, and RGPD features such as "clear all user data" and "get all user data" exports.