10
Introduction to Next.JS
Hello there, I hope you are doing well. So today we are going to talk about the Next.JS! Why Developers suddenly started to use Next.JS to make web apps and not Create React App?
Don't worry today we are going to tackle all your doubts about Next.JS!
For those who are thinking, "Ahh! Again new framework new Syntax!
Let me clear Next.JS use React Library under the hood!
Before we get started with Next.JS! Let's understand what kinda issues developers are facing while working with Create React App!
We all know that SEO (Search Engine Optimization) is one of the core feature of the website and If you are not aware the fact that the CRA apps is not suitable for SEO friendly website.
We all know that React is a JavaScript library which means that every single thing happens at Client Side. So unless user is going not going to open the website, there will be only the empty HTML page with div tag like this.
<div id="app">
</div>Google Search Engine Bots will dig into your website. They will get nothing but the empty index.html page! Although they are claiming they can run JS on while digging the page but this is not 100% true.
Imagine you are working with massive large scale application. hundreds of line of JavaScript code into a single file to will causes performance, to avoid this you need manually splitting your bundling into different files.
If some users are trying to open your website in low-end devices, there might be cases that the website will take time to load in that devices. Because Traditional react app loads everything at Client-Side and not server side.
Next.JS is a Production Ready framework. Which support Server Side Rendering (SSR) along with Hybrid Rendering.
Next.JS has inbuilt routing system which allows us to create page without integrating any library like react-router-dom.
You can also create nested routing! Which is tie breaker.
This is not enough, Next.JS bundle your project pages wise. So if you are having different pages. Next.JS automatically does code splitting for us.
You can read more about routing in Documentation.
For those people who aren't aware of this term, Server Side Rendering means you can run your JavaScript files at server side and delivered your HTML content directly to the browser like the Server side languages like PHP!
Now you probably going to wonder,will my React app work as same as it used to? Yeah This process call Hydration. This will make sure that your JavaScript files are loaded successfully in the browser along with the HTML contents. So you can make SEO friendly website easily.
So this was about SSR, but Next.js allows you to pick how we want to fetch data. If you have used Gastby before, You know that you can make Static Website with React.
Next.JS provide Hybrid Rendering!
We can fetch data in 3 ways in Next.JS.
Instead of going in the theory, I will show directly How to fetch data in Next.JS.
export const getServerSideProps = async context => {
const cakes = await myFavoriteCakesAPI();
return {
props: { cakes }
};
}You can export getServerSideProps method in each page. This method runs on Every request and users will always get fresh data. Below we are returning props cakes. This will pass props as a default Component of Page.
As I said earlier this method runs on every single request, **So this can be a little **anti performance method. But there is situation in which the data gets updated often like Score Board, Stock Market etc.
export const getStaticProps = async context => {
const journals = await myLastYearJournals();
return {
props: { journals }
};
}This method runs only at build time! But in development environment this method will run on every single request.
Since This method runs only build time in Production environment. Your web application can speedily deliver content to the users. You can also deliver the website over CDN and that's the cool thing about Next.JS! Everything will be fast!
Since the method runs at only build time, even though the data gets updated, users will have the old cached data.
export const getStaticProps = async context => {
const journals = await myLastYearJournals();
return {
props: { journals, revalidate: 60 }
};
}This method is my favourite method. this method is same as the above method getStaticProps. The only difference is that we are now pass new property revalidate. Which means you request will re-validate after the given amount of second, in this case it is 60.
This is one the suitable way to fetch data. This will make sure that you website will deliver fast and users will also get updated data.
If you have understand this data fetching methodology. You are now ready to make SEO friendly and fast website.
But I have bonus for you!
You can also optimize images in Next.JS! We all know that Image loading can take a while. Especially if you are loading high quality images. Which can take long time.
Next.Js provides Image components which allow us to lazy load images. Optimize images quality according to the Layout. So this way we can also optimize the performance of the website.
- Changes Quality of Images
- Placeholder blur image while loading the actual Image
- Prioritize Image Loading and many more.
import Script from 'next/script'
<Script
id="stripe-js"
src="https://js.stripe.com/v3/"
strategy="lazyOnload"
onLoad={() => {
this.setState({ stripe: window.Stripe('pk_test_12345') })
}}
/>In recent of Next.js 11. Now we can add on third party script easily with Script Component. Also It let you to decide when you want to load the website like Before Interactive after Interactive, and lazy loading.
So that was introduction of Next.js! Let me know in the comment which part of the blog you like most? and also are you planing to use next.js in your next project or not?
If you want to add up something. Feel free to comment!
Wanna get started with Next.js? Check out the Documentation
Thank you for reading!
Happy Coding! :)
10