Building a Dynamic Navigation With Next.js 15 and Strapi 5 Headless CMS [ Code Included ] скачать в хорошем качестве

Building a Dynamic Navigation With Next.js 15 and Strapi 5 Headless CMS [ Code Included ]

How to structure your dynamic navigation in Next.js with Strapi. 👉🏻 Code on GitHub: https://github.com/PaulBratslavsky/st... ✨ Next.js 15 and Strapi Demo: https://strapi.link/strapi-and-nextjs 😅 My website: https://www.codingafterthirty.com Chapters 00:00 Build a dynamic navigation in Next.js 15 with Strapi 5 for easy menu item management. 04:02 Dynamic navigation in Next.js is built by fetching data from Strapi for the header, logo, call to action, and footer, while managing global SEO. Expand 05:59 Exposing Strapi endpoints allows Next.js to efficiently fetch and display essential data like logo text, navigation items, and call-to-action elements without over-fetching. 07:31 Build a dynamic top navigation in Next.js using Strapi by defining data, creating components, and setting public permissions for easy data access. 08:35 Clone the repo, run `yarn setup`, `yarn seed`, and `yarn def` to set up Strapi and Next.js with demo data. Expand Welcome back, everyone! In today’s video, we’re diving into how to create a dynamic top navigation in Next.js while pulling data from Strapi, your favorite headless CMS! What You’ll Learn Dynamic Navigation: I show you how to set up a top navigation for your Next.js 15 app using data from Strapi 5, making it easy for non-technical users to manage. Strapi Integration: Learn how to integrate Strapi as a headless CMS to pull in your navigation items dynamically, allowing for easy updates. Component Breakdown: I break down the header component into its essential parts: logo, navigation items, and call-to-action. Data Fetching: Find out how to fetch data from Strapi effectively, ensuring you're only getting what you need without over-fetching. Repository Setup: I’ll guide you through pulling the repo locally, setting it up, and running it with helpful scripts.