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 NextJS and Strapi
Build the Front End Application with NextJS
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 NextJS 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 NextJS caching gotchas

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 layoutsServer components and Client componentsSearch Params and Path ParamsServer actionsCachinguseFormState hookuseSearchParams and usePathname hooksWe will also explore various Strapi features including:Single TypesCollection TypesREST APISwagger DocumentationRelationsData TransferMedia UploadsWe will focus on building practical features commonly found in content-driven marketing websites, such as:List and Detail viewPaginationFilteringSortingContact formBookmarkable URLsData Visualization ChartThis 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.

Overview
Section 1: Introduction

Lecture 1 Demo

Lecture 2 Introduction

Lecture 3 Resources

Section 2: Setup Next.js

Lecture 4 Initialize And Clean Up

Lecture 5 Static Home Page

Section 3: Initialize Strapi

Lecture 6 Initialize Strapi

Lecture 7 Quick Tour Of Strapi Code

Lecture 8 Connect To Database With SQLTools

Lecture 9 Single Type

Lecture 10 Test Api

Lecture 11 Build Dynamic Home Page

Section 4: Strapi Collection Type

Lecture 12 Create The Content Type

Lecture 13 Generate Data

Lecture 14 Upload Images

Lecture 15 Associate Images To Content

Section 5: Ui List View

Lecture 16 Route Group And Layout

Lecture 17 Render List

Lecture 18 Populate Image

Lecture 19 Style The List

Lecture 20 Pagination

Lecture 21 Filter By Attribute

Section 6: Relations

Lecture 22 Create A Related Content Type

Lecture 23 Render Related Content Type

Lecture 24 Filter By Related Content Type

Section 7: Contact Form

Lecture 25 Create The Server Action

Lecture 26 Create The Contact Form

Section 8: Sorting

Lecture 27 Sort By Attribute

Section 9: Detail Page

Lecture 28 Detail Page

Lecture 29 Radar Chart

Section 10: Deployment

Lecture 30 Deployment Intro

Lecture 31 Deploy Strapi To Heroku

Lecture 32 Cloudinary

Lecture 33 Data Transfer

Lecture 34 Deploy Next To Vercel

Lecture 35 Caching

Lecture 36 Test The Contact Form

Section 11: Extra

Lecture 37 Recap

Lecture 38 Extra Topics

Lecture 39 Request Memoization

Lecture 40 Data Cache

Lecture 41 Revalidation

Lecture 42 Full Route Cache

Lecture 43 Router Cache

Lecture 44 Image

Lecture 45 Link Prefetching

Lecture 46 Nextjs Tips

Lecture 47 Strapi Tips

Section 12: Bonus

Lecture 48 Bonus

This course is for beginner to intermediate web developers,This course is for anyone looking for a crash course on using NextJS and Strapi together