Simple Dashboard Template with Next.js 14, Tailwind CSS, NextAuth.js, and Directus

This project is a starting point for building a modern web dashboard using a robust technology stack. It provides you with the basic structure and tools necessary to kickstart the development of your own dashboard application.

Screenshots

Login Page

Light mode

Dark mode

Sheet menu

Key Features

• A solid foundation for developing a modern web dashboard.
• An attractive and customizable style thanks to Tailwind CSS.
• Secure user authentication through NextAuth.js.
• Dynamic content management with Directus.
• Streamlines the initial setup of your project, saving you time.

Technologies Used

• Next.js: React framework for web applications.
• Tailwind CSS: CSS design framework.
• Shadcn: Beautifully designed components built with Radix UI and Tailwind CSS.
• next-auth: Authentication and authorization in Next.js.
• next-themes: Theme switching in Next.js.
• TypeScript: Programming language.
• @directus/sdk: Client for Directus API.
• zustand: Lightweight state management for React.
• zod: TypeScript schema validation.
• Husky: Git hooks for running commands on pre-commit and pre-push actions.
• Prettier: Automatic code formatter.
• ESLint: Static code analysis tool.
• shadcn/ui sidebar: Shadcn UI Sidebar.

Requirements

Make sure you have the following installed before running the project:

• Node.js: version 20.9.0
• npm: JavaScript package manager

Configuration

Clone the repository:

git clone https://github.com/pintoderian/next-directus-auth-ts.git
cd your-project

Install dependencies:

npm run install

Prepare husky:

npm run prepare

Configure environment variables: Create a .env.local file at the root of the project and define the necessary environment variables. Here's an example:

NEXT_PUBLIC_DIRECTUS_API=
NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_SITE_NAME="Acme Inc"
NEXT_PUBLIC_SITE_DESCRIPTION="Lorem, ipsum dolor sit amet consectetur adipisicing elit."

Command for NEXTAUTH_SECRET

openssl rand -base64 32

Running the Project

To run the project in a development environment, use the following command:

npm run dev

The project will be available at http://localhost:3000.

Production

To build and run the project in a production environment, use the following commands:

npm run build

npm start

If you like my work, consider buying me a coffee!

Ko-fi