Next.js Full Course 2024: Build & Deploy Full Stack Apps
Learn Next.js in 2024 to build and deploy full-stack apps. Black Friday: 25% off on courses until Dec 2! π

JavaScript Mastery
2.4M views β’ May 5, 2023

About this video
π₯Black Friday is live: 25% off everything (Nov 25 - Dec 2) - ends soon π₯
Individual courses or Pro (all courses + commitment system).
Don't start 2026 from zero. Build your system now.
π Get 25% off - limited time: https://jsm.dev/ytpin-bf25
Watch the updated version of this course - https://www.youtube.com/watch?v=Zq5fmkH0T78
Ultimate Next 14 Course: https://www.jsmastery.pro/next15
Next.js recently became the official React framework as outlined in React docs. In this course, you'll learn the most important Next.js concepts and how they fit into the React ecosystem. Finally, you'll put your skills to the test by building a modern full-stack Next 14 application.
Quick heads up: This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance-focused update of version 13. That means every concept, technique, and feature we dive into here is just as applicable and relevant in Next.js 14
Want to land your dream programming job in 6 months?
β JSM Masterclass Experience - https://jsmastery.pro/masterclass
Become a Software Engineer. Guaranteed.
π Materials/References:
Ultimate Next.js 14 Roadmap: https://resource.jsmastery.pro/nextjs-guide
GitHub Code (give it a star β): https://github.com/adrianhajdin/project_next_14_ai_prompt_sharing
GitHub Gist Code: https://gist.github.com/adrianhajdin/6df61c6cd5ed052dce814a765bff9032
Zipped Assets: https://drive.google.com/file/d/15bGW9HBImu1p3HAYalnaj2Ig_Sn-1c-f/view?usp=share_link
In this video, you'll learn:
- Next.js 14 App Folder Structure
- Next.js 14 Client Components vs Server Components
- Next.js 14 File-based Routing (including dynamic and nested routes)
- Next.js 14 page, layout, loading, and error Special Files
- Next.js 14 Serverless Route Handlers (Next API, Full Stack Apps)
- Next.js 14 Metadata and Search Engine Optimization (SEO)
- Three ways to fetch data in Next.js:
- Server Side Rendering (SSR),
- Static Site Generation (SSG)
- Incremental Static Generation (ISR)
π Find Me Here:
Discord Group: https://discord.gg/n6EdbFJ
Instagram: https://instagram.com/javascriptmastery
Twitter: https://twitter.com/jsmasterypro
πΌ Business Inquiries:
E-mail: contact@jsmastery.pro
Time Stamps π
00:00:00 Intro
00:03:33 The Benefits of Next.js
00:12:54 File & Folder Structure
00:18:39 Server & Client Components
00:23:22 Routing & Special Next.js Files
00:31:21 Data Fetching (SSR, SSG, ISR)
00:34:26 Next.js API Endpoints
00:40:48 SEO & Metadata
00:42:48 Promptopia Project Demo
00:44:31 Project Setup
00:53:22 Home page
01:50:17 Create page
02:14:41 Feed page
02:32:28 Profile page
02:48:17 Next.js API Routes
03:06:39 Special Assignment!
03:12:17 Deployment
03:23:06 Share Your Work
Individual courses or Pro (all courses + commitment system).
Don't start 2026 from zero. Build your system now.
π Get 25% off - limited time: https://jsm.dev/ytpin-bf25
Watch the updated version of this course - https://www.youtube.com/watch?v=Zq5fmkH0T78
Ultimate Next 14 Course: https://www.jsmastery.pro/next15
Next.js recently became the official React framework as outlined in React docs. In this course, you'll learn the most important Next.js concepts and how they fit into the React ecosystem. Finally, you'll put your skills to the test by building a modern full-stack Next 14 application.
Quick heads up: This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance-focused update of version 13. That means every concept, technique, and feature we dive into here is just as applicable and relevant in Next.js 14
Want to land your dream programming job in 6 months?
β JSM Masterclass Experience - https://jsmastery.pro/masterclass
Become a Software Engineer. Guaranteed.
π Materials/References:
Ultimate Next.js 14 Roadmap: https://resource.jsmastery.pro/nextjs-guide
GitHub Code (give it a star β): https://github.com/adrianhajdin/project_next_14_ai_prompt_sharing
GitHub Gist Code: https://gist.github.com/adrianhajdin/6df61c6cd5ed052dce814a765bff9032
Zipped Assets: https://drive.google.com/file/d/15bGW9HBImu1p3HAYalnaj2Ig_Sn-1c-f/view?usp=share_link
In this video, you'll learn:
- Next.js 14 App Folder Structure
- Next.js 14 Client Components vs Server Components
- Next.js 14 File-based Routing (including dynamic and nested routes)
- Next.js 14 page, layout, loading, and error Special Files
- Next.js 14 Serverless Route Handlers (Next API, Full Stack Apps)
- Next.js 14 Metadata and Search Engine Optimization (SEO)
- Three ways to fetch data in Next.js:
- Server Side Rendering (SSR),
- Static Site Generation (SSG)
- Incremental Static Generation (ISR)
π Find Me Here:
Discord Group: https://discord.gg/n6EdbFJ
Instagram: https://instagram.com/javascriptmastery
Twitter: https://twitter.com/jsmasterypro
πΌ Business Inquiries:
E-mail: contact@jsmastery.pro
Time Stamps π
00:00:00 Intro
00:03:33 The Benefits of Next.js
00:12:54 File & Folder Structure
00:18:39 Server & Client Components
00:23:22 Routing & Special Next.js Files
00:31:21 Data Fetching (SSR, SSG, ISR)
00:34:26 Next.js API Endpoints
00:40:48 SEO & Metadata
00:42:48 Promptopia Project Demo
00:44:31 Project Setup
00:53:22 Home page
01:50:17 Create page
02:14:41 Feed page
02:32:28 Profile page
02:48:17 Next.js API Routes
03:06:39 Special Assignment!
03:12:17 Deployment
03:23:06 Share Your Work
Tags and Topics
Browse our collection to discover more content in these categories.
Video Information
Views
2.4M
Likes
37.1K
Duration
03:26:29
Published
May 5, 2023
User Reviews
4.8
(485)