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