nokia-care / next-js-directus-starter Goto Github PK

View Code? Open in Web Editor NEW

A Next Js 13 with App router starter web app with Directus as a headless Cms and tailwind css for styling. This will include examples for common uses like authentication, data fetching, web sockets, file uploads, and more. Follow along on Twitter for updates.

JavaScript 3.70% TypeScript 94.81% CSS 1.49%

next-js-directus-starter's Introduction

Next js Directus Starter

Next.js 13 starter for building apps with Directus CMS Radix UI and Tailwind CSS.

Usage

git clone https://github.com/fredygerman/next-js-directus-starter.git

Change directory

cd next-js-directus-starter

Install Dependencies

pnpm install

Start Directus CMS

Make sure your Directus CMS is running and you have created a project.

Define Environment Variables

cp .env.example .env

Note : Make sure all the environment variables are defined in your .env file.

For the DIRECTUS_DEFAULT_ROLE_ID you can use the default role id from your directus project. For DIRECTUS_USER_CREATOR_TOKEN you need to create a user and a static token in your directus project.

Start the development server

pnpm run dev

You can now view the app in your browser at http://localhost:3000 🚀

Features

Next.js 13 App Directory
Directus CMS
Radix UI Primitives
Tailwind CSS
Icons from Lucide
Themes with next-themes and Tailwind CSS
Tailwind CSS class sorting, merging and linting.
Next js Server Side Components (SSC) & Client Side Components (CSC)
Next js Form Actions
Analytics with Posthog

Roadmap

Customizations and configurations.

Site Config (site.ts) for Site Information configuration (i.e Name, Title, Nav Bar items, Links etc).
Response Messages Config (messages.ts) for Creating user friendly response messages.
@t3-oss/env-nextjs For Environment Variables configuration. (env.mjs)
and other config files. (tailwind.config.js, postcss.config.js, next.config, prettier.config.js)