Full Stack Next.js And Strapi
Build And Deploy A Website With Next.js And Strapi
What you'll learn
- Build a complete Full Stack Web App with Next.js and Strapi
- Build the Front End Application with Next.js
- Use Strapi as a Headless Content Management System (CMS)
- Test the Strapi REST API with Postman VSCode Extension
- Style the application with TailwindCSS
- Implement common web dev patterns including filtering, sorting, and pagination
- Deploy Next.js to Vercel
- Deploy Strapi to Heroku
- Use Strapi's data transfer tool to sync development and production data
- Handle image uploads with Cloudinary
- Debug deployment gotchas
- Quick tips on common Next.js caching gotchas
Course Content
- Demo03:21
- Introduction07:12
- Resources
Requirements
- Basic web dev and command line knowledge is recommended
- Basic JavaScript and React knowledge is recommended
- Basic knowledge of Git and GitHub is recommended
Description
Hello and welcome to the Full Stack CMS Website With Next.js and Strapi Course.
In this course, we will learn just enough about Next.js and Strapi to build and deploy a website for a fictional flying machine company.
Save time by not having to reinvent the wheel, and use the battle-tested and leading headless CMS solution.
We will explore various Next.js and React features through example-driven learning:
- Route groups and layouts
- Server components and Client components
- Search Params and Path Params
- Server actions
- Caching
- useFormState hook
- useSearchParams and usePathname hooks
We will also explore various Strapi features including:
- Single Types
- Collection Types
- REST API
- Swagger Documentation
- Relations
- Data Transfer
- Media Uploads
We will focus on building practical features commonly found in content-driven marketing websites, such as:
- List and Detail view
- Pagination
- Filtering
- Sorting
- Contact form
- Bookmarkable URLs
- Data Visualization Chart
This course is fast paced and designed to get you up to speed on using Next.js and Strapi together to rapidly build a content-driven website. Familiarity with basic web development and React concepts is highly recommended before taking this course. The intended learner is someone who has some web dev experience and wants to gain additional practice building a standard marketing website using a modern tech stack.
Who this course is for
- This course is for beginner to intermediate web developers
- This course is for anyone looking for a crash course on using Next.js and Strapi together
Full Stack Next.js And Strapi
Section 1: Introduction
- 03:21
- 07:12
Section 2: Setup Nextjs
- 10:07
Section 3: Initialize Strapi
- 02:10
- 02:05
- 04:03
Section 4: Strapi Collection Type
- 2.Generate Data05:52
- 3.Upload Images01:27
Section 5: Ui List View
- 2.Render List05:42
- 3.Populate Image03:09
- 4.Style The List02:38
- 5.Pagination16:17
Section 6: Relations
Section 7: Contact Form
Section 8: Sorting
- 1.Sort By Attribute07:28
Section 9: Detail Page
- 1.Detail Page04:02
- 2.Radar Chart04:53
Section 10: Deployment
- 1.Deployment Intro00:35
- 3.Cloudinary04:05
- 4.Data Transfer05:40
- 6.Caching03:43
Section 11: Extra
- 1.Recap00:40
- 2.Extra Topics00:35
- 4.Data Cache00:42
- 5.Revalidation01:04
- 6.Full Route Cache01:12
- 7.Router Cache01:13
- 8.Image01:09
- 9.Link Prefetching01:19
- 10.Nextjs Tips02:21
- 11.Strapi Tips02:47