Next.js is becoming more and more popular recently. I want to explain exactly why and what does it do.
They call themselves "The React Framework for Production".
So, in a way, they convert React from a library to a framework.
Let's explain how they do it 🧵
⭐ Pre-rendering.
Next generates HTML for each page in advance, instead of doing it client-side.
This results in better performance and SEO.
There are two forms of pre-rendering.
- Static Generation (SSG). The HTML is generated at build time and it can be reused.
You can generate static pages with data, which can be fetched at build time. This is used for e-commerce sites, blogs, documentation, etc.
- Server-side rendering (SSR). The HTML is generated on each request.
This is slower than SSG, and it should only be used if you have no other option.
⭐ Image optimization.
Next has an Image component that automatically resizes, optimizes, and serves images in formats like WebP when the browser supports it.
They also avoid Layout shift, this happens when you are reading something, and suddenly the text moves on the page.
⭐ Fast Refresh.
This creates a better developer experience, every time you make a change in your project, you'll see the edit live without having to refresh the page, and, most importantly, without losing the state.
I can't express how good this is.
⭐ Routing.
In React, you need to install a package like react-router for your routes, in Next, you only need to create your js file inside your pages folder.
And, with the Link component Next provides, every page that's linked is prefetched when the original page loads.
⭐ API Routes.
You can build your own API with Next.js. This is serverless so it comes with some downsides, but for most projects, it's perfect.
It has a syntax really similar to Express so if you know that, it should pretty easy to pick up.
⭐ Easy authentication.
With Next, it's really easy to add authentication with a library they have created.
For these and other multiple reasons, lately, I've been using Next.js for all my projects instead of React.
I believe the developer experience is much better and I can create projects in a much faster way.
If you enjoy this thread and you would like to see more like this. A follow will be much appreciated (@nachoiacovino).
This thread was inspired by one of my multiple conversations with my followers, so feel free to reach out and talk with me about anything, DMs are open 😊
• • •
Missing some Tweet in this thread? You can try to
force a refresh
Some people believe that you need to be a JavaScript master before starting learning React, and that couldn't be further from the truth.
You should know some fundamentals, and I want to tell you exactly which ones.
Let's begin 🧵
let and const.
This is the ES6 way of assigning variables, it replaces "var".
"let" is for variables that are gonna be reassigned in the future.
"const" is for variables that are not gonna change, you define them and you use them, but they have a "constant" value.
imports and exports.
A big part of React is reusability. You create a component (like a button), export it, and then import it on your other components without having to write it out again.
One of the most common mistakes I noticed by reviewing websites is that many people don't optimize their images.
Let's take a look and why should you optimize them and how you can do it efficiently.
Let's start! 🧵
Images are one the most important parts of a website. But unoptimized images file's size is often very big.
One simple image could be 2MB, imagine if you have 10 of them. Now imagine someone with really slow internet trying to access your website. It will take forever.
Let's put an example of how we can optimize it.
This is a screenshot of my new portfolio (still under construction), when I take the screenshot, it's a .png file and the size is 539KB.