Create your “next” app using Next.js and Strapi
About Course
In this course we take a quick look at Strapi v4 and explore it’s capabilities, including content type and content management as well as authentication and security.
In the second part of the course, we build a frontend for our data stored in Strapi using Next.js. The application will allow us to register users, create a custom profile with a cool profile image via Cloudinary as well as have certain features enabled only if a user is logged in.
Last but not least, we also take a look at how to deploy a production instance of Strapi to Heroku, plus we also deploy the Next.js app to Vercel.
By completing this course you will become familiar with Strapi and have a thorough understanding of how to integrate your headless CMS data with Next.js. Course Description:
In this course, you will learn how to build a modern web application using Next.js and Strapi. Next.js is a powerful React framework that allows you to build server-rendered React applications, while Strapi is a flexible and open-source headless CMS (Content Management System) that provides a robust API for managing your application’s content.
Throughout the course, you will be guided step-by-step on how to set up a Next.js project, configure routing, and create dynamic pages using server-side rendering and client-side rendering. You will also learn how to integrate Strapi as your backend CMS, enabling you to easily manage and store your application’s content.
Key topics covered in the course include:
1. Introduction to Next.js and Strapi: Understand the benefits and features of Next.js and Strapi, and how they can be used together to create powerful web applications.
2. Setting Up a Next.js Project: Learn how to install Next.js, set up a new project, and configure the necessary dependencies.
3. Creating Pages and Routing: Explore Next.js’s routing capabilities and learn how to create dynamic pages with server-side rendering and client-side rendering.
4. Integrating Strapi as a Backend CMS: Discover the features of Strapi and learn how to set it up as your backend CMS, enabling you to manage and store your application’s content.
5. Fetching Data from Strapi: Learn how to retrieve data from Strapi’s API and use it in your Next.js application.
6. Building Dynamic Components: Explore how to create dynamic components in Next.js, allowing you to reuse code and build more efficient applications.
7. Styling with CSS-in-JS: Understand how to style your Next.js application using CSS-in-JS libraries like styled-components or emotion.
8. Deploying Your Next.js and Strapi App: Learn how to deploy your application to a hosting platform, making it accessible to users on the web.
By the end of this course, you will have the knowledge and skills to build your own modern web application using Next.js and Strapi. Whether you are a beginner or an experienced developer, this course will provide you with the tools and techniques needed to create robust and scalable applications.
Course Content
Lessons
-
Working with slugified data
09:17 -
Deploy Next.js to Vercel
07:34 -
Profile image creation via Cloudinary
22:24 -
Building a profile page
10:19 -
Authentication with Next.js and Strapi (part 3)
09:21 -
Registering new users
07:19 -
Formatting data in Next.js from Strapi
06:41 -
Conditional data rendering based on authentication
14:54 -
Authentication with Next.js and Strapi (part 2)
13:05 -
Authentication with Next.js and Strapi (part 1)
09:41 -
Welcome and Application Demo
03:40 -
Data pagination
09:43 -
Consume data from Strapi with Next.js
11:02 -
Setting up the application shell with Next.js and Tailwind
12:38 -
Introduction to Next.js
07:48 -
Building data relations in Strapi
08:36 -
Authentication in Strapi
09:08 -
Adding content through the Strapi Admin UI
03:27 -
Creating content types in Strapi
04:47 -
Setting up Strapi
10:45