Wagtail Bakery Demo - Next.js Frontend

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

Prerequisites

This site serves as a good demonstration of Wagtail’s built-in support for headless architectures. It requires running a copy of the Wagtail bakerydemo backend, switching to its headless branch which changes the site from serving content via HTML templates and an API to API-only mode.

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
• Wagtail user bar

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.