Today I am going to talk about a new toy I was playing with; Next.js. I have been looking for a job in the software design industry and I have an inclination towards the front end of web development. While looking at a lot of the requirements / recommendations for company's I noticed that many of them have some similar techs / frameworks that they would like. One of them was Next.js. I had heard of it, but it was one of those things that I didnt really remember at all what it was that I remembered about it besides the name. So I decided to do some research.
It turns out Next.js has an amazing website. Not only do they have a built in guided tutorial for getting used to Next.js, they also have great documentation. It was very obvious what Next.js was from the start:
As we can see, Next.js is a react framework. As someone who has used React.js many times, after doing most of the tutorial, I can tell you that it is basically React, but nicer. Now, that is a bold statement, I know. And believe me, I love React, but Next.js is pretty cool.
The first thing I noticed about Next.js, is that is seems to have a whole bunch of stuff built in. By that I mean that with Next.js you have zero dependencies. Everything is optimized from the start, out of the box. Everything is automatically compiled and bundled with webpack and babel.
Next.js also has built in CSS and SaSS support. Consider how styesheets are in general global. With Next.js we can use component level CSS by using CSS Modules. CSS modules will locally scope with unique class names using a "name.module.css". We can import these anywhere in our application and it will only work with the specific components that we want to be affected.
In Next.js we can use special react components called pages. Pages have built in dynamic routes and will pre render. Pre rendering is really cool because the code will generate HTML before the Javascript does it on the client side, which is more efficient. Another cool thing about Next.js is that we can choose the way that we pre render. The two ways we can choose from are called static generation or server side rendering. The difference basically is that with static generation the HTML is rendered at build time and can be reused, where as with server side the HTML with re render with each request. Of course, with Next.js we can client side render alongside server side rendering and static generation.
Next.js also has what is called 'fast refresh'. With React, generally the page will re render from only a couple things, state change, or a refresh. With Next.js fast refresh, we can edit anything and the page will show the edits made instantaneously without losing component state. It will be very specific to your component too, which is really cool. So changes made that include re rendering will only re render the component you are working on, not the rest of the application, making it so that you can work on a component without the fear of breaking or disrupting anything else in your application.
These are just some of the great features of Next.js. Even though it is still pretty new, many companies including hulu and Netflix are using it. My experience with it was pretty nice. To me, it was basically react but more dev friendly, somehow. Next.js is obviously getting really popular because of all its nice features, the SEO, chaching and fully server rendered pages make it seem doubtful that it wouldnt become a huge framework.
Top comments (0)