eBook: The Definitive Guide to Next.js and Wagtail

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

BOOK LINK

The Definitive Guide to Next.js and Wagtail