Wagtail Bakery Demo - Next.js Frontend

This is a highly-experimental headless version of Wagtail's bakerydemo, built with Next.js and Wagtail API v2. It demonstrates how to use Wagtail as a headless CMS with a modern React-based frontend.

Prerequisites

• A running instance of the Wagtail bakerydemo backend
  • You can use the api branch for now, which has the necessary api_fields added to the models
  • To test the userbar, you can use this custom branch of Wagtail with some modifications to the userbar code
• Node.js 22.x or later

Getting Started

1. Clone this repository
2. Install dependencies:

npm install

3. Configure your environment variables:

cp .env.example .env.local

Update .env.local with your Wagtail backend URL.

4. Start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Features

• Server-side rendering of Wagtail pages
• Dynamic routing based on Wagtail page types
• Support for:
  • Blog posts
  • Bread types
  • Locations
  • Recipes
  • Gallery
• Pagination for listings
• Image optimization using Next.js Image component
• Type-safe API integration

Project Structure

• components/pages/ - Page type components that correspond to Wagtail page models
• lib/ - API utilities and helpers
• models/ - Zod schemas and TypeScript interfaces for Wagtail models

Contributing

While we're not actively seeking contributions, feel free to raise issues or submit pull requests for feedback. This is an experimental project meant to demonstrate the capabilities of Wagtail as a headless CMS with Next.js.

Learn More

• Wagtail Documentation
• Next.js Documentation
• Wagtail API v2 Reference

License

This project is open source and available under the BSD 3-Clause License.