Next.js Guides
Build content-driven React apps with Directus.
Start Here
Guides
- Build a CMSLearn how to create a CMS using Directus and Next.js.
- Dynamic FormsLearn how to setup Directus fields with Next.js.
- Dynamic PagesLearn how to create dynamic pages you can use in your CMS using Directus and Next.js.
- Form SubmissionsLearn how to submit forms using Directus and Next.js.
- Live PreviewLearn how to setup Directus live preview with Next.js.
- Live Preview and VersionsLearn how to set up Live Preview with different content versions in your Next.js application.
- Draft Mode PreviewLearn how to confgure Live Preview with Next.js' draft mode.
- Multilingual ContentLearn how to access multilingual Directus content using Next.js.
- PaginationLearn various techniques to load paginated data in your Next.js application.
- Reusable BlocksLearn how to render dynamic blocks using Next.js.
- Visual EditorLearn how to integrate the Directus Visual Editor with Next.js.
Next.js Tutorials
- Build a Realtime Chat App with Directus and Next.jsLearn how to setup Directus realtime with Next.js.
- Build an Ecommerce Platform with Next.js, Stripe, and Directus FlowsLearn to integrate Stripe with Directus Flows to build an e-commerce website.
- Build an Hotel Booking Platform with Next.js, Stripe, and Directus FlowsLearn to build a hotel booking site with dynamic availability and payments via Stripe.
Get once-a-month release notes & real‑world code tips...no fluff. 🐰