Next.js Complete Course for Beginners in Hindi

CodeWithHarry via YouTube

Start learning Write review

Details

Start learning

Provider

YouTube
Pricing

Free Video
Languages

Hindi
Duration & workload

1 day 2 hours 3 minutes
Sessions

On-Demand
Level

Beginner

Found in

Learn Next.js from scratch through this comprehensive Hindi-language course that covers everything from basic concepts to building complete web applications. Master the open-source React framework built on Node.js, exploring server-side rendering, static site generation, and modern web development practices through hands-on projects. Start with fundamental concepts including file-based routing, components, and styling, then progress to advanced topics like API routes, database integration with MongoDB, authentication with JWT, and deployment strategies. Build two complete projects: Hunting Coder, a blog application demonstrating core Next.js features, and Codeswear.com, a full-featured e-commerce store with payment gateway integration, user authentication, and admin dashboard. Explore essential Next.js components including Head, Script, Image, and Link, while learning different CSS approaches from component-level styling to Tailwind CSS. Understand prerendering strategies through getServerSideProps(), getStaticProps(), and getStaticPaths() for optimal performance. Implement modern web features like infinite scroll, responsive design, pincode serviceability checks, and real-time notifications using React Toastify. Integrate third-party services including payment gateways, deploy applications to cloud platforms like DigitalOcean, and set up custom domains with search console optimization. Access all source code for free and follow along with practical examples that demonstrate real-world application development from concept to production deployment.

Syllabus

