The Freelance Stack: Real project with NextJS and Strapi

Explore simple routing in Next.js using a file-based approach within the app directory. Create routes by adding a blog folder with a page.js and a layout.js to render content.

Create a header component and a layout.js at the app root in Next.js to apply a shared layout across pages, including subtrees like the blog.

Define and reuse color variables via Variables.scss, import in the correct order, and set up typography with a typography.css and Google Fonts, using rem units and breakpoints mixins.

Set up a Sass workflow by creating a Sass folder with a base partial underscore-prefixed to reset browser styles and import it into a main Sass file.

Create a reusable hero section in jsx with props for background image, headline, strap line, and theme, usable across main, experience, and blog pages, with images from Strapi.

Create the experience page by reusing the hero section and three info blocks, export the hero image to public assets, and update the header to white on the experience path.

Style the header to a light version with a white logo via a filter, and add a z-index to show hover-clickability. Prepare data for the Strapi info blocks.

Fetch and consume Strapi info blocks data in a Next.js 13 app using server components. Build predictable API endpoints, fetch with Axios, and handle nested data structures from Strapi.

Learn to render dynamic info blocks on a Next.js page by mapping Strapi data to info block components, handling image URLs, and using react-markdown for markdown content.

Create a helper function, create info block button, that renders a Strapi-driven info block button, returning null if unavailable or a link with slug-based navigation and text.

Style the newsletter component with a two-column layout and a beige input with a matching subscribe button. Use rem-based spacing to align elements and prepare for submission functionality.

Track user input with useState and onChange, handle onSubmit with preventDefault, validate the email, and send the data to Strapi to show a centered thank-you message after signup.

Master building a fully customizable blog with Strapi dynamic zones and reusable components like headlines, paragraphs, and images. Connect these to a Next.js front end for dynamic content rendering.

Learn to build an image with text component in React, using JSX, React Markdown, and Strapi data to render landscape or portrait images with captions and a clean layout.

Showcases the other articles section on the individual blog page by reusing the featured items component, filtering out the current article by slug, and labeling it 'explore our other articles'.

Turn the blog items into clickable links by routing each item to blog/article/article.slug, enabling navigation to articles and completing the blog section as the course prepares the remaining pages.

Learn to create a newsletter sign up content type in Strapi and post front-end email data to Strapi via a post request, including testing with Postman and validating emails.

Build a two-column signup form with a left info panel and a right form, using a reusable signup form component and a text input component with props.

Demonstrates building a Next.js signup form that posts participant data to Strapi with a general interest flag using axios. Implements onChange, onSubmit, confirmation messaging, error handling, and front-end validation.