Building a Jamstack Application with Next.js and Strapi CMS

Explore building performance-efficient web applications using Next.js and Strapi. Gain insights into creating static sites, user authentication, and integrating headless CMS in a Jamstack architecture.

Beginner

33 Lessons

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Project

29 Playgrounds

This course includes

1 Project

29 Playgrounds

Course Overview

Jamstack proposes an architecture for creating flexible, secure, and performance-efficient web applications. This course follows a tutorial-based approach, through which you will learn how to build a complete Jamstack application with Next.js and Strapi. This course will introduce you to Jamstack and how it differs from standard web applications. you will then learn about Next.js and how to create static websites. Along the way, you will create a Recipes application with a list of recipes available through...Show More

What You'll Learn

A thorough understanding of the core concepts related to Next.js

Familiarity with Static Site Generation with Next.js

Hands-on experience building a Jamstack application with Next.js and Strapi CMS

Familiarity with core components of Strapi including Content Manager, Content-Type Builder, and Strapi API endpoints

Hands-on experience building a Notes application project using Strapi and Next.js

What You'll Learn

A thorough understanding of the core concepts related to Next.js

Course Content

Introduction

Get familiar with Jamstack architecture, Next.js static sites, and Strapi CMS usage.

Introduction to the Course

What We'll Be Building

Getting Started with Jamstack

Look at Jamstack architecture, static site generation, JavaScript with APIs, and headless CMS.

What is Jamstack?

Markup and Static Site Generators

JavaScript and APIs

Headless Content Management Systems

Quiz: Getting Started with Jamstack

Basics of Next.js

Explore the essentials of building with Next.js, from routing and dynamic routing to asset management.

Introduction to Next.js

Quiz: Basics of Next.js

Static Site Generation with Next.js

Grasp the fundamentals of static site generation with Next.js, including pre-rendering and dynamic routes.

Pre-rendering

Static Generation

Static Generation of Dynamic Routes

The fallback Option

Adding the Search Functionality

Deploying a Static Site on Netlify

Server-Side Rendering

Quiz: Static Site Generation with Next.js

Using Strapi as a Headless CMS

Solve problems in setting up and managing content with Strapi CMS for Next.js apps.

Getting Started with Strapi

The Content Manager and Content-Types

Strapi's Content-Type Builder

Relational Fields in Strapi

Using the Strapi API Endpoints

Quiz: Using Strapi as a Headless CMS

Building the Complete Application

3 Lessons

Follow the process of integrating a Next.js frontend with a Strapi backend for a meal management app.

Project: Notes Application

Project

Conclusion

2 Lessons

Approach building a Jamstack application with Next.js and Strapi CMS while managing content.

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!