Skip to content

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.

Notifications You must be signed in to change notification settings

fredygerman/next-js-directus-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

  • [✅] Add Login and Register
  • [✅] Add Analytics
  • Add Installation Instructions Documentation
  • Add Dashboard Page
  • Add Simple Blog
  • Add SEO
  • Add Auth Guard
  • Add Password Reset and Forgot Password
  • Add User Profile
  • Add User Settings

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)

License

Licensed under the MIT license.

About

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.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published