Full Stack Next.js And Strapi

Full Stack Next.js And Strapi, available at $54.99, has an average rating of 4.83, with 48 lectures, based on 3 reviews, and has 20 subscribers.

You will learn about 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 Strapis data transfer tool to sync development and production data Handle image uploads with Cloudinary Debug deployment gotchas Quick tips on common NextJS caching gotchas This course is ideal for individuals who are This course is for beginner to intermediate web developers or This course is for anyone looking for a crash course on using NextJS and Strapi together It is particularly useful for This course is for beginner to intermediate web developers or This course is for anyone looking for a crash course on using NextJS and Strapi together.

Enroll now: Full Stack Next.js And Strapi

Summary

Title: Full Stack Next.js And Strapi

Price: $54.99

Average Rating: 4.83

Number of Lectures: 48

Number of Published Lectures: 48

Number of Curriculum Items: 48

Number of Published Curriculum Objects: 48

Original Price: $34.99

Quality Status: approved

Status: Live

What You Will 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 Strapis data transfer tool to sync development and production data

Handle image uploads with Cloudinary

Debug deployment gotchas

Quick tips on common NextJS caching gotchas

Who Should Attend

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

Target Audiences

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

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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Demo

Lecture 2: Introduction

Lecture 3: Resources

Chapter 2: Setup Next.js

Lecture 1: Initialize And Clean Up

Lecture 2: Static Home Page

Chapter 3: Initialize Strapi

Lecture 1: Initialize Strapi

Lecture 2: Quick Tour Of Strapi Code

Lecture 3: Connect To Database With SQLTools

Lecture 4: Single Type

Lecture 5: Test Api

Lecture 6: Build Dynamic Home Page

Chapter 4: Strapi Collection Type

Lecture 1: Create The Content Type

Lecture 2: Generate Data

Lecture 3: Upload Images

Lecture 4: Associate Images To Content

Chapter 5: Ui List View

Lecture 1: Route Group And Layout

Lecture 2: Render List

Lecture 3: Populate Image

Lecture 4: Style The List

Lecture 5: Pagination

Lecture 6: Filter By Attribute

Chapter 6: Relations

Lecture 1: Create A Related Content Type

Lecture 2: Render Related Content Type

Lecture 3: Filter By Related Content Type

Chapter 7: Contact Form

Lecture 1: Create The Server Action

Lecture 2: Create The Contact Form

Chapter 8: Sorting

Lecture 1: Sort By Attribute

Chapter 9: Detail Page

Lecture 1: Detail Page

Lecture 2: Radar Chart

Chapter 10: Deployment

Lecture 1: Deployment Intro

Lecture 2: Deploy Strapi To Heroku

Lecture 3: Cloudinary

Lecture 4: Data Transfer

Lecture 5: Deploy Next To Vercel

Lecture 6: Caching

Lecture 7: Test The Contact Form

Chapter 11: Extra

Lecture 1: Recap

Lecture 2: Extra Topics

Lecture 3: Request Memoization

Lecture 4: Data Cache

Lecture 5: Revalidation

Lecture 6: Full Route Cache

Lecture 7: Router Cache

Lecture 8: Image

Lecture 9: Link Prefetching

Lecture 10: Nextjs Tips

Lecture 11: Strapi Tips

Chapter 12: Bonus

Lecture 1: Bonus

Instructors

Travis Luong
Full Stack Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 1 votes

5 stars: 2 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!