Expert Roadmap for React Developers | Tanay Pratap Hindi

Aug 15, 2023

Expert Roadmap for React Developers | Tanay Pratap Hindi

In this video, we provide an expert roadmap for React developers, focusing on Next.js. Discover the power and significance of Next.js in modern web development, learn about its technical architecture, key features, and benefits. Explore real-world case studies, including adoption by major companies like Netflix and TikTok. Understand the controversies and challenges associated with Next.js, and gain insights into its future prospects.
#nextjstutorial #reactdevelopment #webdevelopment #tanaypratap

------------------------------------------------------------------------------------------------------
Like, Share, and Subscribe for more!

Follow me on my other social media handles for all updates, events, and live sessions-
Instagram: https://www.instagram.com/tanaypratap/
Facebook: https://www.facebook.com/tanayofficial
LinkedIn: https://www.linkedin.com/in/tanaypratap/
Twitter: https://twitter.com/tanaypratap

------------------------------------------------------------------------------------------------------------------

What’s my story? An engineer, in love with his job, started teaching on the side. Got lucky. Impacted 1000s of lives. Had to finally leave his job to increase the impact surface area. Raised $5M funding to fix education. Is learning day and day about startups and building a valuable product.

How is it going? A decade of engineering helps in systems thinking and product building. Learning about Strategy, Marketing, People Management, and Finance on the go.

What am I building? Today, 25 million Indians prepare for government job entrance exams. They do it for years together. The probability of success is less than 1% but they still do it. Why? For the lack of a structured alternative to launch their white-collar career. I am building Invact to bridge this gap.
How? Follow me to know, it’s a long story. I am telling it in parts every day.

Content

0 -> So what is that technology that is being used by Netflix, Adidas,

2.569 -> TikTok, everyone is using & if you are a React developer,

7.574 -> then it is very important for you to learn and master.

10.41 -> Today we’ll talk about Next.js. Next.js is the next step of React.

14.347 -> If you have become a React developer and have got a job,

17.317 -> then you should learn Next.js because

19.786 -> its adoption is very fast in today's time.

22.455 -> But it was not always like this!

23.69 -> Let's understand once what happened that

25.892 -> every React developer needs to learn Next.js in today's time.

29.462 -> I will explain it, let’s understand it slowly.

31.464 -> Long time ago, there was no React.

34.601 -> When there was no React then people would go to SPAs,

37.504 -> i.e., Single Page Application like you see an app, on Flipkart.

41.474 -> If you see an app on Flipkart,

42.976 -> then you will go there and add something to it.

46.479 -> It straight away gets added to the cart!

48.481 -> If you go to Gmail and you unread something then

51.584 -> the whole page does not load like this.

54.02 -> If a new email comes then it gets updated automatically.

57.457 -> So now, if you had to do anything in older apps, take an action

61.694 -> then the whole page would turn white and new things would come.

65.465 -> Then came Single Page Application!

67.467 -> There are a lot of frameworks before React,

70.403 -> which started making Single Page Application.

73.473 -> But when React came it solved a lot of problems.

76.643 -> We will talk about this again

78.445 -> that what problems did React solve & what happened before that.

81.481 -> But React brought a lot of problems along with it.

85.452 -> One big problem with React

88.188 -> was that it used to do everything on the client side.

91.458 -> Now you will ask, brother what is the client side?

93.46 -> The client side is very simple that

95.462 -> JavaScript is thrown from the server, here.

98.465 -> I have explained this in my MERN Stack video.

101.468 -> I will put it here, you can see it.

103.47 -> So what does server do?

105.338 -> Server puts everything in JavaScript. What is React? Javascript only

108.274 -> Puts it and throws it on the client.

110.477 -> It says take this and render it.

112.479 -> Now, JavaScript is rendered and HTML comes out of it.

116.483 -> CSS comes out of it and page is rendered.

119.452 -> It has both advantages and disadvantages.

