Its been some time being worked on custom ReactJS apps so it was the good time to check out some framework built in and for ReactJS. The very first name which I had been hearing for some time was the Next.js. Hence I decided to check it today and to explore it.
The very first impression I have got from it, it seems like a very useful React.js framework with almost zero configuration.
Following are the major first 4 Pros of Next.js framework framework which I have discovered so far, and for which I think I am going to use it in my next React.js project.
Here are these 4 pros of Next.js framework
1. Creating routes by adding a folder and/or file in pages folder
In order to create a new root you just need to create a combination of a folder and/or file. For example just, create a pages/posts/first-post.js file. Now this is accessible at http://localhost:3000/posts/first-post as it generates a posts/first-post automatically. It’s that simple!
2. Linking pages
In general html when linking between pages on websites, you use the <a> HTML tag.
In Next.js, you use the Link Component from next/link to wrap the <a> tag. <Link> allows you to do client-side navigation to a different page in the application.
For example:
<Link href=”/posts/first-post”>
<a>this page!</a>
</Link>
You need to import Link component at the top of page. I.e.
import Link from ‘next/link’
3. <Link>ing is faster than <a href=”..”> thing
As per Next.js docs creating navigation using <Link>component is faster than the browser based navigation rendered via <a href””> tag rendering. In order you test verify it you could set background color of body tag in one page and it would persist over to another page while you navigate!
4. Prefetching of pages in background
In a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant!
Hence these are quick 4 pros of Next.js. I will post more on this page when I go through it more.
