The simple answer is that Next.JS is considered a front-end framework. Next.JS offers a full suite of components and features to win on SEO. You can also deploy your Next.JS code to Vercel (the parent company of Next.JS). Vercel comes with an in-built CDN, it takes care of your SSL certificates and allows for a variety of rendering methods. Next.JS and Vercel are the go-to solutions to build an SEO-optimised website.
Table of Contents
Next.JS is a frontend framework that is great for SEO
Pre-rendered HTML web pages – Next.JS permits you to pre-render some web pages making them blazing fast. Incremental Static Regeneration (ISR) offers you the benefit of static web pages without needing to statically build website during the build. In addition to time-based ISR (rebuilding the static site every X mins), Next.JS has actually recently introduced on-demand ISR (restoring the website based upon your demand).
Image SEO Optimization – Next.JS has an inbuilt image component which assists to optimise the size, layout and also caching of the image. Photos are a constant problem when it comes to developing fast web pages. It is not uncommon that images are 2 megabytes and they are in jpeg format. After resizing as well as changing to webp layout, images can become 100kb. The Image component of Next.JS can remove all this overhead for you.
Code splitting – Next.JS supports code-splitting allowing you just import the components. To score high up on CWV, it’s important to get all the CWV in the first viewport right. Code-splitting can help to import elements outside the initial viewport only when needed. To put it simply, as soon as a customer scrolls down, they will be loaded. This method can make the loading of the components in the initial viewport much faster (due to the fact that you delay loading the rest of the web page).
Asynchronous loading of third-party collections – Many websites import a number of third-party libraries leading to reduced web page speed. Next.JS Script element lets you choose various loading methods using. Especially, google tag manager, Facebook/Google pixel and other advertising collections can/should(?) be loaded asynchronously.
Vercel – Next.JS has the best integration with Vercel out of all the React Frameworks. Vercel (the parent company of Next.JS) is a platform for front-end frameworks and static sites. Vercels edge network functions as a CDN, allowing caching and different rendering methods for each webpage.
Does Next.JS have a backend?
It is possible to use Next.JS for the backend in at least two ways.
First, Next.JS comes with a custom server that is a normal NodeJS server that can be customised. It should be noted that a custom server removes important performance optimisations and is not the preferred way anymore (read more about the custom server here).
Second, if your backend is not too complex, you can directly in Next.JS define serverless API functions. The idea is that you do not develop a separate backend, basically, you define serverless functions. Each function is a request handler written and will be deployed as a serverless function. Below you can see an example of a serverless API function.
import { connectToDatabase } from 'utils/db';
import { withAuth } from 'utils/auth';
import User from 'utils/db/user';
const handler = async (req, res) => {
// Ensure that we're connected to the database
await assertDBConnection()
// Find all users and return them as JSON
const users = await User.find({})
res.json({ users })
})
// Use "middleware" to check for authentication
export default withAuth(handler)Do you need a backend for Next.JS?
You need a backend for Next.JS if your website uses a lot of external data and depends on complex business logic. Performing real-time computations on the front end substantially slows down the website. If you are building a website for internal use which does not need to be SEO compliant and does not have a lot of business logic, you can possibly consider not building a backend. A dedicated backend can help you cache results and perform computations much faster than in the browser.
Is Next.JS good for the backend?
For the majority of use cases, it is best to build a dedicated backend server. You will have the freedom to build complex business logic, cache results, and produce clear logging and error handling (and much more). It is possible to use Next.JS for the backend, but building a dedicated backend is the right choice in most cases.