121.454 -> The advantage is that you write everything in JavaScript.

123.456 -> You can minify everything and do a lot of things.

126.459 -> What is the disadvantage of this?

127.46 -> The disadvantage is that the page that is getting made,

129.262 -> the rendering of the page by browser is getting slow. Right?

132.465 -> It takes time.

133.466 -> So what is happening to the user?

134.467 -> It takes time.

135.468 -> You have to see it.

136.469 -> Okay, no problem.

137.47 -> But look, when React came, what did it came for?

141.474 -> Single page application. For SPA.

145.245 -> A means application.

146.479 -> What do you mean by application?

147.647 -> It means that there is Notion, Google Sheets, Gmail.

151.718 -> If the load time in these apps is more,

155.421 -> you might remember that Gmail used to load like this.

158.691 -> Maybe it is not in your generation, but in our generation.

161.06 -> So, with your mails are loading message, a big loader app came.

164.197 -> So there was no problem.

165.465 -> Because when you talk about an app,

167.634 -> we know that it takes time for the app to open, to load.

171.471 -> But people started liking React, and people said,

174.741 -> why should we limit the single page application to the application?

178.244 -> An e-commerce app like Flipkart,

181.181 -> that is also a single page application. That is also an app.

184.851 -> Why don't we improve its interface?

187.32 -> BookMyShow, why don't we improve its interface?

190.089 -> Take a banking app, why don't we improve its interface?

193.326 -> So we take the limit of the app, line of the app a little further,

199.232 -> and we treat the consumer things like an app.

203.836 -> Not only that, media companies, shopping companies, Netflix,

208.641 -> which is a streaming company, is also an app. Everything is an app.

212.212 -> Right? You use it like an app on your phone.

214.48 -> So what started happening is that

216.316 -> everything is now becoming an app. What happened?

219.452 -> The cycle of web development, the timeline,

222.455 -> React has come in this timeline around 2014-15.

226.192 -> And what is happening in the last 3-4-5 years,

228.461 -> everyone is applying React everywhere.

230.93 -> Why are they applying?

231.531 -> Because React has components.

233.8 -> And it is very easy to reuse the components,

236.369 -> and the developer experience of React is very good.

239.472 -> The developer has to do less work.

241.04 -> Write one thing at one place, put it in another place,

242.842 -> put it in a third place.

244.577 -> Another advantage of that is that

245.812 -> your app and your website all look the same, look good.

251.084 -> Interactions started coming in the website too.

252.785 -> Earlier, websites used to take a form first and submit the form.

255.688 -> Now, there are many interactions in the website too.

258.291 -> So now everyone wants to write everything in React.

260.293 -> But it has its own problem.

262.695 -> What problem came up?

263.796 -> Problem is that when we think about website, what do we think?

268.268 -> That it will have static data.

269.869 -> So a bot or crawler will go

271.838 -> and take everything out of it and tell Google.

275.008 -> We call this SEO.

276.943 -> Right? So, SEO is not being done. Why not?

280.48 -> Because the JavaScript app is in JavaScript.

283.483 -> Now the bot or crawler claims that it will understand,

286.986 -> but SEO ranking gets very bad,

289.255 -> if you write an app that only works on the client.

292.859 -> The second problem is a very big problem.

295.461 -> Time related problem.

296.729 -> Because if you have written everything in React,

298.798 -> then React will be downloaded on the client.

301.467 -> JavaScript engine will run.

303.469 -> After that HTML will come out.

305.471 -> After that page will be made.

306.739 -> So when you were on the app, then it was okay.

308.908 -> You were waiting, there was no problem.

310.743 -> But when you are on an e-commerce site, on a bookmyshow site,

315.114 -> on a news site, wherever you want to sell something.

317.884 -> You have to show the page quickly there.

319.952 -> Otherwise people will say it is taking a lot of time. Let’s go!

322.255 -> And this is true.

323.456 -> It’s true! Google's research is that a lot of people

