Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Modern CMS Driven Web Applications with Strapi and Next 13

via egghead.io

Overview

**Developers aren’t the only ones working on sites.** Marketers, copywriters, designers, and other non-coding roles all need to be able to make content changes. If you don't want to be bothered to open a PR every time a typo needs fixed, you *need* a CMS. And Strapi is an *amazing* CMS option. Strapi helps you quickly build a robust content API. You can host it yourself, it supports both RESTful and GraphQL, handles your authentication, lets you bring team members and it's highly customizable with plugins and extensions. You can take those gains even further by adding **Next.js 13 to the stack.** Next.js is fast, supports both server and client-side rendering, and features dynamic routes. Once you are generating dynamic pages from your CMS you’ll see just how powerful the combination of Strapi and Next.js is! **In this course you will do the following:** - Building Content Models with Strapi - Fetching Data from your Headless CMS - Using React Server Components - Using the Next.js App directory - Setting up pagination in Strapi and Next.js - Parsing and rendering content in your Next.js application - Connecting external services to your Headless CMS (like Cloudinary for Media Management) - Deploying your Next.js and Strapi Applications to a production environment - Setting up and using Strapi Plugins Transferring data between your Strapi environments By the end of this course you’ll be building pages and managing your content like a pro!

Syllabus

  • Creating a New Strapi Project for Development with npx
  • Create a Collection Type for a Post in Strapi
  • Set up API End User Permissions to Make REST Queries in Strapi
  • Install and Query GraphQL API in Strapi
  • Scaffold a Web App with a Next.js 13 Template
  • Create an About Us Page inside the Next.js 13 App Directory
  • Query an Entry from Strapi with Next.js 13 Server Components
  • Create and Edit a List Component to Match Design Guidelines in Next.js 13
  • Set up Dynamic Pages in Next.js 13 App Directory and Query with Page Slug
  • Build a Page Template for a Dynamic Page in Next.js 13
  • Handle Runtime Errors in Next.js 13 Nested Routes
  • Using React Markdown in Next.js
  • Add Pagination with the Meta Object Returned from Strapi in Next.js 13
  • Install and Add the Cloudinary Provider to a Strapi Application
  • Deploy a Strapi Application to Heroku
  • Transfer Data Between Environments with Strapi Data Transfer
  • Deploy a Next.js 13 Application to Vercel
  • Upgrade a Strapi App in Development and Production
  • Invite a New User to Your Strapi App
  • Install and Use a Strapi Plugin

Taught by

Daniel Phiri

Reviews

4.5 rating at egghead.io based on 15 ratings

Start your review of Modern CMS Driven Web Applications with Strapi and Next 13

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.