Next.js Simple CMS Template with Directus Integration

This is a Next.js-based Simple CMS Template that is fully integrated with Directus, offering a CMS solution for managing and delivering content seamlessly. The template leverages modern technologies like the Next.js App Router, Tailwind CSS, and Shadcn components, providing a complete and scalable starting point for building CMS-powered web applications.

Features

• Next.js App Router: Uses the latest Next.js routing architecture for layouts and dynamic routes.
• Full Directus Integration: Directus API integration for fetching and managing relational data.
• Tailwind CSS: Fully integrated for rapid UI styling.
• TypeScript: Ensures type safety and reliable code quality.
• Shadcn Components: Pre-built, customizable UI components for modern design systems.
• ESLint & Prettier: Enforces consistent code quality and formatting.
• Dynamic Page Builder: A page builder interface for creating and customizing CMS-driven pages.
• Preview Mode: Built-in draft/live preview for editing unpublished content.
• Optimized Dependency Management: Project is set up with pnpm for faster and more efficient package management.

---

Why pnpm?

This project uses pnpm for managing dependencies due to its speed and efficiency. If you’re familiar with npm, you’ll find pnpm very similar in usage. You can still use npm if you prefer by replacing pnpm commands with their npm equivalents.

---

Draft Mode in Directus and Live Preview

Draft Mode Overview

Directus allows you to work on unpublished content using Draft Mode. This Next.js template is configured to support Directus Draft Mode out of the box, enabling live previews of unpublished or draft content as you make changes.

Live Preview Setup

Directus Live Preview

• The live preview feature works seamlessly on deployed environments.
• To preview content on localhost, deploy your application to a staging environment.
• Important Note: Directus employs Content Security Policies (CSPs) that block live previews on localhost for security reasons. For a smooth preview experience, deploy the application to a cloud environment and use the deployment URL for Directus previews.

---

Getting Started

Prerequisites

To set up this template, ensure you have the following:

• Node.js (16.x or newer)
• npm or pnpm
• Access to a Directus instance (cloud or self-hosted)

⚠️ Directus Setup Instructions

For instructions on setting up Directus, choose one of the following:

• Setting up Directus Cloud
• Setting up Directus Self-Hosted

🚀 One-Click Deploy

You can instantly deploy this template using one of the following platforms:

Environment Variables

To get started, you need to configure environment variables. Follow these steps:

1. Copy the example environment file:

   cp .env.example .env

2. Update the following variables in your .env file:

   • NEXT_PUBLIC_DIRECTUS_URL: URL of your Directus instance.
   • DIRECTUS_PUBLIC_TOKEN: Public token for accessing public resources in Directus. Use the token from the Webmaster account.
   • DIRECTUS_FORM_TOKEN: Token from the Frontend Bot User account in Directus for handling form submissions.
   • NEXT_PUBLIC_SITE_URL: The public URL of your site. This is used for SEO metadata and blog post routing.
   • DRAFT_MODE_SECRET: The secret you generate for live preview. This is used to view draft posts in directus and live edits.
   • NEXT_PUBLIC_ENABLE_VISUAL_EDITING: Enable or disable visual editing in Directus

Running the Application

Local Development

1. Install dependencies:

   pnpm install

   (You can also use npm install if you prefer.)

2. Start the development server:

   pnpm run dev

3. Visit http://localhost:3000.

Generate Directus Types

This repository includes a utility to generate TypeScript types for your Directus schema.

Usage

1. Ensure your .env file is configured as described above.
2. Run the following command:

   pnpm run generate:types

Folder Structure

src/
├── app/                              # Next.js App Router and APIs
│   ├── blog/                         # Blog-related routes
│   │   ├── [slug]/                   # Dynamic blog post route
│   │   │   └── page.tsx
│   ├── [permalink]/                  # Dynamic page route
│   │   └── page.tsx
│   ├── api/                          # API routes for draft/live preview and search
│   │   ├── draft/                    # Routes for draft previews
│   │   │   └── route.ts
│   │   ├── search/                   # Routes for search functionality
│   │   │   └── route.ts
│   ├── layout.tsx                    # Shared layout for all routes
├── components/                       # Reusable components
│   ├── blocks/                       # CMS blocks (Hero, Gallery, etc.)
│   │   └── ...
│   ├── forms/                        # Form components
│   │   ├── DynamicForm.tsx           # Renders dynamic forms with validation
│   │   ├── FormBuilder.tsx           # Manages form lifecycles and submission
│   │   ├── FormField.tsx             # Renders individual form fields dynamically
│   │   └── fields/                   # Form fields components
│   │   └── ...
│   ├── layout/                       # Layout components
│   │   ├── Footer.tsx
│   │   ├── NavigationBar.tsx
│   │   └── PageBuilder.tsx           # Assembles blocks into pages
│   ├── shared/                       # Shared utilities
│   │   └── DirectusImage.tsx         # Renders images from Directus
│   ├── ui/                           # Shadcn and other base UI components
│   │   └── ...
├── lib/                              # Utility and global logic
│   ├── directus/                     # Directus utilities
│   │   ├── directus.ts               # Directus client setup
│   │   ├── fetchers.ts               # API fetchers
│   │   ├── forms.ts                  # Directus form handling
│   │   ├── generateDirectusTypes.ts  # Generates Directus types
│   │   └── directus-utils.ts         # General Directus helpers
│   ├── zodSchemaBuilder.ts           # Zod validation schemas
├── styles/                           # Global styles
│   └── ...
├── types/                            # TypeScript types
│   └── directus-schema.ts            # Directus-generated types

---