327.493 -> eave the site, if it doesn't open in 3 seconds.

331.097 -> So what do you want? You want the site fast,

333.7 -> and if you want to sell, you want SEO friendly.

337.47 -> So to solve these two problems, Next.JS came,

340.306 -> and Next.JS also gradually earned respect, became famous.

343.443 -> Gradually it gained fame, and many people started using it.

347.814 -> What does Next.JS do?

348.715 -> Next.JS solves these two problems.

350.483 -> What was the first problem?

351.451 -> SEO.

352.452 -> How does it solve the SEO problem that

354.087 -> Next.JS has JavaScript already!

356.456 -> Now the JavaScript that can run on the client,

359.192 -> why can't it run on the server?

360.46 -> It can run on the server.

361.461 -> What does it want?

362.462 -> It wants a JavaScript engine.

364.464 -> That's what it wants.

365.465 -> Look, I have said a lot of terms in this,

368.368 -> that you may not have understood,

369.469 -> because I haven't made videos on them yet.

371.838 -> So if you want videos from such terms like,

374.34 -> SSR vs SSG or what are React Server Components,

378.211 -> so put these terms in the comments.

380.68 -> I’ll make good explainer videos on it that what are these things?

384.15 -> You will also understand, rest will also be benefitted.

386.452 -> I tell you, it's not that people didn't do this before Next.JS.

389.789 -> They used to do. I attended a tech conference in 2015 or 2016.

394.26 -> Flipkart engineers came in that,

395.728 -> and they were telling that they have set up a lot to do this.

398.898 -> Because Flipkart was written in React long time ago.

401.467 -> They wrote the whole app in React,

403.469 -> and when they wrote the app in React, they also had problems.

406.472 -> So what did they do? They used to run on the server.

408.741 -> And running on server, when the SEO used to come,

410.943 -> they used to say that I am SEO, hello.

413.613 -> So they used to say that you are SEO, you are a bot.

416.182 -> So let's do this. We will render the whole page for you in HTML,

419.652 -> so that you can easily walk on this page.

422.989 -> And not only this, they used to do one more thing that

425.057 -> they used to send HTML first.

426.459 -> After that they used to put JavaScript in it.

429.295 -> So people were doing such things.

430.863 -> It's not that Next.JS did something very amazing.

434.3 -> But Next.JS did a very good thing that they made this a framework.

438.638 -> They gave it a proper way,

441.04 -> that see, if you want to host a React app,

444.877 -> and if for you SEO and load time are both important.

449.482 -> See, it is not important for everything.

451.717 -> Like for Notion, when you are using it privately, it isn’t important,

455.188 -> but Notion is important for public pages.

457.123 -> For Gmail or when we were working on Outlook,

459.459 -> I was working on Outlook, I was working in Teams,

462.094 -> it is not important there,

463.696 -> because people load Outlook web apps.

465.932 -> Load time is important, but it is not like SEO is needed.

469.101 -> I don't want Google to read my email.

471.471 -> I don't want Google to read my Teams messages.

474.273 -> You’re understand it, right?

475.074 -> It is not necessary everywhere, that's why no one is using it.

477.71 -> But if your app is such in today’s time, that you need SEO,

482.482 -> in which you need less load time,

484.45 -> that means you are selling something from that app.

486.686 -> BookMyShow is an example.

488.454 -> Flipkart is an example.

489.922 -> Why? Because you need Google to tell you the price of the cloth.

493.459 -> You need Google to tell you film’s review,

495.261 -> price of the movie ticket, where it is getting showed.

498.464 -> Google should be able to mug up, read it and understand it.

501.467 -> So if you want this, then Next.js is very important for you.

504.837 -> And if you want user-friendliness, React is also important.

507.473 -> Then Next.js has become very important for you.

509.942 -> And one more thing that is good with Next.js. You know what?

512.478 -> It has made performance better.

514.78 -> It not only improved load time.

