YouTube Tools
Support

CodeWithHarry Next.js Tutorials: study plan and how long it takes

The CodeWithHarry playlist is 79 videos and 26.0 hours long. Here's how long it takes at different paces, a week-by-week schedule built from the real videos, and a planner that turns it into your own daily plan.

79 videos · 26.0 hours · CodeWithHarry

CodeWithHarry's Next.js course in Hindi covers routing and the Link component, API routes, and then builds Codeswear, a full e-commerce site with product variants, a cart, pincode serviceability checks, JWT authentication, password resets and an admin panel.

It's project-heavy: most of the playlist is the Codeswear build.

Who it's for: React developers who want to learn Next.js in Hindi by building a complete e-commerce project.

How long does it take?

The full playlist is 26.0 hours across 79 videos. Here's roughly how many days that is at different daily watch times and speeds, counting video time only:

Days to finish the playlist by daily watch time and playback speed
Daily timeAt 1xAt 1.5xAt 2x
30 min a day53 days35 days27 days
1 h a day27 days18 days14 days
2 h a day14 days9 days7 days

Make your own schedule

The playlist link is already filled in. Press Plan, set how much time you have each day and your speed, and you'll get a day-by-day schedule with a finish date and a calendar file. It reads the live playlist, so new videos are included.

Open on YouTube Track watched videos

Week-by-week schedule

A sample plan at 1 hour a day and normal speed, using whole videos so none is split across days. That's 5 weeks in total. For a different pace, start date or speed, use the planner above.

Week 1Videos 1–27 · 6h 3m

  1. Day 1 · 56m

    • 1Introduction to Next.js | NextJs Tutorial for Beginners #19m
    • 2Our first Next.js website | NextJs Tutorial for Beginners #221m
    • 3File Based Routing in Next.js | NextJs Tutorial for Beginners #316m
    • 4JavaScript and React Refresher for Next.js | NextJs Tutorial for Beginners #410m

  2. Day 2 · 1h

    • 5Project 1: Hunting Coder - A Coder's Blog | NextJs Tutorial for Beginners #510m
    • 6Head and Script Component in Next.js | NextJs Tutorial for Beginners #612m
    • 7Image Component in Next.js | NextJs Tutorial for Beginners #717m
    • 8Creating Multiple Pages in Next.js | NextJs Tutorial for Beginners #812m
    • 9Link component in Next.js - Understanding next/link | NextJs Tutorial for Beginners #98m

  3. Day 3 · 52m

    • 10Component Level CSS in Next.js | NextJs Tutorial for Beginners #1011m
    • 11Adding Global Styles in Next.js | NextJs Tutorial for Beginners #119m
    • 12Styled jsx in Next.js | NextJs Tutorial for Beginners #1210m
    • 13Basic Cleanup of Hunting Coder Blog | NextJs Tutorial for Beginners #1315m
    • 14Displaying Navbar on all pages | NextJs Tutorial for Beginners #148m

  4. Day 4 · 49m

    • 15Creating Blog and Blogpost page | NextJs Tutorial for Beginners #1513m
    • 16Adding blog jsons as data | NextJs Tutorial for Beginners #1612m
    • 17Introduction to API Routes in Next.js | NextJs Tutorial for Beginners #1710m
    • 18Creating endpoints to get one/all blogposts | NextJs Tutorial for Beginners #1815m

  5. Day 5 · 52m

    • 19Using the API Endpoints | NextJs Tutorial for Beginners #1923m
    • 20Fetching BlogPost using /getblog Endpoint | NextJs Tutorial for Beginners #2014m
    • 21Prerendering Strategies in Next.js | NextJs Tutorial for Beginners #2115m

  6. Day 6 · 48m

    • 22Server Side Rendering - getServerSideProps() in Next.js | NextJs Tutorial for Beginners #2213m
    • 23Static site generation, getStaticProps() & getStaticPaths | NextJs Tutorial for Beginners #2325m
    • 24Rendering HTML text using dangerouslySetInnerHTML in Next.js | NextJs Tutorial for Beginners #2410m

  7. Day 7 · 47m

    • 25Creating an API to save Contact Data | NextJs Tutorial for Beginners #2517m
    • 26Designing the /contact FrontEnd Page | NextJs Tutorial for Beginners #2623m
    • 27Designing the About Page | NextJs Tutorial for Beginners #277m
Week 2Videos 28–44 · 5h 32m

  1. Day 8 · 48m

    • 28Styling Fixes in our Hunting coder Blog | NextJs Tutorial for Beginners #2826m
    • 29Adding Infinite Scroll to Hunting Coder | NextJs Tutorial for Beginners #2922m

  2. Day 9 · 59m

    • 30Adding Responsive Design to Hunting Coder | NextJs Tutorial for Beginners #3015m
    • 31Deploying Hunting Coder | NextJs Tutorial for Beginners #3121m
    • 32Adding huntingcoder.com Domain and Search Console | NextJs Tutorial for Beginners #327m
    • 33Project 2: Codeswear.com - A Next.js powered E-Commerce Store | NextJs Tutorial for Beginners #337m
    • 34Codeswear.com - Project Setup using Tailwind CSS | NextJs Tutorial for Beginners #349m

  3. Day 10 · 57m

    • 35Creating Pages for Codeswear.com | NextJs Tutorial for Beginners #358m
    • 36Creating NavBar, Footer & HomePage for Codeswear.com | NextJs Tutorial for Beginners #3627m
    • 37Designing the Tshirts Page for Codeswear.com | NextJs Tutorial for Beginners #3722m

  4. Day 11 · 53m

    • 38Designing Mugs, Sticker & Hoodies page for Codeswear.com | NextJs Tutorial for Beginners #389m
    • 39Designing the Cart Sidebar for Codeswear.com | NextJs Tutorial for Beginners #3932m
    • 40Designing Product Page for Codeswear.com | NextJs Tutorial for Beginners #4011m

  5. Day 12 · 24m

    • 41Adding Pincode Serviceability Check on Codeswear.com | NextJs Tutorial for Beginners #4124m

  6. Day 13 · 42m

    • 42Creating Cart State for Codeswear.com | NextJs Tutorial for Beginners #4242m

  7. Day 14 · 51m

    • 43Improving Sidebar & Checkout Page for Codeswear.com | NextJs Tutorial for Beginners #4337m
    • 44Creating Orders Page for Codeswear.com | NextJs Tutorial for Beginners #4413m
