Full Stack Next.Js And Strapi
Published 4/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English
| Size: 2.00 GB
| Duration: 3h 24m
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
Free search engine download: Full Stack Nextjs And Strapi
