Chapter #1 : Why Next JS - Features and Advantages #html #nextjs #node #javascript #framework

Aug 15, 2023

Chapter #1 : Why Next JS - Features and Advantages #html #nextjs #node #javascript #framework

Next JS 13 Playlist : • Chapter #1 : Why Next JS - Features a…

React Js Code Splitting : • React Lazy Importing ( Dynamic import…

Why Next JS - Features and Advantages #html #nextjs #node #javascript #css #programming #framework

Next JS 13,
Next Js App Directory
Pages concept
Next JS features,
performance improvements,
development workflow,
hybrid mode,
image optimization,
server components,
webpack 5 integration,
TypeScript support,
CSS improvements,
API routes,
coding,,
programming,
web tutorials,
Node JS,
Interview Questions,
Freshers,
Digital,
Pre rendering,
Server side Rendering,
Client Side Rendering,
Automatic routing,
File based routing,
Code Splitting

Content

4.652 -> [music]

5.1 -> welcome friends welcome to my channel welcome to next js 13 video tutorial series.

12.54 -> In this series we will talk about 50 plus videos. You will see projects which will be Basic and Ecommerce based projects.

20.22 -> I will emphasis on in practical things except this first video

29.34 -> We will talk about Tailwind and Bootstrap CSS as a front end design. Tailwind is going to be a plus point for you

33.9 -> During projects you can get GitHub links for the source code. And very interesting thing is that we will be creating our own server in NEXT JS for Restful APIs

64.38 -> Ok Lets understand what is NEXT JS. But before that I will give you brief introduction about React Js.

74.82 -> React Js is a javascript library for building user interface. Ok what do you mean by library.

81 -> You must have used Jquery in your HTML projects. How do you include Jquery and where it runs.

89.1 -> IT runs on Browser/Client. Basically this browser based library. So Library is basically a collection of some codes/functions which you use as per requirement.

95.28 -> Same with Reat JS. React is an advanced library of Javascript where you follow some components based Architecture.

100.86 -> React Js is also client based Library which runs on Browser. But when we talk about Next JS then

107.28 -> we cannot call Next JS a library because library is a small term Next is actually a

112.62 -> framework for the web . So what you mean by framework .

118.74 -> We are talking about a very big term, that is, you can assume a very big umbrella, in which

124.32 -> we are including all the things. So if any company is making a framework, then it will try

129.6 -> to include every type of libraries in it. When you install or use framework like NEXTJS

135.06 -> then you get lot of things are already built on it. Framework may include

139.5 -> securities ,and many other libraries.

145.92 -> application or module,. So this is a great feature of Next JS, that

151.98 -> framework is installed on your particular server, and provide you all server side rendering. So Lets

159 -> try to understand Framework with a small diagram . FrameWork is a huge ecosystem in itself Inside which there

164.64 -> are many libraries, you should understand that inside this framework, there is also Jquery , there is also React,

170.22 -> Vanilla Java Script, Backbone,

175.98 -> there are different different types of libraries, and now with the help of the framework if you are designing an application, then you think that

184.26 -> there are already related libraries, you will get everything here. You do

189.66 -> not need to go to third party, this is the biggest advantage of using framework,. So what is next. NEXTJS is a

195.96 -> React framework for the web. framework can be considered as a collection of libraries just I

202.38 -> explained ( like jquery , backbone JS and etc ) to implement any particular application logic .

209.64 -> You may also consider NEXTJs as a top layer of React Application.

216.78 -> It is like a big box and inside that you just install other things like React

223.14 -> Framework is a big term and library is a small term . you may also consider next top player on react

230.16 -> JS with More Functionality Featuress that React does not provide. so no doubt NEXTJS

237.72 -> provides lot of advantages and features which we will not get to see in react JS

244.2 -> so there is no doubt in this also there are some shortcomings in REACT JS

249.42 -> Due to which NeXT GJS was introduced. if we talk about its official website then

255.54 -> look in that also it is clearly written that NEXTJS is React Framework work for the web this is the official website of NeXT JS .

262.44 -> Next GS enables you to create Full Stack web

269.16 -> applications by extending the latest React features

276.06 -> and integrating powerful Rust based JavaScript tooling for the fastest builds.

282.3 -> Can give permission to create a full stack by application, it means

289.86 -> you do not need to go anywhere, all the API will be created, you will get the library you need there,

296.28 -> you will not need to install any third party application. It so this is a small

302.04 -> introduction of Next JS I hope you have understood that if React JS is a library

309.06 -> then Next JS is a framework in itself,

314.64 -> so basically we will be doing everything in REACT

321.6 -> and if you know the react , then you are getting the biggest benefit that you

327.96 -> will be able to understand the next very quickly, you will do it in less rate, but the next JS is saying that

332.58 -> I will provide you the features that I have, ok then step by step I will explain to you what are the features of Next JS

337.62 -> because of which it is so popular. OK friends let's talk about features

343.5 -> and advantages of Next and I promise you that if you have gone throught all the points

349.38 -> correctly then surely you

355.62 -> will not have any problem in understanding next JS ok then let's talk about some features like first we have point automatically routing,

362.58 -> file based routing ,no configuration routing so what does it mean .

369.36 -> We dont have to define our routes like we do in React . It happens auto by folder and files structure.

374.64 -> then we have static and dynamic routing and starting three points are very important

381.06 -> and if you understand these points properly if surely comes to close to NEXTJS

387.24 -> but before that I would like to explain pre-rendering and

393.48 -> before going into routing, if we understand free rendering, then definitely your Mind set

399.48 -> will understand the core concept of NEXTJS . I make you understand it through a

404.64 -> diagram you . So I have opened a diagram on which we first understand simple client server architecture

410.94 -> i.e. now I I am talking about what will happen without Pre Rendering, then try to understand it and definitely

417.06 -> please try to understand it, if you understand this, then the concept of pre rendering will be automatically clear,

422.88 -> then basically what happens is the user makes a request of a particular form or That web page

429.36 -> goes to the server, the server returns its response, you have some static HTML, some links

437.58 -> data means any query from the database, and you have some data and some javascript instructions,

443.58 -> all these things are in the response. where do you have I got right to the client but there is a problem that

450.18 -> the data that came from your server to the client was not fully rendered, so what you mean by Render

455.7 -> Rander means that for example you have a form of HTML and data from the database You have

464.58 -> to fetch the records of any student, right, how to display those records in your web page,

471.6 -> you have to show them one by one by applying a loop and the final output of showing that will come, if the user wants to see it, then

477.24 -> question is Who will do All merging and rendering of data and html to final output

484.92 -> if we talk without prerendering then

491.1 -> what will happen without prerendering is that the server will only send static html, data and javascript instructions

496.02 -> but who will do the work of rendering it properly,

501.36 -> So basically Client will be doing rendering work and generate html

505.08 -> So When Server sends response back

511.2 -> then your client will be busy, that is, your client will be able to render this data with HTML somewhere

518.64 -> with the help of a proper java script, so long as it is busy,

524.64 -> due to this you may see blank page or loading in client side as

529.98 -> Client will be busing in rendering the whole data

536.22 -> script property look properly loaded give final a web page rendered and generated It happens

542.4 -> that your user is your client browser, you get to see it, so basically

548.88 -> what is a problem in this Architecture, that loading time and performance issue

555.36 -> client is doing it. So the client is taking time,

561.18 -> you can do this by post entering, that is, everything is rendered later, the burden has gone on the client, right

565.38 ->

571.8 ->

575.94 -> is it possible if the server does all this and the client does not have to do any thing, if the client gets an

582.54 -> HTML page, he only has to load it, then you think how

587.58 -> much the speed of the client side should be . Will go ok then I will go ahead and give this diagram to the example of pre rendering

594.12 -> again let's understand this user request browser went to server now here it is

601.2 -> again definitely it will have static html now here the data or data we explore further

610.74 -> that any API hit from javascript went to database The database data has been returned to you

618 -> script instruction was executed, but now the data is not directly returned to the client, that

624.66 -> is, the data that came on the server side, which was your HTML page, was rendered

631.98 -> internally, that is, This is the most important thing, if you understand this, then

638.16 -> you will be able to understand the next feature, then you see here that I have created the form, that is, the

644.22 -> data that came from the server side, it also rendered HTML here and Also shown

649.2 -> how the HTML page will be and when it becomes a piece of full HTML, we are talking about the server

656.52 -> is not sending this ready page, the render is happening on the client side here, what is happening here,

667.68 -> your complete HTML page rendered here and give your final render page Return of full

673.44 -> HTML and give HTML is already rendered so it loads very fastly in the client side without any delay

679.8 -> user can see HTML page directly on the browser

686.34 -> In short if I explain then Server renders everything in its side and

694.62 -> send full html page to client

699.42 -> this is the biggest feature of your Next JS,

707.58 -> how can we achieve pre rendering in next JS

710.88 -> this concept is not in react JS and this concept

714.6 -> will come from three point static side generation, increment static generation and server side rendering

728.04 -> By using three point we will use pre rendering in NEXTJs

733.74 -> Right now I am not showing these things in practical but in my next coming video I will show one by one

738.06 -> so you must have understood the meaning of pre rendering

743.94 -> Now I hope you can assume about pre rendering and

749.34 -> what will happen inside next JS . ok then next point we talk about

754.44 -> automatic routing file based routing and no configuration Again this is very important

761.4 -> interesting and very big feature what is the reason behind it I understand you what do you mean

767.64 -> by automatic routing and what is static dynamic you yourself tell me one by one if you have any

772.44 -> reaction If you make an application, then I have shown you a small project also, like this one of Done React,

779.4 -> I am not telling any practical, I am just for the purpose of understanding,

784.56 -> basically what happens when you hit a Route for example I also

790.68 -> bring it on a diagram right let's see it then how do you write http localhost 8080 this is the

799.5 -> name of the domain and give the company give the service give the company you give after the service Forward

806.46 ->

811.92 -> your server finds that company, what company route exists or not, then

816.9 -> what is there in React, you already have to tell the routes in your app or whatever is your starting file,

822.54 -> how with the help of browser out what do you say that whenever the references ie routes

831.18 -> are hit in add resume, its components are attached right you have to create your own routes,

837.66 -> now I am telling you simply that if you do not want to create this Route and whatever folder you create

845.52 -> inside your folder hierarchy and hit it mince you are creating inside your project company name this which if I

852.12 -> talk about these routes then I take a folder man to the company I take a folder man to the services I create a single file

857.22 -> for the service , that is, there is no need to define any routes, now as soon as you create your folder

862.08 -> , just like you create a file, you just have to write it in the URL, the mains like your folder and file structure will be the same

868.2 -> by default React JS. In order to understand how the concept of routing will become inside

874.86 -> Let's take a small project of Next GS, look through the project, I can explain

880.2 -> you the demo a little bit correctly, we are not going to go into practical, so for example, I have a project

886.5 -> , the right difference of Next JS is that here is a There is a folder named page, there is an app named public.

892.38 -> While there you must have seen a folder named SRC, so basically in the next, when we will talk about when

898.8 -> our practical will come, then you understand everything, this page is your folder, right, so basically

903.9 -> what we have to do is to make a page of it. If you want to create a page of services, then what you have to do is simply,

910.38 -> inside this page, you will now create a simple file about JS, so now when you hit it,

995.76 ->

999.84 ->

1001.58 -> as you create folder it will be defined ok so static routing means I am

1011.72 -> creating folder and I am creating files ok if I talk to you something like that you

1018.56 -> must have seen someone from commerce side I have this product and after that I write 45 so

1024.26 -> one product is fine There can be many, it has an ID, so

1029.3 -> in this called dynamic writing, you must have seen slugs, so how will you define it, then see

1034.82 -> what is the way to define it, what React is providing us here. But went inside the course

1043.7 -> OK and going inside the course we named the product, now look carefully in this product, I have

1049.76 -> written the square bracket here, so if I

1060.86 -> take a file from here to here also you will see in brackets, just inside it Like, I write a name, this is called dynamic, that is,

1065.48 -> now how can I replace this thing, I can replace it in any way,

1069.5 -> for example, in these services, bracket.js has been applied, right and here I

1075.2 -> can print something. and it is made inside the page so now what can happen if i go here and

1083.18 -> check it once inside the page now go here and write whatever i want 56 see here it went 96

1094.88 -> take it here Now I have put this bracket inside the courses,

1100.16 -> I have put this bracket on the file, so this is also possible

1109.52 -> for your course.

1116.42 -> See this

1117.08 -> basically what is this on my next video we will cover practical so I

1131.12 -> had given a small introduction that what do you mean by automatically routing you must have understood

1137.18 -> that after watching practical you don't have to create any routes. As we create, which will be the name of the folder,

1142.1 -> which will be the name of the file , we

1146.6 -> have to type it, it will run directly, then that's what it is called No Configuration routes

1153.26 ->

1157.64 -> I told you that by making a square bracket, you can use the example which I had explained, this

1162.56 -> called dynamic writing concept, I have told you right about all these things. We will talk later

1167.78 -> , which if you have understood these three points in starting, then you

1174.02 -> can feel that what kind of power is there in the next, S that means how big a framework it is going to be

1179.54 -> in the market, ok friend, this too I you practical From this you will understand this thing, let's take a small example,

1186.02 -> this one is my project, this one is mine, of Next JS, I show it by running its route,

1201.26 -> website which is running next react see what happens right click in it view page

1207.26 -> then you tell me one thing that you can tell me what is my content welcome in react can you

1213.68 -> find it anywhere If you look inside the body, only I am getting the ID route

1219.44 -> I am not able to see that welcome in is rejected because your thing is

1224.84 -> client based client base what will be your process So what happens in React application,

1230.24 -> your content is never seen in the source, then there is a problem here, Google will

1238.16 -> pick it up, my data is named from here, content is described, but when it gets the

1245.3 -> content inside the body If you do not get it, then your website cannot be SEO friendly. He will not be able to know

1251.78 -> what is the name of the product inside the page, what is the price of the product,

1256.4 -> what is its category, he will not be able to search it ok but in Next JS application

1262.34 -> What is it, I had just told that everything comes pre-rented in the server and full

1266.66 -> HTML is coming back to you, so what benefit did I get from this, look at what we talked about,

1273.26 -> full HTML is coming to you. So when that full HTML comes, now I will view source it

1278.6 -> and see what I have written, welcome in next, then what will I get, I will see

1287.9 -> the application, then inside it you will get the data or the entire content of the website. You will also

1295.94 -> get a and because of the case, what Google can do with it, it can search, it

1302.42 -> can rank your site, so this problem was created with React, because of which

1308.6 -> I called this framework Wasn't it right here that you have some or the other problems with React, there

1314.3 -> are some or the other shortcomings, on the other side, the next framework was brought, such a big framework, where these problems

1320.12 -> were removed, now it is SEO friendly, because all my content is coming to me. Ok nine I hope

1327.86 -> aapko friendly ka difference bhi bhi understood aa gaya aya built in option See what is meant

1334.22 -> by Build in optimiztion, here are some such tags, such features have been given, by which your complete optimization can be done,

1341.24 -> how I understand this too, you will try my best through the diagram, see my

1347.78 -> REACT if you like If you have heard code splitting inside then maybe you will understand that what do you mean by

1355.1 -> optimization look at one option now I told you that if all your stuff is

1362.96 -> done on server side then how much faster your page will load So definitely optimize like somewhere

1369.14 -> your performance is increasing, in the same way what happens, let's take a small example, see

1375.02 -> if you create any application in React and try to read this topic, then you will

1380.66 -> understand better. A will go, you h ave created a component, about us, you have created a component, services, services, contact,

1389.66 -> its motive, ok, so when you hit support,

1398.96 -> basically what reacts inside the browser, when your built etc. are created, all the components are there.

1404.78 -> are as many You are looking at the components will pack all these inside a bundle JS it means

1411.32 -> if you hit about then services will also be found inside a bundle file contacts will also be found

1418.04 -> pearls then what is the problem we have now What is the problem here that if the about

1423.8 -> component is loaded, then man, I did not need the contact and motif of the services, so

1429.98 -> show me only this na about aska, so it means inside bandal.gs, which is your size

1436.58 -> . Your optimization is definitely what I have to do is to increase the optimization and

1442.1 -> reduce the size then we rate it if I want to achieve it then with whose help I will code

1449.66 -> this beating right this topic is hot and there are some functions which helps I will do

1458.78 -> that when I hit the services on it, then the

1466.22 -> code related to the only services component from inside bundle JS, which will be the scripting, will come, in case your contact will

1473 -> not load, this is the called CODE Splitting. Think to yourself that the only thing I need

1502.22 -> with the help of the image tag inside the next, it automatically compresses it and compresses it so much that

1508.16 -> your loading It will be in performance because it will be fast, I will also show you practically,

1512.48 -> right, look at this, here the meaning of one line is automatically, it means only one thing, if you

1520.7 -> understand automatically, then it is also indicating somewhere, OK, then next. have automatic specific style inside it

1551.54 -> then you see I have a page and with this component page dot module.css

1559.04 -> file Also with this and if I have parts of this scripting here If I want

1566.48 -> to write a style sheet, then that too is possible, I can do that with the help of a code, so it means that you define the

1575.54 -> component specific style, that is, the code related to the component you are creating.

1581.36 -> Can you okay we will explore it more in practical it just means and its

1587.9 -> This thing has also been said in the website, if you show the website in it, what did he say, when

1600.56 -> you update your code, any update is detected in it, then you should understand that 7x faster

1608.6 -> your load. This happens in your website i.e. React also but in the same way it

1614.72 -> does not load as fast as it will do in your next one. Reload means the change detected by you and in

1621.32 -> the same way your server is restarted, it changes it.

1626.24 -> it ise 700 x faster becoz of turbo pack right turbo pack me bhi baat

1634.94 -> karenge And now you make your RESTful API on top of that server

1641.84 -> , you think that Next is such a power in which you can make your own server, you

1677.6 -> that when I run my application, I will click on it, I will click on the contact,

1685.46 -> it will load the contact page, that is, when I click,

1689.36 -> it will load but If I am saying this to you I am giving you a link

1701.06 -> contact this is the next feature and you know that simple your html javascript if this

1716.24 -> right inside your directory and will automatically load it beforehand, that is, it is not that

1722.48 -> when I click, it is loading, everything is already loaded and Think for yourself when you click on something that is already

1739.22 -> We will talk about different different ways of doing the scheme, I have

1743.96 -> already talked about automatic code splitting. no need you use third party live react router don now what does it mean like i told

1751.1 -> that what is next in itself is a framework inside framework i am getting all the libraries

1769.94 -> have to install a package for react router down there is nothing to do like that in right next everything you are not going to get and

1774.98 -> One other thing by default you have type script support with next when you run the project

1780.56 -> it asks about type script image tag means I told you that

1785.12 -> I get the facility of automatic click compression i.e.

1790.4 -> If I do it in Next , any image tag

1796.16 -> is automatically compressed, so that the performance of your website becomes faster. I

1804.92 -> must have gone, so it is clear that you The purpose of the text must have been

1811.76 -> understood .

1818.18 -> The next thing that will happen in a little

1824.72 -> bit is that when you install Next, there is an Experiment

1836 -> Streaming Turbo Pack New and many more features that have been introduced by them,

1851.66 -> so we will talk about all of them, that means I will tell you in the project. Let me just show

1856.28 -> you, look at this, when I installed this project, a directory was created automatically,

1861.32 -> in which I can see head dot js, layout.js, page.js here, ok,

1901.64 -> about which i will talk in next video i will talk there in folder structure kaise

1906.38 -> next ko install karna hai experiment basis jo app directory de rakhi hai sab kya matlab hai kya nahi ok

1911.72 -> next video we will talk about folders Structures have to be installed and also

1918.92 -> Buch kuch to please stay tuned in my video series and I promise you will learn a lot

1925.16 -> [MUSIC]

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