If you are aspiring front-end developer then you might have heard about ReactJs and Next.js as well. What is Next js ? Let's go and dig deep!

NextJs is a quite amazing React framework which is built and maintain by a company named Vercel. It is mainly used for making SEO friendly friendly websites. The great thing about nextjs is it is used by companies like Netflix, Github, Uber, Starbucks and many. I know now you have got question. When React is already quite popular then why do all these companies uses NextJS ? Lets find out. A typical React app is rendered on client site, which means HTML CSS and JavaScript is downloaded by the browser and after that JavaScript takes over and renders the whole page. Because of which browser gets one bundle after that all the other things like painting the content, downloading an asset and along with posting a blog or most popular images all these tasks done by JavaScript itself.

However this approach sounds cool, ain't it ? But, this approach has some downsides. One of the biggest downside is this is not SEO friendly approach because bots like Google, cannot index these types of websites. Along with that if we talk about social media bots like Facebook, Google, Twitter you must have seen when you share the link of any social media post on WhatsApp or other application then a preview image is generated. And also a preview text is generated which means, ahead of time, without visiting the page these all social media bots read the content of your page. Now in React all the content is populated through JavaScript. So JavaScript cannot be executed because of which social media bots cannot generate these types of previews. So by using React applications in this way, the search rankings drop badly. The reason for that is it takes a lot of time for the first contextual paint to appear. According to core web vitals, this is not a good thing at all. It does not give a good user experience.

NextJS solves this huge problem by introducing page building strategies. NextJS works on simple principles. Whatever data your browser will recieve it will already have content means the main content will not be fetched by JavaScript. For a blog, the main content is the preview image and the post content. So this content will either come already generated from the server or it is already build and converted to catch through a CDN. Also NextJS has a lot of built in features like file-based routing. In file based routing you can simply make files in your source code and after making these files, your URL structures will come according to these files. For example if we make a component named index.js in my pages folder and another component named blog.js and another contact.js then whenever we visit /blog / contact or visit the homepage of the website then we can see all these React components by default. We do not have to use any other external router. Typically this task in React is done by router packages named DOM which is more or less than development effort. along with this, for image optimization and to structure all the other contents there are many built-in utilities in NextJS.

Now lets talk about the most important features of NextJs. PAGE BUILDING STRATEGIES. In page building strategies, the first strategy is Static site generation. In this strategy, NextJS converts your whole site into a static site, before hand for example you have written a blog which consists of one thousands posts then your dynamic blog of one thousands of posts will be converted into a static website. So that your delivery will be fast and social media bots and search engine bots are able to read your site properly. For doing this, all pages can implement a method named getStaticProps() which will return some props, which will be passed to that page again. By doing this, whenever you will export the next time and try to build your whole website then your whole NextJS website, which some way or the other uses React components only it will be converted into a static site which you can convert into cache through a CDN. Which means your content delivery will be very fast. Difference between aCDN and VPS is that CDN is optimized for content delivery which simply means, your user will get very fast page speeds. But this strategy is only good for those sites in which data is not changed so often. If your data changes very quickly then you can use another page building strategy named "server side rendering" .

In server side rendering, every page can implement a method named getserverside props and after implementing this, the resulting props for example, in your getServerSideProp() you can request a fetch and you can get that data from fetchAPI. Or you can pass the same component as props, By doing this, whenever an user will visit your page they will get the static page after all their work is done on the server. So the user will think your site is giving all the static HTML. But in reality, your site is doing some work on the server to fetch your content from the database. So the users and the social media bots and the search engines bots will get the thing which they wants. which makes them happy and which makes your ranking very good and along with that, your user will also get satisfaction. Because your core web vitals will be amazing. Your first contextual paint time will be short and because your content is changing very fast you can see all those changes implementing on the fly. If we talk about static site generation then until you build your own site again, you won't be able to see the updated content. But by using this strategy, you will always see the updated content.

I(f you want your content to keep refreshing also and along with that you also want to build a static site then you can use a page building strategy in between these two in which you can pass a key named revalidate in getstaticprops. By doing this, whenever your server will recieve a request then your websites will rebuild again after a certain period of time.

I hope we covered everything about NextJs. Tech is infinite learning journey, as a developer we should keep learning forever. THANKS for readings.