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!

Master Next.js 14: From Basic to Advanced πŸš€
Geeky Shows
102.6K views β€’ Dec 3, 2023
Master Next.js 14: From Basic to Advanced πŸš€

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

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)
Rate:

Related Trending Topics

LIVE TRENDS

Related trending topics. Click any trend to explore more videos.