Overview

Coursera Plus Monthly Sale: All Certificates & Courses 40% Off!

Grab it

Unlock the power of modern web development with Next.js, Strapi, and Sass to build a fully functional, real-world freelance project. This course guides you through setting up a scalable full-stack application, integrating a headless CMS (Strapi) with a Next.js frontend, and mastering component-based UI design. You'll also learn best practices for handling dynamic routing, content fetching, and deployment. The journey begins with a Next.js crash course, covering its core concepts such as routing, layouting, data fetching, and dynamic pages. You'll then dive into Strapi to create structured content types and connect them seamlessly to your frontend. Along the way, you’ll design and style pages using Sass while exploring Figma for UI/UX planning. Building on this foundation, you'll develop key website sections like landing pages, blogs, and event signup systems, using reusable layout components. You'll create dynamic blog articles, fetch data from Strapi, and implement signup forms for events and surfcamps. Each module is designed to give you hands-on experience in a real-world project workflow. Finally, you'll learn how to deploy your project to Heroku, migrate databases from SQLite to PostgreSQL, and optimize image handling with AWS S3. Whether you're a freelancer, aspiring web developer, or entrepreneur, this course equips you with the essential skills to build scalable, dynamic web applications. A basic understanding of JavaScript and React is recommended.

Syllabus

Introduction

In this module, we will introduce you to the course, outlining the core technologies you'll be working with—NextJS, Strapi, and SASS. You'll learn the best approach to following the course, how to use the provided resources, and how to tailor your learning experience to your needs.

NextJS Crash Course

In this module, we will explore the fundamentals of NextJS, from setting up a project to implementing essential features like routing, layouts, and data fetching. You’ll gain hands-on experience with dynamic routing, server vs. client components, and handling 404 pages.

Developer Intro To Figma

In this module, we will introduce Figma as a design tool for developers, showing how to leverage it for structuring UI components and collaborating on design assets. You’ll learn how Figma fits into the web development workflow and how to access design files efficiently.

Initial Project Setup NextJS, Strapi, and Sass

In this module, we will establish the foundation of our project by setting up NextJS, configuring SASS for styling, and installing Strapi. We’ll also discuss why this specific stack is used, ensuring efficiency and scalability in development.

Landing Page & Experience Page with Layout Components

In this module, we will focus on building the landing and experience pages using modular components. You’ll create and style sections such as the header, footer, hero section, and info blocks, ensuring a cohesive and scalable design.

Connecting our Frontend to Strapi

In this module, we will integrate Strapi with our NextJS frontend, creating content types and fetching dynamic data. You'll learn how to process and render structured data efficiently, making content updates seamless.

Main Page of the Blog

In this module, we will develop the main page of the blog, focusing on structuring and styling key components. You’ll also implement functionality for the newsletter subscription feature, making the blog interactive and engaging.

Implement Blog on Frontend through Strapi and NextJS

In this module, we will connect the blog’s frontend with Strapi, creating and managing blog articles effectively. You’ll learn to fetch and render articles dynamically while setting up routes for individual blog posts.

Create Fully Customisable Blog Article

In this module, we will build a fully customizable blog article page, leveraging Strapi’s dynamic zones. You’ll structure, style, and render different content types dynamically, creating a highly flexible and engaging blog experience.

Events Section - Create Signup Functionality for Offered Surfcamps & Events

In this module, we will implement an events section, allowing users to sign up for surfcamps and other activities. You’ll build and connect a signup form to Strapi, enabling seamless event registration and data management.

Deployment to Heroku

In this module, we will deploy our full-stack application to Heroku, covering both the Strapi backend and NextJS frontend. You’ll learn to migrate databases, manage image uploads with AWS S3, and ensure a smooth transition from development to production.