Skip to content
/ nextus Public template

Nextus is a comprehensive, versatile and modern website template based on Nextjs and Directus technologies. It helps you build various types of websites more quickly. 一个完整全面、且多功能的现代化网站模板,基于Nextjs和Directus技术。帮助你更快速地构建各种类型的网站。

License

Notifications You must be signed in to change notification settings

luochuanyuewu/nextus

Repository files navigation

Welcome to Nextus! Nextus is a comprehensive, versatile and modern website template based on Next.js and Directus technologies. It helps you build various types of web projects more quickly.

Introduction · 🧰 Tech Stack · 🚧 Installation and Development · 💼 Roadmap · 💼 Other Resources · 👥 Contributors 👥 contributing


Introduction

Spin up a beautiful site in minutes. Or use Nextus as the foundation for your next awesome project.

-> View The Demo Site

Features

  • Complete Next.js 13 website example
  • Multi languages support, currenly en/zh. You can add more.
  • Built-in Directus - Headless CMS support
  • Tailwind CSS and Daisyui
  • Dynamic Page Builder (M2A Interface) within Directus
  • Blog posts and categories
  • Projects pages
  • Dynamic form generation with validation
  • Dynamic social image generation
  • SEO support
  • Global search component and API route
  • Ready to use common components like modals, dropdowns, and file upload input
  • Common utilities so you don't need to include yet another package
  • Easy SVG Icons using Iconify Icon
  • Google Fonts support
  • ESLint and Prettier already configured
  • Many theme provided by Daisyui
  • Written in Typescript and new Directus TS SDK

Tech Stack

Next.js

Build your next web application with confidence using Next.js. An open source framework under MIT license that makes web development simple and powerful. The leading React framework that handles routing, server side rendering, and more.

Learn more about Next.js


Directus

Directus is a headless CMS that instantly turns your SQL database into REST and GraphQL APIs and gives you a beautiful, intuitive no-code app to manage all your content and data. But it's also more than just a headless CMS. It’s an open data platform that has all the tools you need for creating, managing, serving, visualizing, and even automating your data for your next web, mobile, or digital project.

For a smooth experience, the Directus SDK is already integrated for you and availably globally.

Learn more about Directus


UI

  • Tailwind CSS – Utility-first CSS framework that allows you to rapidly build sites and maintain consistency across team members. There are several Tailwind Plugins installed and ready to use as well – Typography and Forms.
  • Daisyui – The most popular component library for Tailwind CSS.
  • React Hook Form – Form library for React that saves you hours of time by simplifying form creation.
  • Iconify for React - Modern unified SVG framework. One syntax for many icon sets: FontAwesome, Material Design Icons, Dashicons and many others. Over 150,000 icons, very easy to use.

Utilities

  • React-Use – React Hooks — 👍
  • Framer-Motion – Framer Motion is a simple yet powerful motion library for React.

Installation and Development

Directus - Headless CMS

1 Setup Directus

Use Directus Cloud/Self-Hosting to quickly set up your own instance of Directus.

Then, apply the Schema Snapshot provided by Nextus using the Schema Migration feature.

Or, using Nextus-Docker to quickly setup Nextus backend with automaic schema applying.

This way, your Nextus backend will be fully prepared.

2 Setup required Content/Environment

After setting up the Directus instance, you need to prepare the following necessary content for the frontend to function properly.

Content-related:

  • Add the languages you need to the Languages model (though you can add as many as you want, but currently only 'en' and 'zh' supported)
  • Add a page with the slug "home"
  • Add a top navigation with the slug "main" and a footer navigation with the slug "footer"
  • Add other required data in "global" seciton

Language setup Navigation setup

Environment variables:

  • Refer to .env.example

Nextus - Frontend (前端)

Nextus is built using Next.js 13 on the front-end. All you need to do is fork a copy to your own GitHub account, connect it with Vercel, set up a few environment variables (for connecting with Directus), and your Nextus will be live.

Of course, you can also clone the repository locally and customize it according to your own needs.

Enjoy!

Now, you have a Nextus backend (built with Directus) and a Nextus frontend (built with Next.js).

Start adding your own content in Nextus and experience the charm of headless CMS and modern frontend websites!


Roadmap

  • Analysis support (Google,Baidu,Umami)
  • Fully multiple language supports for form, artilce, page and projects
  • Dedicated documentation site
  • Auth module
  • Redirects module (重定向模块)
  • Fetching frontend translations via backend (Directus translation)
  • Page width controlled by backend
  • Content management for documentation
  • Payment module (pay to watch article, page)
  • Token based access control for file download
  • AI powered content writing and image producing, all resisted within Directus

Other Resources


Contributors

Credits

Nextus originally based on AgencyOS Template created by Bryant Gillespie. Now Nextus has it's own direction (see Roadmap).

Contributing

Contributions welcome! Read the contribution guidelines first.

Contributor Covenant

Statement

Originally, I encountered Strapi before I discovered Directus, so I built my personal website with it (this repository). After encountering Directus and trying it for a week, I immediately switched from Strapi to Directus, and my personal website also started to transition towards the AgencyOS template. This is why you can still see some Strapi-related components in the repository (marked as _Deprecated), but please don't worry, these files will also be adopted into Directus, so that Nextus will have more Blocks to use.

About

Nextus is a comprehensive, versatile and modern website template based on Nextjs and Directus technologies. It helps you build various types of websites more quickly. 一个完整全面、且多功能的现代化网站模板,基于Nextjs和Directus技术。帮助你更快速地构建各种类型的网站。

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published