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.