Nextjs Templates & Themes Logo Nextjs Templates & Themes
Next Js Directus Starter screenshot

Next Js Directus Starter

Author Avatar Theme by Fredygerman
Updated: 6 Oct 2023
13 Stars

A Next Js 13 with App router starter web app with Directus as a headless Cms and tailwind css for styling. This will include examples for common uses like authentication, data fetching, web sockets, file uploads, and more. Follow along on Twitter for updates.

Github Live Preview

Categories

React Tailwind Directus Ant design

Overview

The Next.js Directus Starter is a pre-built template for building apps with Directus CMS using Next.js 13, Radix UI, and Tailwind CSS. It provides a set of features and configurations to help developers get started quickly.

Features

  • Next.js 13 App Directory
  • Directus CMS integration
  • Radix UI Primitives for component styling
  • Tailwind CSS for flexible and customizable styling
  • Icons from Lucide
  • Integration with next-themes and Tailwind CSS for theme management
  • Tailwind CSS class sorting, merging, and linting
  • Next.js Server Side Components (SSC) & Client Side Components (CSC)
  • Next.js Form Actions for form handling
  • Analytics integration with Posthog

Installation

To install the Next.js Directus Starter, follow these steps:

  1. Change directory to the desired location for your project.
  2. Install the required dependencies.
  3. Start Directus CMS and create a project.
  4. Define the necessary environment variables in a .env file.
  5. Start the development server and view the app in your browser at http://localhost:3000.

Summary

The Next.js Directus Starter is a pre-configured template for building apps with Directus CMS using Next.js 13, Radix UI, and Tailwind CSS. It offers a range of features including Directus CMS integration, component styling with Radix UI and Tailwind CSS, and analytics integration with Posthog. The installation process is straightforward and involves setting up dependencies, configuring environment variables, and starting the development server. With the Next.js Directus Starter, developers can quickly kickstart their projects and focus on building their apps without having to worry about the initial setup.