Next.Js : I think I am in Love ❤️

Hi… This post is exactly what it sounds like, another developer going on about how much he appreciates and likes Next.js. So, if you have heard / read/ seen it a 100 times, well here’s your 101st time 😬

Before I go on about why I love it so much, a little bit of background ….

Context

I am relatively new to development (started 5 yrs back), especially front end web development. I started doing it back in my second year of undergrad, back then it was basic html/css/javascript, nothing fancy. But then, I tried React and it was again a mind blowing concept, in a good way. Reusable components, state handling, virtual dom, updating only what is necessary… front-end dev finally started becoming more intuitive to me.

Then I defaulted to react, whenever I had to do any sort of front end dev. Soon I started building multi page applications, requiring routing, global state, …. and like most react developers, I used the tools necessary for that react-router and redux . All of it worked nicely, no doubt about that, but still it felt too much of a hassle, and too much work to get things done.

Fast forward to a couple days back, my YouTube, Medium and Google feed is filled with NEXT.JS 12 and how cool it is, and how next solves the SEO problem for react , on and on and on… . Yesterday I finally decided to give it a try.

And

Next.Js is Amazing !!! 😃

Here’s everything I found exciting…

Routing

The first thing I noticed when going through the tutorial. Next.js has file system based routing. Everything under the pages directory is one of the pages that will be rendered. So for example if my application has a route /auth/login for serving the login page, all I have to do is create the directory /auth and add the login.js page under it.

pages directory structure
pages directory structure

Just like that, I have four routes ready /auth/forgotpassword/, /auth/login/ , /auth/register/, /auth/resetpassword/ . It seems so intuitive, when compared to anything else. This was the first thing that got me excited, since routing with react-router is a little complex, at least when compared to what NEXT has to offer.

Setting the HTML Metadata

The next thing that I really enjoyed was the easy customization for the metadata. You just have to use the Head component provided by next and you can have custom title, scripts, anything you want, running for that page.
import Head from “next/head”;

export default function CustomComponent() {
return(
<>
<Head>
<title>title-for-this-page</title>
</Head>
<div>
…. // rest of the component
</div>
</>
)
}

That’s it, and now you can have title for each page. I never tried this in react, but this looks so intuitive.

SSR & Static Generation

SSR (left) and Static Generation — images taken from https://nextjs.org/learn/basics/data-fetching/two-forms

What got me most excited was Server Side rendering, and the ability to statically generate pages (like blog posts), and decide this on a per page basis.
It was really new to me, that this could be done, and seeing it in action, I could not help but appreciate at how intelligent it is.
I am currently working on a project, that has a mix of static and dynamic pages, and I always thought, why do I need react, for rendering these static pages. Seeing this feature in next, I literally jumped up in excitement.
The project has a user dashboard which will be server rendered or client rendered, since it requires data to be fetched from a different backend service, but the same application also has a route for blogs.. and with this hybrid model, I can focus on Statically generating blogs, and serving them, where as for user dashboard I can render them on the server and serve them at runtime.

Closing Thoughts

And we are almost to the end..
So, yeah, I am in love with Next.JS. But, I know I have only scratched the surface, and there are many many more things to discover about next, about building applications with it. There will be challenges to developing with next itself, and in some cases going pure react way or create-react-app way will just be better, but still, Next.Js is a framework, that will definitely make alot of development workflows much easier, streamlined and fun.

I’ll keep reading about it, and maybe make a small project as well. If all goes well, hopefully will write another post about it.

For more details on Next Js, creating apps with next js and other documentation, checkout https://nextjs.org/

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Testing: Mock API Calls

Algorithm Practice

ReactiveMeetups Roadshow with Sean Grove

React Coding Interview Challenge 10

Create CRUD Application in Node js with sequelize

Javascript async/await

What we really mean when we talk about prototypes

Let’s talk about Shopify

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Atharva Sune

Atharva Sune

More from Medium

React Query : The data fetching library for React

Simple data fetching with custom React hooks and SWR

Routing at Next.js vs React.js

How to write tests on NextJS apps using JEST Framework.