Uploaded October 2024 | Updated September 2026, 2 weeks ago
Welcome to Part 3 of this Next.js tutorial with Strapi 5, let's finish up our home page and build out our features section.
👋 Code Snippets: strapi.link/epic-next-3
🚀 If you missed the previous parts, check the pinned comment for the links. Plus, you can find all the notes and code snippets in the article linked below to follow along easily.
Hello everyone! 👋 let's learn to code by building.
In this part, we'll focus on:
- Completing the homepage by adding the top navigation and footer.
- Creating a custom Strapi image component to handle local and cloud-hosted images.
- Configuring the next.config.js file for image optimization.
- Building a dynamic feature section and integrating it with Strapi.
- Using a Block Renderer to render different content sections dynamically.
- Structuring data loaders for better code management.
By the end of this video, your homepage will be more dynamic, and you'll have a solid foundation for future customization. If you have any questions, drop them in the comments or catch me live on Strapi's Discord during open office hours. Happy coding, and I'll see you in the next part!
Welcome to Part 3 of this Next.js tutorial with Strapi 5, let's finish up our home page and build out our features section.
👋 Code Snippets: strapi.link/epic-next-3
🚀 If you missed the previous parts, check the pinned comment for the links. Plus, you can find all the notes and code snippets in the article linked below to follow along easily.
Hello everyone! 👋 let's learn to code by building.
In this part, we'll focus on:
- Completing the homepage by adding the top navigation and footer.
- Creating a custom Strapi image component to handle local and cloud-hosted images.
- Configuring the next.config.js file for image optimization.
- Building a dynamic feature section and integrating it with Strapi.
- Using a Block Renderer to render different content sections dynamically.
- Structuring data loaders for better code management.
By the end of this video, your homepage will be more dynamic, and you'll have a solid foundation for future customization. If you have any questions, drop them in the comments or catch me live on Strapi's Discord during open office hours. Happy coding, and I'll see you in the next part!
![Strapi v5 Crash Course 2025 [ Part 8 Building our landing page with dynamic zones ]](https://i.ytimg.com/vi/ewgwNgEYp6I/mqdefault.jpg "Strapi v5 Crash Course 2025 [ Part 8 Building our landing page with dynamic zones ]
In Strapi tutorial part 8, we will start building our Landing Page with our next components: Content With Image, Markdown and Person Card.
👉 Lesson Notes: https://www.codingafterthirty.com/courses/strapi-5-crash-course-2025/building-our-landing-page-with-dynamic-zones
👉 Learn more about Strapi: https://strapi.link/learn-more
Welcome back to Part 8 of our Strapi Crash Course! In this tutorial, we’ll continue building our Content using Images, Markdown, and Person Card.
We learn how to use Strapis dynamic zones and allow non-technical users to manage content.
📚 What You’ll Learn:
- Creating Landing Page Content Types: Well set up a new single type for your landing page, complete with essential fields.
Dynamic Zones Explained: Discover how dynamic zones allow multiple components and can help you manage variations in content structure.
- Step-by-Step Section Creation: Continue to build out our landing page sections.
- Using Queries for Data Population: Understand how to implement populate logic to prepare your content for display.
- Middleware for Improved API Calls: Ill show you how to create middleware that automatically populates your data, making your API calls cleaner and safer.
🛠️ Key Takeaways:
- Flexible Content Management: Dynamic zones allow for easy rearrangement and addition of components.
- Better API Integration: Middleware enhances data fetching efficiency and security.
- User-Friendly Interface: Strappys intuitive content type builder simplifies creating and managing content.
- Reusable Components: Create components that can be used across multiple pages for consistency.
- SEO-Friendly Structure: The ability to manage content dynamically helps in optimizing search engines.
💬 Join the Discussion. Have questions or need clarification? Drop your comments below, and dont forget to subscribe for more Strapi tutorials!")
