If you are just wondering if Next.js is a good choice for building a website, the answer is definitely YES. I will be telling you all about how Next.js compares to other frameworks like Django or Java Spring and why it might even be better is certain areas.
Over the years I have tried tons of different website development frameworks such as Django and Flask that are written in Python, and Java Spring.
All of these frameworks lacked something and I felt like I was fighting against the limitations of them.
During this time I was heavily into making React.js websites using create-react-app. It worked great.
Until it didn't.
If you are a react developer you have probably faced these same issues too:
- Client side rendering is bad for SEO and website performance
- You are required to create a separate backend service if you are dealing with sensitive data such as API keys, authentication or private information
- Bundle sizes are huge
During this time I heard about Next.js and from the first look it seemed to solve all of these issues.
What makes Next.js different
The main selling points of Next.js for me are:
- Multiple different rendering methods (static, server-side, client-side)
- Backend capabilities with API routes
- Using server side code directly in your frontend pages
- Incredible tools that will make your life so much easier
So let's take a deep dive and see why these reasons made Next.js a no brainer to me.
Built for SEO
There are two things that make Next.js a killer website framework for SEO.
Its incredible performance and multiple different page rendering methods.
Next.js allows you to pre-render your pages before your users request them, gaining huge performance boost. The only downside is that if you want to make any changes to the page's content you have rebuild the whole site.
An average website with ten to a hundred pages takes around one to two minutes to build.
Always calculate these risks and rewards before you choose a certain rendering method. Check how many pages you have, how often they are going to be updated on average, and how long does building them take.
An alternative for pages that update often is to use server-side rendering.
This will cause the page to be built on demand whenever users request it. This takes a little longer than statically rendering it ahead of time. Especially if you are using serverless functions.
If you are using server-side rendering a lot consider hosting your website on a platform like DigitalOcean App Platform which is not going to slow you down as much serverless platforms like Netlify or Vercel.
Core Web Vitals
Google's Core Web Vital metrics have become an important thing to consider if SEO is important for your website.
Thankfully Next.js performs extremely well in this regard thanks to its multiple different render methods.
API routes
Basic React websites suffer from a major problem. All of your code will be visible to all users.
This means that you cannot store secrets like API keys in your code. Most common use cases for API keys are fetching data from a database or a content management system, or submitting forms for example.
If your website was built with React only you would be forced to built a separate back-end service just so you can keep your API keys hidden. This obviously increases development time significantly and makes your architecture more complex.
Next.js solves this problem by allowing you to create API routes within your regular Next.js application. This allows you to build your website significantly faster and more securely.
Another benefit is that you can use your backend code directly in your frontend pages without exposing any confidential data. This means that you can query your database or content management system within your website pages, allowing you to skip creating API routes altogether.
Incredible tooling
The open source community has built some incredible tools for Next.js that make building some common features fast and easy.
For authentication there is next-auth.
For end-to-end typesafe APIs there is tRPC.
For SEO there is next-seo.
These tools are some of my favorites which I use in almost all of my website projects.
In addition to these you will of course have access to all React tools.
The Next.js advantage
All of these things are nice, but how do they translate to actual business results?
After I switched to Next.js I noticed that my client projects took less time, were less error prone, and performed better in regards to SEO.
That's why when clients come to ask me for help for their website I usually end up recommending Next.js
Next.js is the perfect website framework for websites such as:
- Real estate websites
- Blogs
- Landing pages
- Complex web applications
- Information heavy sites
- eCommerce sites
One of my clients, StartSteps Digital Education, got up-to 600 percent performance increase on certain pages. Read the whole case study here. This ended up increasing the amount of traffic they are getting from search engines thanks to its SEO boost.
Key takeaways
You should consider using Next.js if SEO and website performance are important for your business.
Next.js is a great solution especially for freelancers as it allows just a single person to take control of the whole website architecture saving tons of time and money.
Top comments (1)
Next.js is amazing it honestly makes React development such a joy to do. Could not imagine myself changing ecosystem anytime soon with the way things are right now. Vercel have a real winner in Next.js.