Uploaded August 2024 | Updated September 2026, 2 weeks ago
Building Top Navigation with Shadcn UI, Tailwind & Next.js. Course notes: codingafterthirty.com/dashboard/next-js-crash-course-2024/building-top-navigation-in-next-js
Welcome back to our Next.js Crash Course! 🚀 In this video, we dive into building a responsive top navigation bar for our Next.js application, complete with a mobile menu.
In this Next.js crash course , we will continue on our coding journey. We will take a look on how to create a top navigation bar in a Next.js application using Shadcn UI components.
If you are just learning to code, or want to build web apps with Next.js, this video is for you.
Key Points:
- Creating a Top Navigation: Learn to implement a top navigation bar using Next.js server and client components.
- Using Pre-built Components: Explore ShadCN UI and ReWeb page builder to speed up development.
- Building Dynamic Navigation: Use Next.js client-side components for dynamic behavior, like a responsive mobile menu.
- Fetching Data from a Headless CMS: A sneak peek at using Strapi to manage dynamic navigation data.
We'll cover all the code snippets and provide templates, so you can focus on learning.
If you have any questions let me know in the comments. Happy coding! 😊
Building Top Navigation with Shadcn UI, Tailwind & Next.js. Course notes: codingafterthirty.com/dashboard/next-js-crash-course-2024/building-top-navigation-in-next-js
Welcome back to our Next.js Crash Course! 🚀 In this video, we dive into building a responsive top navigation bar for our Next.js application, complete with a mobile menu.
In this Next.js crash course , we will continue on our coding journey. We will take a look on how to create a top navigation bar in a Next.js application using Shadcn UI components.
If you are just learning to code, or want to build web apps with Next.js, this video is for you.
Key Points:
- Creating a Top Navigation: Learn to implement a top navigation bar using Next.js server and client components.
- Using Pre-built Components: Explore ShadCN UI and ReWeb page builder to speed up development.
- Building Dynamic Navigation: Use Next.js client-side components for dynamic behavior, like a responsive mobile menu.
- Fetching Data from a Headless CMS: A sneak peek at using Strapi to manage dynamic navigation data.
We'll cover all the code snippets and provide templates, so you can focus on learning.
If you have any questions let me know in the comments. Happy coding! 😊

![Getting Started With Next.js 15 and Strapi 5 [ project code included ]
Here is the tech stack I use when building projects. Next.js 15 and Strapi 5.
🔎 Learn about Strapi: https://strapi.link/yt
👉🏻 Code on GitHub: https://github.com/PaulBratslavsky/strapi-5-next-js-starter-project
✨ My Free Code Camp Course: https://www.youtube.com/watch?v=Q-cPtlYG1cY
Hey everyone! Today, Im excited to share a project Ive been working on using Next.js 15 and Strapi 5. I’ll walk you through how to set it up locally in this video. Here are the key topics I’ll cover:
Project Overview: I’ll give you a sneak peek at the landing page and features like the blog section and user authentication.
Local Setup: I’ll show you step-by-step how to clone the repository and get the app running on your machine.
Dynamic Content Management: I’ll demonstrate how to manage and render dynamic content using Strapi’s content manager.
Protected Routes: Use middleware to learn how to secure routes in your Next.js application.
Custom Fields in Strapi: I’ll explain how to create custom fields to enhance content management. Getting Started With Next.js 15 and Strapi 5 [ project code included ]](https://i.ytimg.com/vi/yqbFTy_0DWw/mqdefault.jpg)

![Here is why you should be building MCPs (Model Context Protocol) [ code included ]
Why Everyone’s Talking About MCP? Let me show you what I have built and why you should be building MCPs too. Tutorial 👉 https://codeinpublic.com/articles/building-a-pokemon-battle-mcp-server-step-by-step-tutorial Here is why you should be building MCPs (Model Context Protocol) [ code included ]](https://i.ytimg.com/vi/zaI9PCI0bRU/mqdefault.jpg)
