Complete Next.js 13.4 Tutorial in Hindiš„FullStack Website using NextJS, React Server Comp. & MongoDB
Welcome, to complete Next.js tutorial in Hindi, where we will build a Full-Stack Website with Next.js 13 and MongoDB using React Server Components in Hindi. In this video, we'll be walking you through building a Next.js web application step-by-step. Starting from setting up the project and installing dependencies, to creating pages, routing, integrating APIs, and connecting to a MongoDB database. We'll also cover responsive design and styling, including using CSS modules and React icons. The video is about 2 hours long, so grab a cup of coffee and follow along as we build a fully functional web app from scratch!
š Complete Source Code: https://www.thapatechnical.com/2023/0...
š Free JetBrains Student licenses - https://jb.gg/JetBrainsStudentLicense
š For Professionals, 3 Months WebStorm License (choose WebStorm) - https://jb.gg/GetWebStorm
Coupon Code - YMBVT-URD82-N4QU8-DV69Z-AFD5Q ( Valid till July 31st )
šWant to Migrate to WebStorm: https://www.jetbrains.com/help/websto...
š Become Member, get access to perks, free Source code, & more..
Ā Ā Ā /Ā @thapatechnicalĀ Ā
š Check my Instagram to Connect with me: Ā Ā /Ā thapatechnicalĀ Ā
š©āš» Discord Server Link for Programmer to Hangout: Ā Ā /Ā discordĀ Ā
ā Website Link: https://www.thapatechnical.com
==========TIMELINE===========
0:00 Introduction & website review
6:30 WebStorm Installation
10:15 Jetbrains Toolbox App
11:50 Create Next App (Two ways)
20:20 Our very First Next APP & Run it
21:15 Complete Styles & CSS Modules
22:30 File Based Routing
25:45 Header Component (Layout in NextJS)
30:50 Image & Link components
34:48 Header and Nav component
39:20 Next Font Optimization
41:40 Hero Section
49:35 About Page with Component
54:30 Next Dynamic Route
57:18 Fetch API Data in Next.js
1:01:30 Api Data go through
1:05 Movie Card Component
1:12:00 Handling Image in Next.js
1:14:30 Dynamic Movie Route (Blog)
1:21:30 Loading file in Next.js
1:25:00 404 Error Page in Next.js
1:26:50 Shape Dividers to style
1:29:20 Contact Us page & React Icons
1:36:30 Contact Form & React Hooks
1:45:50 Server vs Client components
1:51:00 Create Database using MongoDB
1:54:00 Connection to database
1:58:00 Models & Schema (Mongoose)
2:02:00 Route to Handle POST Requests to Create New Posts
2:05:10 Connect Front-end to Database and Store Data in DB
2:16:00 Footer Components
2:17:00 Responsive Menu
2:21:00 Share code to Github
2:24:00 Free host with Vercel
************ š Must Watch Videos For Web Development š ************
ā”ļø Complete Reactjs in One video here Ā Ā Ā ā¢Ā ReactJSĀ ForĀ BeginnersĀ inĀ OneĀ VideoĀ in...Ā Ā
ā”ļø HTML in One Video: Ā Ā Ā ā¢Ā LearnĀ HTMLĀ inĀ OneĀ VideoĀ inĀ HindiĀ from...Ā Ā
ā”ļø CSS in One video: Ā Ā Ā ā¢Ā LearnĀ CompleteĀ CSSĀ InĀ OneĀ VideoĀ InĀ HindiĀ Ā
ā”ļø CSS FlexBox in 30 Minutes: Ā Ā Ā ā¢Ā CSSĀ FlexBoxĀ inĀ 30Ā MinutesĀ inĀ HindiĀ 2022Ā Ā
ā”ļø JavaScript in One video: Ā Ā Ā ā¢Ā JavaScriptĀ inĀ OneĀ VideoĀ inĀ HindiĀ Ā
ā”ļø ECMAScript 6 in One Video: Ā Ā Ā ā¢Ā ES5Ā &Ā ES6Ā |Ā ECMAScriptĀ 6Ā inĀ OneĀ Video...Ā Ā
ā”ļø HTML5 in one video: Ā Ā Ā ā¢Ā HTML5Ā TutorialĀ inĀ OneĀ VideoĀ inĀ HindiĀ ...Ā Ā
ā”ļø CSS3 in one video: Ā Ā Ā ā¢Ā LearnĀ CompleteĀ CSS3Ā InĀ OneĀ VideoĀ InĀ H...Ā Ā
ā”ļø Bootstrap4 in One video: Ā Ā Ā ā¢Ā BootstrapĀ 4Ā inĀ OneĀ VideoĀ inĀ HINDIĀ Ā 2019Ā Ā
ā”ļø Jquery in One video: Ā Ā Ā ā¢Ā jQueryĀ inĀ OneĀ VideoĀ inĀ HindiĀ 2019Ā Ā
ā”ļø JSON in one video: Ā Ā Ā ā¢Ā JSONĀ inĀ OneĀ VideoĀ inĀ HindiĀ 2018Ā Ā
ā”ļø ReactJS in one video: Ā Ā Ā ā¢Ā ReactJSĀ ForĀ BeginnersĀ inĀ OneĀ VideoĀ in...Ā Ā
ā”ļø PHP in One Video: Ā Ā Ā ā¢Ā PHPĀ TUTORIALĀ INĀ ONEĀ VIDEOĀ INĀ HINDIĀ 2019Ā Ā
ā”ļø NodeJS in one video: Ā Ā Ā /Ā ipnwakoibtĀ Ā
ā”ļø MySQL in one video: Ā Ā Ā ā¢Ā CompleteĀ SQLĀ &Ā MySQLĀ inĀ OneĀ VideoĀ inĀ ...Ā Ā
ā”ļø Advanced JavaScript in Hindi Playlist: Ā Ā Ā ā¢Ā AdvancedĀ JavaScriptĀ TutorialĀ inĀ Hindi...Ā Ā
ā”ļø ES5 & ES6 | ECMAScript 6 in One Video in Hindi: Ā Ā Ā ā¢Ā ES5Ā &Ā ES6Ā |Ā ECMAScriptĀ 6Ā inĀ OneĀ Video...Ā Ā
ā”ļø JavaScript Game Development Series in 2020: Ā Ā Ā ā¢Ā JavaScriptĀ GameĀ DevelopmentĀ HindiĀ 2020Ā Ā