The Freelance Stack: Real Project with Next.js and Strapi

Course details

Follow along with this step-by-step course to learn how to build websites using Next.js and Strapi. Using the real-world example of a surfcamp, you’ll see how to add a customizable blog and sign-up forms, leverage a headless CMS, transform Figma designs into live sites, and experience the benefits of a seamless design-to-development workflow. This course takes you from design through to deployment, whether you have basic JavaScript and React skills and or are an aspiring freelancer who is eager to create manageable websites that you can deliver to non-coders.

Learning objectives
Build real-world projects with NextJS and Strapi, catering to clients without coding skills.
Create styles with simple CSS, without relying on additional frameworks.
Integrate complex data structures from the Strapi API with most any frontend.
Combine the use of website builders with the flexibility of coding from scratch.
Describe the logic behind server and client-side components.
Transform Figma designs into fully functional websites.

Concepts

Introduction

Course intro
What is the freelance stack
How to go through this course

Next.js Crash Course

Why are we using Next.js
Setting up a Next.js project
Simple routing in Next.js
Layouting in Next.js
Linking from page to page
Server and client components overview
Data fetching
Dynamic routing
Not found pages

Developer Intro to Figma

What Figma is and how to use it

Initial Project Setup Next.js, Strapi, and Sass

Next.js base setup
Styling video - Sass setup
Styling video - Variables and typography
Overview of our setup (and why we set it up this way)
Strapi installation and overview

Landing Page and Experience Page with Layout Components

Header JSX structure
Styling - Header
Footer JSX structure
Styling - Footer
Hero section JSX structure
Styling - Hero section
InfoBlocks JSX structure
Styling - InfoBlocks
Experience page - Reuse created hero section and infoblocks
Styling - Adjust header colour per path

Connecting Our Frontend to Strapi

Creating InfoBlock content type on Strapi
Use single content type in Strapi to create InfoBlocks per page
Fetch InfoBlock data on Strapi
Fetch data from Strapi and process it
Render InfoBlocks on page
Create button from InfoBlock Strapi data on page
Render InfoBlocks on experience page

Main Page of the Blog

Highlight Article JSX structure
Styling - Highlight article
Subscribe to newsletter JSX structure
Styling - Subscribe to newsletter component
Functionality subscribe to newsletter component
Featured items component JSX structure
Styling featured items component

Implement Blog on Frontend through Strapi and Next.js

Create blog article type on Strapi
Input blog article data on Strapi
Render articles from Strapi data on main page of the blog
Create dynamic routes for all blog articles

Create Fully Customizable Blog Article

Create dynamic zone in Strapi for customizable blog content
Creating data for highlight article
Article hero section JSX
Styling - Article hero section
Article intro component JSX
Styling - Article intro component
Generic article component to render different component depending on Strapi data
Article headline JSX
Styling - Article headline
Text with image component JSX
Styling - Text with image component
Article paragraph JSX
Styling - Article paragraph
Image component JSX
Styling - Image component
Other articles section on individual blog page
Blog section homepage JSX
Styling - Blog section homepage
Fix article item for featured items on homepage

Events Section - Create Signup Functionality for Offered Surfcamps and Events

Post requests in Strapi with the newsletter signup
Hook up frontend to signup component in Strapi
Strapi participant and event content type
Feeding data into Strapi for all events
Signup form JSX
Styling - Signup form
Signup form functionality - Sending data to Strapi from main events page
Pregenerate individual event pages
Event data processing
Render individual event page based off Strapi data
Sign up for specific event
Fetch and filter upcoming events with a string query from Strapi
Adjust featured items component for individual event page
Styling - FeaturedItem component adjusted for event
Fetch more events on individual event page & thank you

Deployment to Heroku

Deployment overview
Deploy Strapi server to Heroku
Difference between production Strapi and local development
Migrate local database from SQLite to Postgres to the production database
Handle image uploads in production with AWS S3
Replace image paths in production db to use AWS S3 bucket images
Deployment of Next.js frontend to Heroku