What is Next.js?
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 🧵
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.
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.
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.
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.
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.
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.
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.
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.
You can learn more about it here: next-auth.js.org
With Next, it's really easy to add authentication with a library they have created.
You can learn more about it here: next-auth.js.org
⭐ Hundreds of official templates.
When creating a Next project, you never have to start from scratch. Do you want a project with Tailwind? Redux? Auth? Typescript?
There's a template for you, this website is my go-to for easy search:
nextexamples.vercel.app
When creating a Next project, you never have to start from scratch. Do you want a project with Tailwind? Redux? Auth? Typescript?
There's a template for you, this website is my go-to for easy search:
nextexamples.vercel.app
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.
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 😊
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
