Next js Directus Starter

Next.js Directus Starter is an open-source Next.js 13 boilerplate that connects the Directus headless CMS to Radix UI and Tailwind CSS for building authenticated, content-driven web apps.

What is the Next.js Directus Starter?

The Next.js Directus Starter is a starter template from GitHub user fredygerman that scaffolds a Next.js 13 project using the App Router, with Directus as the backend CMS and Radix UI plus Tailwind CSS for the frontend. The template outputs a runnable web app that includes login and registration pages, PostHog analytics, and examples for authentication and data fetching. It is licensed under the MIT license.

Key Features

• Next.js 13 App Directory — Uses the app router and demonstrates both Server Side Components (SSC) and Client Side Components (CSC).
• Directus CMS integration — Environment-based configuration connects the app to a Directus project, including a default role ID and a static user token for the creator user.
• Radix UI primitives — Ships with Radix UI's accessible component primitives, ready to style with Tailwind.
• Tailwind CSS — Includes Tailwind with class sorting, merging, and linting set up through configuration files.
• Lucide icons — Integrates Lucide for a clean icon set.
• Theme support — Uses next-themes with Tailwind CSS to provide dark/light mode switching.
• PostHog analytics — Pre-configured analytics via PostHog using environment variables.
• Next.js Form Actions — Shows how to use the built-in form handling mechanism in Next.js 13.

Who is it for?

• Next.js developers who want a pre-wired stack with Directus and Tailwind rather than configuring each tool from scratch.
• Teams building CMS-backed applications that need authentication, content fetching, and future features like file uploads and web sockets.
• Developers exploring the App Router who want working examples of Server and Client Components, plus form actions.

What can you do with it?

• Launch an authenticated app: Use the included login and registration routes wired to Directus roles and permissions.
• Fetch CMS content: Follow the data-fetching examples in the repository to render content from Directus on server-rendered pages.
• Track user behavior: Enable PostHog by setting the required environment variables and start recording analytics events.

How does it work?

Clone the repository, install dependencies with pnpm install, and start a Directus CMS instance. Copy .env.example to .env and fill in the Directus URL, a default role ID, and a static user token, then run pnpm run dev to open the app at http://localhost:3000.

Configuration

The project centralizes configuration in a few files: site.ts for site name/title/navigation, messages.ts for user-facing response messages, env.mjs for environment variable validation with @t3-oss/env-nextjs, plus standard tailwind.config.js, postcss.config.js, next.config, and prettier.config.js files.

Current roadmap

The README's roadmap shows login/register and analytics as already implemented. Planned but not yet included are a dashboard page, a simple blog, SEO, an auth guard, password reset/forgot password, user profile, and user settings — so the starter is a foundation rather than a finished product.

FAQ

Is the Next.js Directus Starter free?

Yes, the project is licensed under the MIT license, so it can be used freely for personal and commercial projects.

What do I need to run it?

You need a running Directus CMS project, Node.js, and pnpm. You'll also need to create a user with a static token in Directus to set the DIRECTUS_USER_CREATOR_TOKEN environment variable.

Does it include authentication?

Yes, the template already includes login and register pages connected to Directus, and the roadmap marks these items as completed.