In the modern web development landscape, building a backend CMS that is fast, flexible, and scalable is crucial. Directus has emerged as a powerful solution that automates CRUD operations, creates flexible APIs on an existing database, and requires no coding.

In this article, we will explore how to use Directus to build a task management system combined with Next.js for the frontend. We will cover installation, configuration, data management, and user permissions. Let’s get started!

Installing and Configuring Directus

Step 1: Install Docker and Docker Compose

Directus can be installed in multiple ways, but the simplest method is using Docker. Ensure you have Docker and Docker Compose installed before proceeding.

Step 2: Create a Docker Compose File

Create a new project folder and add a docker-compose.yml file with the following content:

version: "3.8"
services:
  directus_db:
    image: postgres:17-alpine
    container_name: directus_db
    restart: unless-stopped
    environment:
      - POSTGRES_DB=todo_app
      - POSTGRES_USER=directus
      - POSTGRES_PASSWORD=directus
    ports:
      - "9001:5432"
    volumes:
      - directus_postgresql:/var/lib/postgresql/data
    networks:
      - directus_network

  directus:
    image: directus/directus:11.1.1
    container_name: directus
    restart: unless-stopped
    ports:
      - "9002:8055"
    volumes:
      - ./data/database:/directus/database
      - ./data/uploads:/directus/uploads
      - ./data/extensions:/directus/extensions
    networks:
      - directus_network
    environment:
      - SECRET="replace-with-secure-random-value"
      - DB_CLIENT=postgres
      - DB_HOST=directus_db
      - DB_PORT=5432
      - DB_USER=directus
      - DB_PASSWORD=directus
      - DB_DATABASE=todo_app
      - ADMIN_EMAIL=admin@example.com
      - ADMIN_PASSWORD=admin
    depends_on:
      - directus_db

volumes:
  directus_postgresql:
    driver: local

networks:
  directus_network:
    driver: bridge

Step 3: Start Directus

Run the following command to start Directus services:

docker compose up -d

Once started successfully, you can access the Directus Dashboard at http://localhost:9002 and log in with the admin credentials set in the configuration.

Managing Data with Directus

Directus allows you to manage data through an intuitive interface. In this article, we will build a task management system with two tables:

• users (user list)
• tasks (task list)

Creating the tasks Collection

1. Go to Settings > Data Model > Create Collection
2. Name the collection tasks
3. Add the necessary fields: title, description, status, due_date
4. Create a user field linked to directus_users using a “One to Many” relationship

Interacting with the API

Directus provides RESTful APIs to interact with data. Here are some key API endpoints:

• Fetch all tasks: GET /items/tasks
• Fetch a specific task: GET /items/tasks/:id
• Create a new task: POST /items/tasks
• Update a task: PATCH /items/tasks/:id
• Delete a task: DELETE /items/tasks/:id

You can test these APIs using Postman or your preferred API tool.

User Permissions in Directus

From version 11 onwards, Directus uses Policy-Based Access Control (PBAC) for managing permissions. This allows precise control over who can view, edit, or delete data.

Step 1: Create a User Role

1. Navigate to Settings > Roles & Permissions
2. Add a new role named User
3. Define the permissions for this role

Step 2: Configure Policies

1. Go to Settings > Access Policies
2. Create a new policy for the User role
3. Configure Read, Create, Update, Delete permissions for directus_users and tasks

Example permission setup:

• Read: Users can only view their own tasks
• Create: Automatically assign user_id to the currently logged-in user
• Update & Delete: Users can only modify or delete their own tasks

Testing API After Configuring Permissions

You can test the following APIs after setting up permissions to ensure data protection is properly enforced:

• Register a new account → Create an account via API
• Create a task → Users can only create tasks for themselves
• View tasks → Only displays tasks belonging to the logged-in user
• Edit/Delete tasks → Users cannot modify tasks that do not belong to them

If all the above steps work correctly, you have successfully set up Directus!

Directus provides a powerful backend CMS solution without requiring professional backend development skills. With just a few simple steps, you can set up a robust, intuitive, and easy-to-manage API system. With its scalability, flexible permissions, and multi-platform support, Directus is a solid choice for any web project.

If you’re looking for an optimized backend CMS solution, why not give Directus a try?