Introduction to Next.js | NextJs Tutorial for Beginners #1
Our first Next.js website | NextJs Tutorial for Beginners #2
File Based Routing in Next.js | NextJs Tutorial for Beginners #3
JavaScript and React Refresher for Next.js | NextJs Tutorial for Beginners #4
Project 1: Hunting Coder - A Coder's Blog | NextJs Tutorial for Beginners #5
Head and Script Component in Next.js | NextJs Tutorial for Beginners #6
Image Component in Next.js | NextJs Tutorial for Beginners #7
Creating Multiple Pages in Next.js | NextJs Tutorial for Beginners #8
Link component in Next.js - Understanding next/link | NextJs Tutorial for Beginners #9
Component Level CSS in Next.js | NextJs Tutorial for Beginners #10
Adding Global Styles in Next.js | NextJs Tutorial for Beginners #11
Styled jsx in Next.js | NextJs Tutorial for Beginners #12
Basic Cleanup of Hunting Coder Blog | NextJs Tutorial for Beginners #13
Displaying Navbar on all pages | NextJs Tutorial for Beginners #14
Creating Blog and Blogpost page | NextJs Tutorial for Beginners #15
Adding blog jsons as data | NextJs Tutorial for Beginners #16
Introduction to API Routes in Next.js | NextJs Tutorial for Beginners #17
Creating endpoints to get one/all blogposts | NextJs Tutorial for Beginners #18
Using the API Endpoints | NextJs Tutorial for Beginners #19
Fetching BlogPost using /getblog Endpoint | NextJs Tutorial for Beginners #20
Prerendering Strategies in Next.js | NextJs Tutorial for Beginners #21
Server Side Rendering - getServerSideProps() in Next.js | NextJs Tutorial for Beginners #22
Static site generation, getStaticProps() & getStaticPaths | NextJs Tutorial for Beginners #23
Rendering HTML text using dangerouslySetInnerHTML in Next.js | NextJs Tutorial for Beginners #24
Creating an API to save Contact Data | NextJs Tutorial for Beginners #25
Designing the /contact FrontEnd Page | NextJs Tutorial for Beginners #26
Designing the About Page | NextJs Tutorial for Beginners #27
Styling Fixes in our Hunting coder Blog | NextJs Tutorial for Beginners #28
Adding Infinite Scroll to Hunting Coder | NextJs Tutorial for Beginners #29
Adding Responsive Design to Hunting Coder | NextJs Tutorial for Beginners #30
Deploying Hunting Coder | NextJs Tutorial for Beginners #31
Adding huntingcoder.com Domain and Search Console | NextJs Tutorial for Beginners #32
Project 2: Codeswear.com - A Next.js powered E-Commerce Store | NextJs Tutorial for Beginners #33
Codeswear.com - Project Setup using Tailwind CSS | NextJs Tutorial for Beginners #34
Creating Pages for Codeswear.com | NextJs Tutorial for Beginners #35
Creating NavBar, Footer & HomePage for Codeswear.com | NextJs Tutorial for Beginners #36
Designing the Tshirts Page for Codeswear.com | NextJs Tutorial for Beginners #37
Designing Mugs, Sticker & Hoodies page for Codeswear.com | NextJs Tutorial for Beginners #38
Designing the Cart Sidebar for Codeswear.com | NextJs Tutorial for Beginners #39
Designing Product Page for Codeswear.com | NextJs Tutorial for Beginners #40
Adding Pincode Serviceability Check on Codeswear.com | NextJs Tutorial for Beginners #41
Creating Cart State for Codeswear.com | NextJs Tutorial for Beginners #42
Improving Sidebar & Checkout Page for Codeswear.com | NextJs Tutorial for Beginners #43
Creating Orders Page for Codeswear.com | NextJs Tutorial for Beginners #44
Creating Login & Signup Page Design for Codeswear.com | NextJs Tutorial for Beginners #45
Adding MongoDB Database to Codeswear.com | NextJs Tutorial for Beginners #46
Creating APIs for Codeswear.com | NextJs Tutorial for Beginners #47
Displaying Tshirts on Codeswear.com | NextJs Tutorial for Beginners #48
Displaying Tshirt Variants on product page | NextJs Tutorial for Beginners #49
Replacing Dummy Text on Codeswear.com | NextJs Tutorial for Beginners #50
Making the "Buy Now" button for Codeswear.com | NextJs Tutorial for Beginners #51
Adding React Toastify to Codeswear.com | NextJs Tutorial for Beginners #52
Customizing Hoodies, Mugs & Stickers Page for Codeswear.com | NextJs Tutorial for Beginners #53
Creating Signup Page for Codeswear.com | NextJs Tutorial for Beginners #54
Creating Login Page for Codeswear.com | NextJs Tutorial for Beginners #55
Adding Encryption to login and signup for Codeswear.com | NextJs Tutorial for Beginners #56
Introduction to JWT | NextJs Tutorial for Beginners #57
Adding Login and Logout buttons to Codeswear.com | NextJs Tutorial for Beginners #58
Adding React top loading bar to Codeswear.com | NextJs Tutorial for Beginners #59
Creating Orders Page for Codeswear.com | NextJs Tutorial for Beginners #60
Adding Environment Variables to Codeswear.com | NextJs Tutorial for Beginners #61
Adding Payment Gateway to Codeswear.com | NextJs Tutorial for Beginners #62
Initiating Order and Redirecting to Order Page | NextJs Tutorial for Beginners #63
Creating Order and Orders Page for the user | NextJs Tutorial for Beginners #64
Pincode to city & state | NextJs Tutorial for Beginners #65
Out of stock check in CodesWear.com | NextJs Tutorial for Beginners #66
Fixing Checkout Issues | NextJs Tutorial for Beginners #67
Showing Sidebar only for few pages | NextJs Tutorial for Beginners #68
PayTM checksum Tampering check | NextJs Tutorial for Beginners #69
Displaying out of stock items | NextJs Tutorial for Beginners #70
PinCodes json + avoiding non serviceable Locations | NextJs Tutorial for Beginners #71
Creating MyAccount Section for CodesWear | NextJs Tutorial for Beginners #72
Creating Forgot Password Page | NextJs Tutorial for Beginners #73
Deploying Codeswear.com to DigitalOcean | NextJs Tutorial for Beginners #74
Creating Dashboard for Codeswear.com | NextJs Tutorial for Beginners #75
Creating Pages for the Dashboard | NextJs Tutorial for Beginners #76
Populating pages with pages from the template| NextJs Tutorial for Beginners #77
Creating a Form for Adding Product | NextJs Tutorial for Beginners #78
Displaying All products in a Material UI Table | NextJs Tutorial for Beginners #79