Uploaded May 2024 | Updated September 2026, 2 weeks ago

---

Building YouTube Summarizer with Next.js: Next.js and Strapi Full Tutorial

Welcome to our Epic Next.js 14 tutorial series! In this react tutorial, we'll build a real-life application from scratch using Next.js 14 and Strapi.

Throughout the series, you'll learn to create a full CRUD application with authentication, pagination, and search functionalities. We'll also explore using AI to summarize YouTube videos, saving you time and enhancing your learning experience.

Resources for each section.
Part 1: Getting Started
strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-1-2

Part 2: Building Out The Hero Section of the homepage
strapi.io/blog/epic-next-js-14-tutorial-part-2-building-out-the-home-page

Part 3: Finishing up the homepage Features Section, TopNavigation and Footer
strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-3

Part 4: How to handle login and Authentication in Next.js
strapi.io/blog/epic-next-js-14-tutorial-part-4-how-to-handle-login-and-authentication-in-next-js

Part 5: Building out the Dashboard page and upload file using NextJS server actions
strapi.io/blog/epic-next-js-14-tutorial-part-5-file-upload-using-server-actions

Part 6: Get Video Transcript with OpenAI Function
strapi.io/blog/epic-next-js-14-tutorial-part-6-create-video-summary-with-next-js-and-open-ai

Part 7: Strapi CRUD permissions
strapi.io/blog/epic-next-js-14-tutorial-part-7-next-js-and-strapi-crud-permissions

Part 8: Search & pagination in Next.js
strapi.io/blog/epic-next-js-14-tutorial-part-8-search-and-pagination-in-next-js

Part 9: Backend deployment to Strapi Cloud
strapi.io/blog/epic-next-js-14-tutorial-part-9-backend-deployment-to-strapi-cloud

Part 10: Frontend deployment to Vercel
strapi.io/blog/epic-next-js-14-tutorial-part-10-frontend-deployment-to-vercel

What You'll Learn:
- Project Setup: Initialize and configure a Next.js 14 project.
- Frontend Development: Use Tailwind CSS and Shadcn UI to style your app.
- Backend Integration: Set up a Strapi Headless CMS for data management and authentication.
- CRUD Operations: Implement Create, Read, Update, and Delete functionalities.
- Authentication: Handle user login and registration securely.
- Dashboard: Build a user dashboard to manage notes and video summaries.
- AI Integration: Use OpenAI to generate video transcripts and summaries.
- Search & Pagination: Enhance user experience with efficient data navigation.
- Deployment: Deploy your backend to Strapi Cloud and frontend to Vercel.
- Home Page: Create a landing page with navigation, hero sections, and footer.
- Login/Register Page: Implement user authentication with Strapi and protect routes.
- Dashboard: Display available credits, and summaries with form generation.
- Summary Generation: Generate YouTube video summaries using AI.
- Notes Management: Access and manage your video notes and summaries.
- Account Page: Update user information and profile pictures.

Join us on this journey to master Next.js 14 and Strapi while building a powerful, real-world application. Let's get started!

If you have any questions feel free to ask in the comments.