Project structure
A tour of a project generated by create-olgax-site - the Next.js routes, Payload config, custom blocks folder, scripts and the files you will edit most.
A generated project is a Next.js App Router app with Payload mounted inside it.
my-site/
├─ app/
│ ├─ (frontend)/ Public site, dashboard and the page editor routes
│ └─ (payload)/ Payload admin panel and API routes
├─ components/
│ ├─ blocks/ Your custom page-builder blocks
│ ├─ PageEditor.tsx The Puck editor wrapper
│ ├─ PageRenderer.tsx Renders a published page for visitors
│ └─ ... Dashboard and editor UI
├─ lib/
│ ├─ puck.config.tsx The one Puck config shared by editor and renderer
│ ├─ i18n.ts Locales
│ ├─ pages.ts Page helpers, the home slug
│ └─ ... Analytics, personalization, server actions
├─ scripts/
│ ├─ seed.ts Creates the admin user and demo content
│ └─ new-component.mjs The pnpm new:component generator
├─ payload.config.ts Collections, localization, database
├─ proxy.ts Locale routing and the visitor cookie
├─ .env Your local environment (not committed)
└─ README.md Project-level quick referenceThe files you will touch most
| File | Why you would edit it |
|---|---|
components/blocks/ | Add and change your own blocks. See Custom components. |
lib/puck.config.tsx | Merge more component sources, change the page-level (root) fields |
lib/i18n.ts | Add a language. See Localization. |
scripts/seed.ts | Change the demo homepage and admin user |
.env | Secrets and the database URL. See Configuration. |
How a page gets from the editor to a visitor
- An editor opens
/<slug>/edit. The route requires a signed-in Payload user and loads the latest draft. PageEditorrenders Puck with the config fromlib/puck.config.tsx.- Editing autosaves a draft to the
pagescollection. Publish marks it published. - A visitor requests
/<slug>.PageRendererloads the published page and renders it with the same config.
Because both sides share one config, a block you add in components/blocks/ is available in the editor and on the
public page without any extra wiring.
Packages the project depends on
The scaffold installs the published @olgax.com/* packages:
@olgax.com/payload-presetfor collections and globals@olgax.com/sdkfor the component helpers@olgax.com/componentsfor the default blocks@olgax.com/datasourcefor data-backed blocks
Upgrade them like any dependency: pnpm update "@olgax.com/*".
Questions, ideas or something not working?
Ask in our official Discord, open an issue on GitHub, or edit this page.
Quick start
Create a Payload CMS and Next.js site with a visual page builder in minutes using npx create-olgax-site, then open the editor and publish your first page.
Configuration
Environment variables, database choice and secrets for an Olgax DXP site - PAYLOAD_SECRET, DATABASE_URL, NEXT_PUBLIC_SITE_URL and the optional Umami settings.