eBook: The Definitive Guide to Next.js and Wagtail


Michael Yin

Full Stack Developer

Last updated on Aug 19 2021


Table of Contents

Jamstack

This is my #4 eBook of Wagtail, and I wish to talk about the new architecture (Jamstack) in this book.

Jamstack is not a framework but a new architecture pattern.

Jamstack stands for Javascript, API and Markup (generated by a static site generator)

  1. The frontend app will be prebuilt into highly optimized static pages (Markup) and assets, and deployed to the CDN netowrk.
  2. Frontend app will use Javascript and API to talk to backend service, to enable dynamic content on some pages.

Jamstack has below benefits:

  1. Because the pages are prebuilt and served from CDN, pages can load FAST.
  2. The reduced complexity make the site more secure.
  3. Easy to scale when traffic grow.

Next.js

Next.js is a framework enabling React based web applications functionalities such as server-side rendering (SSR) and generating static websites (SSG)

We will use Next.js and React to build our frontend app.

Headless Wagtail

We will use Wagtail to help us manage content and expose API to the frontend app.

Since Wagtail is built based on Django, we can also benefit from the great Python ecosystem.

We will use some 3-party Python packages to add comment feature.

Objectives

By the end of this course, you will be able to:

  1. Understand Docker and use Docker Compose to do development
  2. Create blog models to work with Wagtail.
  3. Learn how to write serializer for Django models.
  4. Build a REST API for Wagtail CMS
  5. Use the factory package to help create test data
  6. Test the REST API and generate test coverage report
  7. Create Next.js project with create-next-app
  8. Learn React Function Component, and React hooks.
  9. Understand how Next.js page route works.
  10. Make Wagtail preview work with the Next.js.
  11. Build comment system based on django-contrib-comments which support Generic Relations
  12. Use Tribute.js to add Mention and Emoji support to the comment form.
  13. Learn to use SWR to build lazy load comment list.
  14. Test React component using Jest and @testing-library family of packages.
  15. Deploy the Next.js to the Netlify.
  16. Deploy the backend API to DigitalOcean

Tech

  • Python 3.8
  • Django 3.2
  • Wagtail 2.14
  • Node 14
  • Next.js 11
  • Bootstrap 5
  • React Function Component, React Hooks
  • SWR
  • Tribute.js
  • Jest

What is included

  1. A PDF ebook which contains about 40 chapters.
  2. 20 screenshots and 7 diagrams, all created by me.
  3. The source code (You can get it in the Extra files)

Demo

https://nextjs-wagtail.accordbox.com/

Table of Contents

  1. Introduction
  2. Setup Wagtail Project
  3. Dockerizing Wagtail App
  4. Add Blog Models to Wagtail
  5. StreamField
  6. Build REST API (Part 1)
  7. Build REST API (Part 2)
  8. Routable Page
  9. Pagination
  10. Full Text Search
  11. UnitTest (Part 1)
  12. UnitTest (Part 2)
  13. Setup Next.js project
  14. Add SCSS support to Next.js project
  15. Building React Component (SideBar)
  16. Building React Component (StreamField)
  17. Building React Component (PostPage)
  18. Building React Component (BlogPage)
  19. Building React Component (BlogPage Pagination)
  20. Next.js routing (Part 1)
  21. Next.js routing (Part 2)
  22. Search Page
  23. SEO
  24. Add Preview Support
  25. Import Comment Model
  26. Manage comment in Wagtail
  27. CommentForm
  28. Add Mention support to comment form with Tribute.js
  29. Add Emoji support to Django form with Tribute.js
  30. Lazy Load CommentList
  31. Next.js UnitTest Guide (Part 1)
  32. Next.js UnitTest Guide (Part 2)
  33. Next.js UnitTest Guide (Part 3)
  34. Deploy REST API
  35. Deploy Next.js project to Netlify
  36. Next Steps
  37. Backend FAQ

The Definitive Guide to Next.js and Wagtail


Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, Wagtail CMS and React.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.


Table of Contents

Build Jamstack web app with Next.js and Wagtail CMS.

Read More

Subscribe

Get notified about new great Web Development Tutorial