Uploaded August 2024 | Updated September 2026, 2 weeks ago
Getting Started With Next.js 15 and Strapi 5 Headless CMS Project Overview [ All Code Included ]
Strapi 5 docs: strp.cc/3yHOhAw
Project Repo: github.com/PaulBratslavsky/strapi-5-next-js-starter-project
In today's video, I wanted to share a project I've been working on—a simple blog website with dynamic content powered by Next.js on the front end and Strapi headless CMS on the back end.
I'll walk you through the basic features and how to set up the project locally so you can have all the code and run it on your computer.
Project includes:
- Dynamic landing page
- Header and Footer
- Blog section with pagination and search
- Single post view
- Login and Register page
- Middleware for protecting the routes
- Dashboard placeholder page
Project tech:
- Next.js 15
- Shadcn UI
- Tailwind
- Strapi
I'll also show you step-by-step instructions on how to set up the project on your local machine.
Although this is a starter demo project, it's perfect for jumpstarting your blog website.
Key Topics Summary:
- Simple blog website project with dynamic content
- Next.js front end and Strapi headless CMS back end
- Blog section with posts, search, pagination, and user authentication
- Starter demo project for viewers to build upon
- Local setup process with repository cloning and setup script
- Use of Shadcn UI components and ReWeb page builder
- Strapi admin dashboard and content management
- Custom fetch function for data retrieval
Getting Started With Next.js 15 and Strapi 5 Headless CMS Project Overview [ All Code Included ]
Strapi 5 docs: strp.cc/3yHOhAw
Project Repo: github.com/PaulBratslavsky/strapi-5-next-js-starter-project
In today's video, I wanted to share a project I've been working on—a simple blog website with dynamic content powered by Next.js on the front end and Strapi headless CMS on the back end.
I'll walk you through the basic features and how to set up the project locally so you can have all the code and run it on your computer.
Project includes:
- Dynamic landing page
- Header and Footer
- Blog section with pagination and search
- Single post view
- Login and Register page
- Middleware for protecting the routes
- Dashboard placeholder page
Project tech:
- Next.js 15
- Shadcn UI
- Tailwind
- Strapi
I'll also show you step-by-step instructions on how to set up the project on your local machine.
Although this is a starter demo project, it's perfect for jumpstarting your blog website.
Key Topics Summary:
- Simple blog website project with dynamic content
- Next.js front end and Strapi headless CMS back end
- Blog section with posts, search, pagination, and user authentication
- Starter demo project for viewers to build upon
- Local setup process with repository cloning and setup script
- Use of Shadcn UI components and ReWeb page builder
- Strapi admin dashboard and content management
- Custom fetch function for data retrieval
![Building My Project with Next.js and Strapi [ Learning to code by building projects ]](https://i.ytimg.com/vi/uAuP1b-c2Cs/mqdefault.jpg "Building My Project with Next.js and Strapi [ Learning to code by building projects ]
#learntocode2025 #webdevelopment #buildinpublic
Friday Night Hangout 8:00 PM CST. Its Friday night, I am single, so I might as well do some coding. Building a profile page in my LMS project built with Next.js 15 and Strapi 5.
- Watch me try to code
- Ask questions
- Share some thoughts and ideas
Streaming my progress as I learn to code by building apps with Next.js and Strapi.")
![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.")