516.482 -> What it also did? It also did automatic code splitting.

519.452 -> What is this, you’ll ask.

520.453 -> It's not a big deal. See,

522.455 -> when you go to Flipkart's homepage,

525.024 -> you don't need to bring Flipkart's About Us page.

528.16 -> So don't bring that.

529.462 -> But in the earlier apps, very old apps, it used to happen that,

532.465 -> entire bundle was made together and thrown to the client.

535.668 -> It's not like Next.js is doing it alone.

538.771 -> You can do it separately, you can do it,

540.473 -> but you don't need to configure these things.

544.777 -> Because Next.js takes care of these things.

547.48 -> One more thing that I want to tell you that

549.482 -> when you work on a big app, code gets very big. It gets very big.

554.453 -> It gets 10,000, 50,000, lakh lines of code.

557.456 -> Like it was in Teams.

558.457 -> When you change something, then it takes a lot of time

561.494 -> to compile that React code, JavaScript code, again.

566.465 -> So you don't see that change immediately.

568.467 -> It takes a few seconds or even minutes.

570.469 -> There is a solution for this.

571.47 -> It's called hot module replacement. It happens immediately.

575.474 -> Next.js automatically gives you this.

577.777 -> So your developer experience which got better with React,

580.98 -> but few bad things that came with it,

583.482 -> Next.js also improves that developer experience.

585.918 -> So on all three fronts, not only SEO and load time,

589.055 -> but also on the front of developer experience and performance,

591.457 -> Next.js does a lot of good.

593.459 -> But Next.js is not free from its controversies.

596.996 -> There are a lot of controversies with Next.js,

599.465 -> and today it is also being blamed that

601.467 -> React's server components will run on Next.js,

604.47 -> and though Next.js is open source, but it favors Versal a lot.

608.874 -> So despite Next.js being open source,

611.477 -> it is giving a lot of money to a company.

614.48 -> There is nothing wrong with it. Nothing wrong with anything.

618.15 -> But there are a lot of controversies around these things,

620.786 -> that even though it is open source,

622.888 -> these people favor each other.

625.024 -> Companies earn money.

626.892 -> Big, good developers of Next.js are hired by company Versal.

631.797 -> So is the openness of open source,

634.467 -> right, is it decreasing?

636.469 -> There are a lot of questions rising like this on Next.js.

639.138 -> This also happened that first we had to learn JavaScript,

641.474 -> then you said to learn React.

643.476 -> Now entry level developers are asked Next.js sometimes.

647.48 -> We need information about that.

648.948 -> And the API of Next.js is not that easy.

651.784 -> You have to understand that how to write things,

654.453 -> how to write code,

655.454 -> if i’ve to intregrate libraries, how to integrate different libraries.

659.458 -> If I need some state management library,

661.46 -> if I need some CSS library, how would I integrate it?

664.163 -> It is not that simple.

665.464 -> Image optimization. There is SSR. There is SSG.

668.968 -> Which part should I choose?

669.969 -> Should I go to SSR or SSG?

672.204 -> So entry level developers need more design choices,

676.475 -> they need more knowledge.

678.477 -> So people say JavaScript is becoming very tough.

682.281 -> But what can we do?

683.482 -> See, if you know it, you will get paid.

685.451 -> I believe that if you listen to me,

687.553 -> you don't need to learn Next.js right now.

689.855 -> But yes, in your React.js learning roadmap,

692.658 -> as soon as you get a job,

694.927 -> then definitely start learning Next.js,

697.463 -> because its demand is increasing.

699.165 -> If you like stories of web development and you get to learn a lot,

703.469 -> then don't forget to subscribe,

705.004 -> because I am bringing a lot of such videos.

706.806 -> Do like the video, and comment whatever I said,

709.475 -> if you didn't understand the term, comment.

712.078 -> We will make another video on it!

Source: https://www.youtube.com/watch?v=dRNqLqnNEcU