When a solid framework holds its ground in the Javascript arena, some contributors start optimizing and building on top of the framework to make it better for the open-source community. Such was a framework that was built on top of ReactJS and has taken its place for web developers who wish to create web applications. Ranging from portfolio sites to e-commerce applications, Next.js has been preferred due to its less steep learning curve than its peers.
There are many more reasons for Next.js to stay despite its ease of development and everything is just getting better with it. Here are some of the reasons why the “React Framework for Production” as they term it will be used more and more by the developer community.
1. Pre-fetched routing 🌏
Routing has been bothering Javascript developers from the moment it was adapted for browser development. We usually go with installing one or more dependencies - be it react-router, Vue-router, or setting up Angular routing modules. Next.js has it all covered, all we need is to create files under the src/pages folder to add a route.
We can handle dynamic routes in the same way as well. Say, we have a blog or product which has a unique identifier id, if we require a URL dynamically for each blog - we may just have to create a file named [id].js . Well, now we may ask for nested routes - no worries, create nested folders and files to have nested routes. For example, a file inside folders such as pages/page/[id].js will have corresponding routes like pages/page/1, pages/page/2 etc..
2. Image and Font Optimization 🌈
The Next.JS component named next/image will serve the purpose of optimizing our images based on the viewport and enhancing visual stability as per the Core Web Vitals for browsers. Instead of the usual <img> tag, we may need to use the Image component when adding images to the DOM to achieve this. Adding a priority property as mentioned below to a certain image would make Next.JS ensure the image is LCP (Largest Contentful Paint) and boost performance.
<Image
src="/sample.png"
alt="A sample picture to boost LCP score"
priority
/>
Fonts are fetched in Next.JS during build-time and not during run time, this prevents the browser to go looking for the font source when the application is being loaded in the browser run time.
3. API Routes 🔩
We may have to keep in mind that Next.js is a full-stack framework. Yes, APIs can be written in NextJS. Again, you never have to set up all the middleware configurations like in an express backend, all we have to do is create a folder name /api inside the pages folder. Any file we create inside this folder with a handler function will be treated as an API with our traditional req and res parameters. Here’s an example of a similar handler function. Say we have a file called pages/api/dashboard.js with the following handler function
export default function handler(req, res){
res.status(200).json({
data: 'This is dashboard data'
})
}
All we have to do is call localhost:3000/api/dashboard and fetch the data. At times, we may not need an isolated backend service or we may just feel lazy to create a backend application for POS project - NextJS got you covered with the backend service as well.
4. Pre-rendering ⌛
Next.js supports two types of pre-rendering a page:
- Static Site Generation (SSG)
- Server-Side Rendering (SSR)
Static site generation is when we need to pre-fetch the data required for the page. Therefore, the HTML is built during build time, the data required for the page is pre-rendered and populated in the components as props. This enables us to perform better in terms of SEO and better performance of the application. We use two handler functions getStaticProps and getStaticPaths to fetch the required data for the page and to fetch all the paths available in the application correspondingly.
Server-side rendering as we know provides the HTML Template from the server to be loaded in DOM, but in terms of NextJS - there is a slight enhancement. Next.js provides a function called getServerSideProps which would be called each time a server-side request is made. This makes sure the data is pre-rendered and is up to date before the template is loaded. This differentiates from Static site generation as in getStaticProps will be called only once during the build time and not on every server-side request. The creators of Next.js recommend using SSG for better performance unless it is required to go with SSR.
5. Middlewares ⏩
Working with Node server-side applications would have made us explore middleware more than ever. We never know how many handler functions we may have written if the concept of middlewares were not introduced to the open-source community. The functions defined as middleware will be applied before we hit all the routes in the pages folder in chronological order.
We just have to define functions inside pages/_middleware.ts file. The creators of Next.js have developed middlewares to support various functionalities for authentication, server-side analytics, A/B testing to name a few.
6. Bonus - Comparison with Gatsby 👾 👾
Gatsby has been the go-to solution with the advent static site generation frameworks and JAM stack, but Next.js has caught up as a full-stack solution. There are situations when we need to prefer one over the other, but to consider Next.js - here are a few inferences made.
Learning Curve - Next.js has a smoother learning curve than Gatsby. With lesser pre-requisites, Gatsby would need a thorough understanding of technologies such as GraphQL and markdown to get started. All we need to kickstart with Next.js is foundational React knowledge.
Minimalism - We do not need to include a lot of external dependencies when getting to know about Next.js, whereas Gatsby is popular with the number of plugins and communities built around it.
Data fetching - Just understanding getStaticProps and getServerSideProps is all there is to know about data fetching in Next.js, whereas Gatsby has its perks in its way of fetching data using GraphQL but not to get started with when we have limited bandwidth on doing things.
Looking for a write-up on a different framework on a different day !! Until then.... ✌️ 💜
Top comments (0)