Epic Next.js 14 Tutorial: Learn Next.js by building a real-life project: Part 3

In this tutorial, we continued building a real-world project using Next.js 14 and Strapi CMS. We covered several key areas: 1. Refactoring the Hero Section: We refactored the Hero Section to use the Next.js Image component for optimized image handling. This included creating a custom StrapiImage component for additional quality-of-life improvements. 2. Building the Features Section: This section involved modeling the Features Section data in Strapi, creating corresponding components in Next.js, and implementing functionality to display features dynamically from the Strapi CMS. 3. Displaying Dynamic Meta Data: We examined how to get our metadata from Strapi and display it on our layout.tsx page. 4. Top Header and Footer: We created our Header and Footer, leveraging Strapi to manage and fetch global data like logo texts and social links. 5. Loading, Not Found, and Error Pages: We finished by covering how to handle loading, not found, and errors pages. In the next tutorial, we will cover creating our Sign In and Sign Up pages. This will include form validation with Zod, handling form submission with server actions, creating and storing http only cookies, and protecting our routes with Next.js middleware.