Uploaded October 2024 | Updated September 2026, 2 weeks ago
Learn Next.js 14 and Strapi 5 by building a YT video summarization app in this beginner-friendly tutorial.
👋 Code Snippets: strapi.link/epic-next-1
Hello everyone! 👋 let's learn to code by building.
Key Points You’ll Learn:
Headless CMS: Learn how to utilize Strapi as a headless CMS to create APIs in mere minutes, complete with an amazing admin panel for content management.
Front-End Development: Set up a Next.js front end with TypeScript, Tailwind CSS, and Shadcn UI components for a sleek and modern design.
Data Fetching: Understand how to fetch data from your Strapi backend and display it dynamically in your Next.js application.
OpenAI Integration: Get a sneak peek of how we’ll leverage OpenAI to generate summaries in future videos.
Benefits of Following Along:
Hands-On Experience: You’ll gain practical experience using modern web development tools and frameworks that are highly sought after in the industry.
Project-Based Learning: Building a real application will reinforce your understanding of essential concepts and best practices.
Join me as we kick off this exciting project! Don’t forget to subscribe and hit the notification bell 🔔 to stay updated on the next parts of this series. If you have any questions, please drop them in the comments below. Let’s get started! 🚀
Learn Next.js 14 and Strapi 5 by building a YT video summarization app in this beginner-friendly tutorial.
👋 Code Snippets: strapi.link/epic-next-1
Hello everyone! 👋 let's learn to code by building.
Key Points You’ll Learn:
Headless CMS: Learn how to utilize Strapi as a headless CMS to create APIs in mere minutes, complete with an amazing admin panel for content management.
Front-End Development: Set up a Next.js front end with TypeScript, Tailwind CSS, and Shadcn UI components for a sleek and modern design.
Data Fetching: Understand how to fetch data from your Strapi backend and display it dynamically in your Next.js application.
OpenAI Integration: Get a sneak peek of how we’ll leverage OpenAI to generate summaries in future videos.
Benefits of Following Along:
Hands-On Experience: You’ll gain practical experience using modern web development tools and frameworks that are highly sought after in the industry.
Project-Based Learning: Building a real application will reinforce your understanding of essential concepts and best practices.
Join me as we kick off this exciting project! Don’t forget to subscribe and hit the notification bell 🔔 to stay updated on the next parts of this series. If you have any questions, please drop them in the comments below. Let’s get started! 🚀
![How To Set Up Next Auth 5 in Next.js 15 [ project code included ]](https://i.ytimg.com/vi/xHQQ5I7E_H8/mqdefault.jpg "How To Set Up Next Auth 5 in Next.js 15 [ project code included ]
Getting started with NextAuthJS 5 the easy way with Next.js 15
✨ Checkout Template From Magic UI: https://pro.magicui.design/?ref=cat
👉 project repo: https://github.com/PaulBratslavsky/next-15-strapi-5-starter/tree/main/client
😅 my site: https://www.codingafterthirty.com
In this tutorial, I will walk you through how I set up the NextAuthJS package to add authentication to my Next 15 JS application.
Authentication Setup and Configuration
🔐 NextAuth 5 streamlines authentication setup in Next.js 15 projects, with improved documentation and simplified configuration steps.
🛠️ Create an auth.ts file to add desired providers in the providers array, which automatically detects environmental tokens from local and vite config files.
Route Protection and Handling
🛡️ Utilize Next.js middleware to specify protected routes and implement authentication checks, redirecting unauthenticated users to the main page.
🔀 NextAuth 5 offers pre-built route handlers for authentication logic, easily importable and usable in your routes.
Session Management and User Experience
👤 The session provider in NextAuth 5 enables access to session status in React components, allowing for conditional rendering of authenticated content.
🔌 NextAuth 5 provides pre-built handlers for popular authentication providers like GitHub, simplifying integration in Next.js 15 projects.
Hope you enjoyed the tutorial. Thank you for watching.")
![Getting Started with TanStack Start [ how to fetch data in Tanstack Start ]](https://i.ytimg.com/vi/xn_GNyZP2Mk/mqdefault.jpg "Getting Started with TanStack Start [ how to fetch data in Tanstack Start ]
How to fetch data in TanStack Start using server functions.
👉 Full Project Repo: https://github.com/PaulBratslavsky/strapi-tanstack-start-starter
In this video, we will take a look how to get started with Tanstack Start, if you are a complete beginner or just want to give TanStack a try, this video is for you.")
![Getting Started With Next.js 15 and Strapi 5 [ project code included ]](https://i.ytimg.com/vi/yqbFTy_0DWw/mqdefault.jpg "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.")
