This is a short blog on NextJs, and why so many people are using it for everything moving forward, in place of vanilla React. It didn’t have the strongest first years but it has really grown and also got a lot of funding, which the team has done a great job using the time and resources they have to build this strong framework.
Introduction
NextJs is a React Framework that comes with many extra features and a ton of things built in, which includes routing, API support, and a lot of things you would probably import anyway.
For the most part, you will still be writing normal React and Node but there are some differences along the way that will save you a lot of time. If you are already comfortable with React, I encourage you to jump straight into building a project after or while watching some sort of crash course. This is because almost everything transfers over and some things which you will learn about soon, are already done for you.
To get started make an app with the following, where NAME is replaced with whatever you want the project to be called:
npx create-next-app NAME
make sure to run:
npm install
and lastly, start it:
npm run dev
Built-in Routing
One of the features people see right away is the built-in Routing and it makes it so easy to set it up and to keep adding.
Once the project is made you will see a pages folder instead of a src folder which contains some JavaScript files. That means routing is already set up! All you have to do to add a new route is add a file in there.
These are named with lowercase and once you set up the boilerplate function or component, it’s ready. Let’s say we made about.js in the pages folder, then if we go to:
localhost:3000/about
our about component will render! You obviously don’t want to have a new route for every component you make, so the ones that you don’t, go in a new folder named components in the ROOT folder, NOT the pages folder. Then just import it as usual and there you go!
localhost:3000/about
our about component will render! You obviously don’t want to have a new route for every component you make so the ones that you don’t go in a new folder named components in the ROOT folder, NOT the pages folder.
The only thing left is to add navigation which means you are changing the address with a navbar for example by just clicking a button instead of typing in the address.
The whole complicated React Routing is now super simple and very easy to add on to. There is also a really great way to autogenerate routes for using ids, for example: /users/23
API Routes
Yes, the API Routes are built-in too! With this, you can go to
/api/NAME
again NAME replaced with whatever you set it to, and you can see your JSON response there from your API!
Another reason why this is big is that it is server-side, which means any API keys or sensitive information is NOT in the React frontend code, so people looking to do harm will have a much harder time getting their hands on sensitive information.
Images Optimization
This is something no one considers until it’s an issue, but image optimization with the built-in Image component can make it load so much faster, and only load it at the necessary size.
For example, if you’re dealing with a smaller size or on a phone, why load the same size as a fullscreen monitor? This is handled automatically when you use NextJs’s Image component and the actual code you write is almost identical to what you normally write in React.
To achieve this simply import it:
import Image from “next/image”
and then replace
<img></img>
with
<Image layout=”responsive”></Image>
and that’s all you need to get the previously mentioned benefits.
Of course, there is more to mess around with and a lot to learn.
Generating Sites
Lastly, we have the option to generate a Static or Dynamic site, or both if you want!
In seconds you can set up a static site which to put out there and it is done with a few easy commands. However this doesn’t allow for dynamic features so if the site you built is instead dynamic, you have that choice!
Conclusion
NextJs has a lot of built-in things to make the process of building a website so much faster, easier, and in some cases more secure/reliable! Someone working on a single site for a long period of time may not seem that big of a difference but for someone who constantly is making new sites, using NextJs can eliminate a ton of tedious work, which makes everything more enjoyable, it saves time and helps make more money
