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.
- 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.
- 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.
Make sure you have the following installed before running the project:
Clone the repository:
git clone https://github.com/pintoderian/next-directus-auth-ts.git
cd your-projectInstall dependencies:
npm run installPrepare husky:
npm run prepareConfigure 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 32To run the project in a development environment, use the following command:
npm run devThe project will be available at http://localhost:3000.
To build and run the project in a production environment, use the following commands:
npm run build
npm start