Rayleigh with Next
Build Rayleigh, a minimalistic portfolio with a gallery, an About page, a blog and a contact form, as a Next website that reads its content from an ohne CMS.
What you will build
- A home page of galleries that open full screen.
- A header and footer that you edit in the dashboard, and a dark mode.
- An About page, and a blog with a page for each post.
- A contact form that stores each message in the CMS, with an optional spam check.
- A dashboard that shows the website beside the form and updates it as you type.
Before you start
You need Node 26 or newer, pnpm, and some React and the Next App Router.
New to ohne itself? Read Installation and build Your first app first.
How the lessons work
- The project is a monorepo:
apps/backendis the ohne app with the CMS and the dashboard, andapps/webis the Next website. - Each lesson ends at a tag of ohnejs/rayleigh-next. Clone it to start from any lesson, or to compare it with your code.
- The demo content comes from a seed that fills an empty site only. A lesson that changes the seed shows the commands to start fresh.
- Every lesson also exists for Nuxt, with the same backend. The switch at the top of a lesson changes the framework.
Start with Project setup.