The Freelance Stack: Real project with NextJS and Strapi

Learn why Next.js, a React-based meta framework, enables server-side rendering, faster performance, and improved seo, by pre rendering and hydrating with smaller bundles, while integrating api routes and Strapi data.

Set up a Next.js project using npx create next app, pinning version 13.55, and explore the app router with the app directory, server vs client components, and routing basics.

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.

Explore how to link between the blog and home pages in Next.js using the Link component to enable a single-page application feel with preloaded content, eliminating full page reloads.

Explore server and client components in Next.js 13, learn why server side components ship with minimal JavaScript and how client side components enable interactivity through hydration and state management.

Fetch data on the server in Next.js by attaching it to a component, using fetch or Axios, and render 100 blog posts from a Strapi or open API.

Explore dynamic routing in Next.js by fetching post data, pre-rendering pages with generate static params, and handling id-based routes with not-found fallbacks and deduped requests.

Create not found pages for specific route segments in Next.js, handle api responses that return 200 but lack content, and introduce Strapi for the project.

Explore how to use Figma as a collaborative design tool, inspect fonts, colors, and distances, and learn how to translate the design into Next.js and css code.

Set up the surf camp front end with Next.js 13.55 using npx create next app, organize a project folder, initialize the app router, delete starter files, and run dev server.

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.

Define a typography file in the Next.js project to manage font sizes with rems and pixels. Load DM serif display from Google fonts and enable responsive headline scaling via 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.

Install strapi with the quick start, create a camp content type with a name and rich text, publish it, and expose a public api at /api/camps for the front end.

Explore building a header JSX in Next.js, with a shared nav built from a nav items array, client-side links via next/link, an SVG logo, and a book now button.

Develop a footer in a Next.js layout by mirroring the header, creating a two-row footer JSX with a logo, mapped navigation links, and a policies section plus a copyright.

Learn to style a two-row footer in CSS, with a black background and white text, precise padding, a resizable logo via a color filter, and flex-based navigation links and policies.

Style the header as a flex container, import header and button CSS, and refine the logo, nav, and a reusable button with spacing, padding, and border radius.

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.

Style the hero section for a Next.js course by setting a fixed height, a full-width background image with absolute positioning, and a turquoise medium button.

Create a reusable info block component for the home page with image, headline, text, and button in a flex layout, prepared to receive data from Strapi and support reverse order.

Create a sass file for info blocks, define info class with a flex row layout that places image and text at opposite ends, and implement padding to handle reverse mode.

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.

Create an info block content type in Strapi with image, headline, rich text, and a configurable button, then publish its public API for front-end use.

Learn to use single content types in Strapi to assemble per-page info blocks with relational fields, enabling API endpoints for landing and experience pages, ready for Next.js front end integration.

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.

Create a reusable Strapi data fetch utility in a utils folder using axios, with a base URL from env and error handling, then transform the nested data into UI-ready blocks.

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.

Learn to render info blocks on the experience page by fetching data from Strapi, removing hard-coded data, and using Next.js revalidate for automatic, timed data updates.

Build a two-column highlight article hero with a headline, intro, and read more button, wired to blog slugs and a featured image in Next.js and Strapi.

Style the highlight article and establish sitewide blog layout with consistent 48px side margins and 20rem header spacing using sass pages, creating a two-column text-and-image flex design.

Create a subscribe to newsletter component in a Next.js 13 project, using JSX as a client component with a two-column layout, email input, and submit button.

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.

Build a reusable featured items component for the blog and events pages by mapping a data array to link cards, using a separate featured article subcomponent and headline props.

Style the featured items component with sass using a flex container with wrap, sizing each item to about one third of the container, and applying image, padding, background, and borders.

Create a blog article content type in Strapi using the content type builder, define fields like slug, headline, excerpt, featured image, date, author, and highlight, then add data.

Learn how to fetch blog articles from Strapi, expose a public api, and transform nested data into a clean structure with id and featured image url, sorted by publish date.

Render Strapi blog articles on the main page by selecting a highlight and featured items, format dates, and enable a client-side see more button with useState and slice.

Create dynamic routes for blog articles using Next.js app router and generate static params to map Strapi slugs to individual article pages.

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.

Populate highlight article components, including headline, paragraph with image, image with caption, and lists written in markdown, in the dynamic zone to drive front-end rendering of each type.

Build the article intro component from Strapi data, including the headline, date, author, and featured image. Render a background, display the image and headline, and format the date.

Style the article intro by creating a partial and class, applying padding and a full-width background image with absolute positioning, border radius, and legible text color.

Create an article overview component that renders the excerpt and builds a dynamic table of contents from the article content array, linking headlines to sections with hash anchors.

Create a new article overview partial in the sass folder, using a two-column flex container with space-between and setting the info block width to 60% to match the design.

Create a generic article component that uses a switch statement to render the appropriate subcomponent: headline, paragraph with image, or landscape image, from Strapi data, on the blog article page.

Build a reusable article headline component in Next.js with Strapi data, wire slug navigation, and render an h3 headline with the article headline class inside the article component.

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.

Adjust the css to support reverse and portrait layouts for the text with image component, configuring a flex container, widths, and object-fit cover.

Build an article paragraph component in a Next.js project, render markdown with React Markdown, apply a copy class for font sizing, and adjust margins and list styling for article content.

Style the article paragraph, set its bottom margin to six rem, and align the unordered list with two rem top and left margins.

Build the landscape image component from Strapi data, rendering an image with an optional caption inside the article component. Reuse the extract image function and conditionally render the caption.

Center the article image, apply a 65% width with a 40 rem minimum and a 6 rem bottom margin; ensure the caption has a 1.6 rem top margin.

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'.

Create a Next.js blog preview component that fetches articles from Strapi, shows a highlighted article and the three most recent posts, and formats dates with the weekday.

Import the blog preview CSS into components and CSS, then center the preview in a flex column with margins and padding, and size images at 360px height with object-fit: cover.

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.

Connect the frontend subscribe form to Strapi by posting newsletter signups with axios from a client component. Use next public env vars and provide error handling and signup status feedback.

Create Strapi content types for events and participants, defining fields like name, description, start date, end date, pricing, image, and a one-to-many relationship to track registered participants.

Feed and organize event data in Strapi by creating event and participant content types, entering seven camp entries with dates, prices, and images, and configure permissions for secure querying.

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.

Learn to style a signup form with a two-column flex layout, precise widths, and spacing for the info and form sections, plus beige inputs and labeled blocks.

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.

Generate static params for every event by fetching Strapi data, then pre render individual event pages using shared components. Implement ID-based routing and error handling.

Create a processEventData function to return an event object with all attributes and the id for fetching individual events, then pass event.name, event.description, and 'sign up' to the signup form.

Render an individual event page from Strapi data by wiring a signup form with description markdown and passing single and shared pricing for the selected camp.

Learn to post relational data in Strapi via a rest api, linking participants to specific events with an event id, and generate signup payloads for the front end.

Craft an advanced Strapi query to fetch upcoming events after today, sort by start date ascending, and limit to 12 items, populating the image field manually.

Describe processing Strapi data to feed the featured items component, create a dedicated featured event component, and distinguish article versus event items with event links and starting prices.

Adjust the featured item styling to achieve full-width containers, 60px spacing from the signup form, bold headlines, and consistent margins for event items and dates.

Fetch and display other events on an individual event page, with an optional exclusion of the current event via a dynamic query, using Next.js and Strapi.