Week 3Videos 45–61 · 5h 20m

  1. Day 15 · 55m

    • 45Creating Login & Signup Page Design for Codeswear.com | NextJs Tutorial for Beginners #4515m
    • 46Adding MongoDB Database to Codeswear.com | NextJs Tutorial for Beginners #4614m
    • 47Creating APIs for Codeswear.com | NextJs Tutorial for Beginners #4726m

  2. Day 16 · 17m

    • 48Displaying Tshirts on Codeswear.com | NextJs Tutorial for Beginners #4817m

  3. Day 17 · 53m

    • 49Displaying Tshirt Variants on product page | NextJs Tutorial for Beginners #4953m

  4. Day 18 · 54m

    • 50Replacing Dummy Text on Codeswear.com | NextJs Tutorial for Beginners #5016m
    • 51Making the "Buy Now" button for Codeswear.com | NextJs Tutorial for Beginners #5113m
    • 52Adding React Toastify to Codeswear.com | NextJs Tutorial for Beginners #5212m
    • 53Customizing Hoodies, Mugs & Stickers Page for Codeswear.com | NextJs Tutorial for Beginners #5314m

  5. Day 19 · 56m

    • 54Creating Signup Page for Codeswear.com | NextJs Tutorial for Beginners #5422m
    • 55Creating Login Page for Codeswear.com | NextJs Tutorial for Beginners #5519m
    • 56Adding Encryption to login and signup for Codeswear.com | NextJs Tutorial for Beginners #5615m

  6. Day 20 · 54m

    • 57Introduction to JWT | NextJs Tutorial for Beginners #5711m
    • 58Adding Login and Logout buttons to Codeswear.com | NextJs Tutorial for Beginners #5830m
    • 59Adding React top loading bar to Codeswear.com | NextJs Tutorial for Beginners #5913m

  7. Day 21 · 31m

    • 60Creating Orders Page for Codeswear.com | NextJs Tutorial for Beginners #6018m
    • 61Adding Environment Variables to Codeswear.com | NextJs Tutorial for Beginners #6114m
Week 4Videos 62–70 · 4h 58m

  1. Day 22 · 40m

    • 62Adding Payment Gateway to Codeswear.com | NextJs Tutorial for Beginners #6240m

  2. Day 23 · 54m

    • 63Initiating Order and Redirecting to Order Page | NextJs Tutorial for Beginners #6354m

  3. Day 24 · 38m

    • 64Creating Order and Orders Page for the user | NextJs Tutorial for Beginners #6438m

  4. Day 25 · 32m

    • 65Pincode to city & state | NextJs Tutorial for Beginners #6532m

  5. Day 26 · 44m

    • 66Out of stock check in CodesWear.com | NextJs Tutorial for Beginners #6644m

  6. Day 27 · 48m

    • 67Fixing Checkout Issues | NextJs Tutorial for Beginners #6720m
    • 68Showing Sidebar only for few pages | NextJs Tutorial for Beginners #6828m

  7. Day 28 · 42m

    • 69PayTM checksum Tampering check | NextJs Tutorial for Beginners #6929m
    • 70Displaying out of stock items | NextJs Tutorial for Beginners #7014m
Week 5Videos 71–79 · 4h 10m

  1. Day 29 · 29m

    • 71PinCodes json + avoiding non serviceable Locations | NextJs Tutorial for Beginners #7129m

  2. Day 30 · 1h 7m

    • 72Creating MyAccount Section for CodesWear | NextJs Tutorial for Beginners #721h 7m

  3. Day 31 · 46m

    • 73Creating Forgot Password Page | NextJs Tutorial for Beginners #7346m

  4. Day 32 · 58m

    • 74Deploying Codeswear.com to DigitalOcean | NextJs Tutorial for Beginners #7418m
    • 75Creating Dashboard for Codeswear.com | NextJs Tutorial for Beginners #7522m
    • 76Creating Pages for the Dashboard | NextJs Tutorial for Beginners #7619m

  5. Day 33 · 51m

    • 77Populating pages with pages from the template| NextJs Tutorial for Beginners #7719m
    • 78Creating a Form for Adding Product | NextJs Tutorial for Beginners #7816m
    • 79Displaying All products in a Material UI Table | NextJs Tutorial for Beginners #7916m

Tips for finishing

  • Parts of this series use the older Pages Router. Check the current Next.js docs for the App Router equivalent as you go.
  • Use the e-commerce project as a template for a portfolio project of your own.

Frequently asked questions

How long does it take to finish CodeWithHarry Next.js Tutorials?

The playlist has 79 videos and 26.0 hours of content. At 1 hour a day that's about 27 days at normal speed, or 18 days at 1.5x. At 2 hours a day it's about 14 days.

More study plans

See all 166 study plans

Tools for any playlist