It sure is “the thing” these days. But does that make it “the perfect... thing” for your project, as well? For your specific project needs and priorities? What is Next.js used for more precisely?
Can it handle both portfolio sites, let's say, and... particularly large web projects?
Is it the best fit for both rarely and frequently updating websites? For both websites depending on a rich third-party ecosystem and those that don't use so many libraries?
Let's dig up some answers on:
- when (and when not to)
- why
… to use Next.js.
1. But First: What Is Next.js?
It's a lightweight React framework used for server-rendered and static web applications.
Now, if we were to highlight some of its main features, any shortlist would have to include:
- (default) server-side rendering
- ecosystem compatibility
- prefetching
- HMR and Error reporting
- automatic code-splitting
Note: since it resembles PHP development so much, many developers find it easy to “jump on the Next.js bandwagon”.
2. And How Does It Work?
Next.js renders your React app/website on a server (as opposed to being rendered on the client-side).
Source: GoogleDevelopers
So, do keep in mind that you'll need to have a server... somewhere.
The main gain here is that it supports scenarios where data has to be updated in real-time.
As for the drawbacks of server-rendering:
- higher level of complexity: expect to write more code to get everything working properly
- it's a bit more challenging when dealing with third-party services
- a bit more difficult to deploy (compared to client-side rendering and HTML)
3. What Is Next.js Used for? What Types of Projects Would You Use It For?
Now, back to the question that generated this blog post in the first place:
When should you consider Next.js?
When is it the best choice? Does it serve your... specific use case, for instance?
In this respect, we've identified 3 types of projects that Next.js makes the best fit for:
3.1. When SEO is your top priority
Do you need SSR (server-side rendering) to ensure SEO-friendly pages on your website? Then Next.js is your only option.
It's built to serve precisely this type of project, where good SEO is a crucial objective.
3.2. When content gets updated particularly often
Let's say that new and new data gets uploaded on your website and that the content on your web pages needs to get updated within... 3 minutes, maximum.
Source: When Should You Use Gatsby?
And I'm thinking here:
- news sites
- large eCommerce websites
- property listing websites where new comments get added and descriptions updated on a regular basis
In short: if you expect content on your future website to get updated often, then it writes Next.js all over your project.
4. Final Word
Now, would you care for a piece of advice? When trying to answer questions such as:
- “What is Next.js used for?”
- “Should I use it on my project or should I go with static?”
… make sure you evaluate both your short-term and long-term needs.
In other words: your website might not need to update its content frequently right NOW, but maybe you're considering scaling it up in the future...
For in that case, build performance and SEO will become some key requirements and your client-side or static architecture won't serve your goals anymore.
Just make sure you coordinate your final choice with your future goals, as well.
Image by Lynn Neo from Pixabay
