[{"_1":2,"_42":-5,"_43":-5},"loaderData",{"_3":4,"_10":11,"_40":-5,"_41":-5},"root",{"_5":-5,"_6":-5,"_7":-5,"_8":9},"user","shoppingCartId","toast","locale","en","routes/_store+/_readers+/email_author.$slug/route",{"_12":13,"_39":-5},"book",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25},"id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6Qm9va1Byb2R1Y3QvNDY4NTA","title","The Definitive Guide to Next.js and Wagtail (2.0.0)","state","published","contactAuthorMethod","email","aboutText","

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

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

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

Jamstack has below benefits:

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

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

Understand Docker and use Docker Compose to do development
Create blog models to work with Wagtail.
Learn how to write serializer for Django models.
Build a REST API for Wagtail CMS
Use the factory package to help create test data
Test the REST API and generate test coverage report
Create Next.js project with create-next-app
Learn React Function Component, and React hooks.
Use Tailwind CSS to build clean and responsive UI.
Understand how Next.js page route works.
Use next/image to do browser native lazy loading
Make Wagtail preview work with the Next.js.
Build comment system based on django-contrib-comments which support Generic Relations
Use Tribute.js to add Mention and Emoji support to the comment form.
Learn to use React Query to build lazy load comment list.
Test React component using Jest and @testing-library family of packages.
Deploy the Next.js to the Netlify.
Deploy the backend API to DigitalOcean

Tech

Python 3.10
Django 4.1
Wagtail 4.1
Next.js 13
Tailwind 3
React Function Component, React Hooks
React Query
Tribute.js
Jest

Changelog:

2.0.0

Released 2022-12-21

Use Tailwind CSS as style solution.
Use React Query to replace SWR
Use Next image to do browser native lazy loading
Add Sitemap and Robots.txt
Upgrade Django 4, Wagtail 4, update the screenshots

1.0.0

2021-08-16: First release

","authors",[26],{"_14":27,"_28":29,"_5":30},"Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci80ODk0Mg","name","MichaelYin",{"_31":32},"avatar",{"_33":34,"_35":36,"_37":38},"url","https://d308did4coypzi.cloudfront.net/avatars/1150177/medium/4366781.jpeg?1508506549","styleName","medium","exists",true,"currentUser","routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Email the author