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

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


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

Markup and Static Site Generators

Markup

Static site generators

Next.js