Master Next.js 14: From Basic to Advanced π
Learn Next.js 14 from basics to advanced with this comprehensive course. Perfect for building modern React web apps!

Geeky Shows
102.6K views β’ Dec 3, 2023

About this video
Nextjs is The React Framework for the Web.
Embark on a transformative journey into the world of Next.js 14! In this comprehensive video course, we'll cover everything from the fundamentals to advanced features, empowering you to build dynamic, performant web applications. Whether you're a beginner or looking to level up your Next.js skills, this video is your key to becoming a Next.js pro
Core Javascript https://www.youtube.com/playlist?list=PLbGui_ZYuhiiaQjuOfvgx_-gzVBlCxrk0
Advance Javascript https://www.youtube.com/playlist?list=PLbGui_ZYuhihZ-pDxNZuQ7xOQ8IS2z3XI
Ajax https://www.youtube.com/playlist?list=PLbGui_ZYuhihUYNCkpedtfgpYXv9tHVsp
ReactJS https://youtu.be/jhryZ6ChLqY
NodeJS Express JS Mongo DB https://www.youtube.com/playlist?list=PLbGui_ZYuhijy1SpwtIS9IwL6OJdbr4kE
Core Python https://www.youtube.com/playlist?list=PLbGui_ZYuhigZkqrHbI_ZkPBrIr5Rsd5L
Advance Python https://www.youtube.com/playlist?list=PLbGui_ZYuhijd1hUF2VWiKt8FHNBa7kGb
Django https://www.youtube.com/playlist?list=PLbGui_ZYuhigchy8DTw4pX4duTTpvqlh6
Django REST Framework https://www.youtube.com/playlist?list=PLbGui_ZYuhijTKyrlu-0g5GcP9nUp_HlN
Django Testing https://www.youtube.com/playlist?list=PLbGui_ZYuhiixCQ8tFnq4RYAsdUVd933w
Django Celery https://www.youtube.com/playlist?list=PLbGui_ZYuhijN6wEQZ0DC-V5EdK4YMrYO
Django Channels https://www.youtube.com/playlist?list=PLbGui_ZYuhij6LpUbWgKUxggL_AuoHHVw
Core PHP https://www.youtube.com/playlist?list=PLbGui_ZYuhigFdLdbSI2EM2MrJB7I0j-B
Advance PHP https://www.youtube.com/playlist?list=PLbGui_ZYuhiiaWMoOK7LXB0GeLsYCiyz5
Laravel https://www.youtube.com/playlist?list=PLbGui_ZYuhijEqjCa63l0GkWh5EsG5iTR
Vue 3 https://www.youtube.com/playlist?list=PLbGui_ZYuhih5ItBhn2cTncaS24_Kgeui
Nuxt 3 https://www.youtube.com/playlist?list=PLbGui_ZYuhihr7r33VW4RykfezZcsnFjM
Git and Github https://www.youtube.com/playlist?list=PLbGui_ZYuhigWA1mNWzwErSBIZvgOJbNc
Supabase Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhii-VpaYcjaC2jZ7qI-7xLXR
Shadcn UI Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhijXbrypMtp2qrTLBVRwjABQ
Redis Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhijTJDBVBBqvri76uUNfsrCc
Docker Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhihMb5pqut64GhW-WhxKpygY
Kotlin https://www.youtube.com/playlist?list=PLbGui_ZYuhigEr9Yc4jJe0vHTU-gZTRTq
VPS Hosting Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhij0mM8xP2udM_EDvl8JNdtn
Shared Hosting with cPanel https://www.youtube.com/playlist?list=PLbGui_ZYuhih1aRFfUu6IBOWlKSkdBg0R
Shared Hosting with hPanel https://www.youtube.com/playlist?list=PLbGui_ZYuhigqwKz6LvBmYNV0tVW-CzIP
Official Website:- https://geekyshows.com
00:00:00 Introduction
00:00:25 Prerequisites
00:03:10 What is NextJS & Why use NextJS
00:06:25 Official Doc
00:07:35 Create NextJS Project with src
00:09:55 Run Project and Edit Default Template
00:11:02 Directory Structure
00:16:44 Create NextJS Project without src
00:17:23 Run Project and Edit Default Template
00:18:04 Directory Structure
00:23:03 Route
00:26:05 Nested Route
00:28:00 Route Group
00:29:54 Dynamic Route
00:32:43 URL Params
00:34:40 Catch All Route
00:38:11 Catch All Route Optional
00:39:11 Parallel Routes or Conditional Route Render
00:44:49 Layout
00:48:56 Link
00:52:48 useRouter() Hook
00:56:35 Server Component and Client Component
01:02:15 Using Global CSS and Tailwind CSS
01:04:00 Using CSS Module
01:06:00 Using Images
01:10:45 Data Fetching
01:16:17 Creating API or API Routes
01:20:04 API Test using Postman
01:20:53 request object
01:22:12 Request Header
01:23:10 URL Query Params
01:25:16 Request Cookies
01:26:40 POST Request
01:31:48 Set Response Status Code
01:32:35 Dynamic API Route
01:34:47 Params
01:37:22 Make Third Party API Request from Server
01:46:41 MongoDB Database Integration
01:50:22 Make Connection to MongoDB
01:51:00 Using ENV
01:51:36 Install mongoose
01:53:57 Create GET Request and Check DB Connection
01:55:45 Create Model and Schema
01:57:55 Retrieve Data from MongoDB
02:00:15 Show Retrieved Data in Web Page
02:02:30 Create Form to Insert Data
02:05:40 Post Request to Insert Data
02:07:36 Test Post Request using Postman
02:08:53 Post Data using Form
02:10:20 Server Action
02:18:00 Change Title - Metadata
02:19:34 Middleware
02:22:50 Loading UI
02:24:24 Error UI
02:24:45 Not Found UI
Source Code: https://github.com/geekyshow1/nextjs14comp
Embark on a transformative journey into the world of Next.js 14! In this comprehensive video course, we'll cover everything from the fundamentals to advanced features, empowering you to build dynamic, performant web applications. Whether you're a beginner or looking to level up your Next.js skills, this video is your key to becoming a Next.js pro
Core Javascript https://www.youtube.com/playlist?list=PLbGui_ZYuhiiaQjuOfvgx_-gzVBlCxrk0
Advance Javascript https://www.youtube.com/playlist?list=PLbGui_ZYuhihZ-pDxNZuQ7xOQ8IS2z3XI
Ajax https://www.youtube.com/playlist?list=PLbGui_ZYuhihUYNCkpedtfgpYXv9tHVsp
ReactJS https://youtu.be/jhryZ6ChLqY
NodeJS Express JS Mongo DB https://www.youtube.com/playlist?list=PLbGui_ZYuhijy1SpwtIS9IwL6OJdbr4kE
Core Python https://www.youtube.com/playlist?list=PLbGui_ZYuhigZkqrHbI_ZkPBrIr5Rsd5L
Advance Python https://www.youtube.com/playlist?list=PLbGui_ZYuhijd1hUF2VWiKt8FHNBa7kGb
Django https://www.youtube.com/playlist?list=PLbGui_ZYuhigchy8DTw4pX4duTTpvqlh6
Django REST Framework https://www.youtube.com/playlist?list=PLbGui_ZYuhijTKyrlu-0g5GcP9nUp_HlN
Django Testing https://www.youtube.com/playlist?list=PLbGui_ZYuhiixCQ8tFnq4RYAsdUVd933w
Django Celery https://www.youtube.com/playlist?list=PLbGui_ZYuhijN6wEQZ0DC-V5EdK4YMrYO
Django Channels https://www.youtube.com/playlist?list=PLbGui_ZYuhij6LpUbWgKUxggL_AuoHHVw
Core PHP https://www.youtube.com/playlist?list=PLbGui_ZYuhigFdLdbSI2EM2MrJB7I0j-B
Advance PHP https://www.youtube.com/playlist?list=PLbGui_ZYuhiiaWMoOK7LXB0GeLsYCiyz5
Laravel https://www.youtube.com/playlist?list=PLbGui_ZYuhijEqjCa63l0GkWh5EsG5iTR
Vue 3 https://www.youtube.com/playlist?list=PLbGui_ZYuhih5ItBhn2cTncaS24_Kgeui
Nuxt 3 https://www.youtube.com/playlist?list=PLbGui_ZYuhihr7r33VW4RykfezZcsnFjM
Git and Github https://www.youtube.com/playlist?list=PLbGui_ZYuhigWA1mNWzwErSBIZvgOJbNc
Supabase Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhii-VpaYcjaC2jZ7qI-7xLXR
Shadcn UI Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhijXbrypMtp2qrTLBVRwjABQ
Redis Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhijTJDBVBBqvri76uUNfsrCc
Docker Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhihMb5pqut64GhW-WhxKpygY
Kotlin https://www.youtube.com/playlist?list=PLbGui_ZYuhigEr9Yc4jJe0vHTU-gZTRTq
VPS Hosting Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhij0mM8xP2udM_EDvl8JNdtn
Shared Hosting with cPanel https://www.youtube.com/playlist?list=PLbGui_ZYuhih1aRFfUu6IBOWlKSkdBg0R
Shared Hosting with hPanel https://www.youtube.com/playlist?list=PLbGui_ZYuhigqwKz6LvBmYNV0tVW-CzIP
Official Website:- https://geekyshows.com
00:00:00 Introduction
00:00:25 Prerequisites
00:03:10 What is NextJS & Why use NextJS
00:06:25 Official Doc
00:07:35 Create NextJS Project with src
00:09:55 Run Project and Edit Default Template
00:11:02 Directory Structure
00:16:44 Create NextJS Project without src
00:17:23 Run Project and Edit Default Template
00:18:04 Directory Structure
00:23:03 Route
00:26:05 Nested Route
00:28:00 Route Group
00:29:54 Dynamic Route
00:32:43 URL Params
00:34:40 Catch All Route
00:38:11 Catch All Route Optional
00:39:11 Parallel Routes or Conditional Route Render
00:44:49 Layout
00:48:56 Link
00:52:48 useRouter() Hook
00:56:35 Server Component and Client Component
01:02:15 Using Global CSS and Tailwind CSS
01:04:00 Using CSS Module
01:06:00 Using Images
01:10:45 Data Fetching
01:16:17 Creating API or API Routes
01:20:04 API Test using Postman
01:20:53 request object
01:22:12 Request Header
01:23:10 URL Query Params
01:25:16 Request Cookies
01:26:40 POST Request
01:31:48 Set Response Status Code
01:32:35 Dynamic API Route
01:34:47 Params
01:37:22 Make Third Party API Request from Server
01:46:41 MongoDB Database Integration
01:50:22 Make Connection to MongoDB
01:51:00 Using ENV
01:51:36 Install mongoose
01:53:57 Create GET Request and Check DB Connection
01:55:45 Create Model and Schema
01:57:55 Retrieve Data from MongoDB
02:00:15 Show Retrieved Data in Web Page
02:02:30 Create Form to Insert Data
02:05:40 Post Request to Insert Data
02:07:36 Test Post Request using Postman
02:08:53 Post Data using Form
02:10:20 Server Action
02:18:00 Change Title - Metadata
02:19:34 Middleware
02:22:50 Loading UI
02:24:24 Error UI
02:24:45 Not Found UI
Source Code: https://github.com/geekyshow1/nextjs14comp
Tags and Topics
Browse our collection to discover more content in these categories.
Video Information
Views
102.6K
Likes
2.5K
Duration
02:26:49
Published
Dec 3, 2023
User Reviews
4.7
(20) Related Trending Topics
LIVE TRENDSRelated trending topics. Click any trend to explore more videos.
Trending Now