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.

building a Complete Jamstack Application with Next.js and Strapi CMS”.png

jamstack.tar.gz

github_name

github_email

github_access_token

Next_base

next_user_build

github

next_build

strapi_prebuild_base

fullstack

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 TheMealDB API. You will also integrate Strapi as a headless CMS, enabling you to authenticate users and allow them to save their favorite recipes. You will conclude the course by working on a project where you will be using Strapi and Next.js to authenticate users and allow them to create, retrieve, update, and delete notes for themselves.

By the end of this course, you will have a thorough command of Strapi and Next.js to create flexible, secure, and performance-efficient web applications.

Building a Jamstack Application with Next.js and Strapi CMS

Separate development and production environments

Which Next.js feature makes it an excellent candidate for building Jamstack applications? 

Which Next.js feature makes it an excellent candidate for building Jamstack applications?

**(True or False)** When compared to React, Next.js provides out-of-the-box support for routing. 

(True or False) When compared to React, Next.js provides out-of-the-box support for routing.

We can use create-react-app to create a React application first. Once routing is added to it, it becomes a Next.js application.

We can use the `npx create-next-app@latest` command to create a new application.


We can use the `npx create-react-app` command to create a new React application and then install the Next.js plugin.

What is the recommended way to bootstrap a new Next.js application? 

What is the recommended way to bootstrap a new Next.js application?

**(True or False)** After bootstrapping a new Next.js application using `create-next-app`, is it required to use the `/styles` folder for storing our project's `.css` files?

(True or False) After bootstrapping a new Next.js application using <code>create-next-app</code>, is it required to use the <code>/styles</code> folder for storing our project’s <code>.css</code> files?

Once we've bootstrapped a new Next.js application using `create-next-app`, where can we find public resources such as images and logos used in the application? 

Once we’ve bootstrapped a new Next.js application using <code>create-next-app</code>, where can we find public resources such as images and logos used in the application?

After we've bootstrapped a new Next.js application using `create-next-app`, which folder can we use for routing?

After we’ve bootstrapped a new Next.js application using <code>create-next-app</code>, which folder can we use for routing?

We know that Next.js automatically creates a route for all the files present in the `/pages` directory. What would be the route for a file available at the path `/pages/demo/index.js`?

We know that Next.js automatically creates a route for all the files present in the <code>/pages</code> directory. What would be the route for a file available at the path <code>/pages/demo/index.js</code>?

We know that Next.js automatically handles routing inside the `/pages` directory. What would be the route for a file available at the path `/pages/demo.js`?


We know that Next.js automatically handles routing inside the <code>/pages</code> directory. What would be the route for a file available at the path <code>/pages/demo.js</code>?

Introduction

Getting Started with Jamstack

Basics of Next.js

Static Site Generation with Next.js

Using Strapi as a Headless CMS

Building the Complete Application

Project: Notes Application

Conclusion

Quiz: Basics of Next.js