How can Next.JS BOOST the SEO rankings of your website

7 min readDec 4, 2021

Why is everyone upgrading from React.JS to Next.JS?

What is SEO?

SEO stands for Search Engine Optimization. The goal of SEO is to create a strategy that will increase your rankings position in search engine results. The higher the ranking, the more organic traffic to your site, which ultimately leads to more business for you!

What is Next.JS?

Next.js is a React framework for building statically generated and server-rendered React applications. It comes with a lot of benefits to help us create and scale our applications, such as zero-configuration, automatic code-splitting, ready for production, static exporting, etc.

With Next.js you can achieve a nice SEO result with simple steps, by just creating a new application. This is not a specific feature from Next.js, but from server-side rendered applications.

Let’s go through an example with Next.js and see how it works.

You can create a new Next.js application in one command, by using the setup “Create Next App“:

npx create-next-app

After creating your project, you may notice that it has some differences from other famous boilerplates such as Create React App. Each page of your applications will be hosted inside the pages folder, and each page is defined as a React component.

To create a new route inside your application, all you have to do is create a new file inside the pages folder and create a new React component for it:

// pages/about.js
const About = () => (
  <div>
    <h1>About page</h1>
  </div>
);
export default About;

Note: As you begin to build your application, you can do some SEO reports, Lighthouse is helpful for this.

Creating a new application using Next.js is pretty easy. Let’s look at some ways to improve SEO with Next.js and improve our organic results in search.

What is SPA?

A SPA (or Single Page Application) is a type of web application that provides a dynamic and interactive experience all from one point of entry.

Traditionally, you might be more familiar with a server-side approach, where each page of your website has its own “route” (or page URL), but with a SPA, you have a single route that loads up the entire website in the browser using JavaScript.

It’s a little easier to get your head around it with an example. If you’re building a React application, React needs to “mount” onto a page element. You can do this by serving a page like index.html to your visitor, then in the browser, React will provide that mounting action based on your instructions.

Once that page mounts, React kicks in and enables you to do whatever you want. Whether it’s providing simple things for the visitor to interact with or providing some routing mechanism to change pages, in this example, that entire experience originated from that single page.

Part of the issue of serving an entire application based on a single entry point (index.html) is when Google is trying to look at that URL, they’re only ever going to be able to see the content and metadata from that single initial page.

This limits what pages you can make available to Google, ultimately hurting your ability to index more content. It’s that indexed content that makes your website or application discoverable by search engines.

Also, traditionally, a single-page application leans heavily on JavaScript to provide a dynamic experience. For many simple use cases, this might be completely fine, as Google can support a limited amount of JavaScript when crawling the page, but this isn’t true of all search engines.

With these challenges, we start to lose our competitive advantage when trying to make use of one of the biggest potential traffic sources on the web.

How Next.js can help you with SEO?

Using Next.js will improve your SEO result a lot, but you still need to pay attention to other aspects of your app. Here are some things that you should pay attention to in order to get a nice SEO result:

Meta tags

Meta tags provide data about your page to search engines and website visitors, they can affect the way users see your site in the search results, and can make a difference whether they will access your site or not. They’re only visible in the code, but they are a very important part of applications that want to prioritize SEO results.

A meta tag basically tells the search engines what the content of that specific page is, what exactly that page is about, and how the search engine should show it.

Next.js has a built-in component for appending meta tags to the head of the page:

import Head from 'next/head'

To insert a meta tag on a specific page, use the Head built-in component and add the specific meta tag:

import Head from 'next/head'

const Example = () => {
  return (
    <div>
      <Head>
        <title>Example</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hi Next.js!</p>
    </div>
  )
}

export default Example

A nice thing about the Head built-in component is that when you are adding a new meta tag, and you want to make sure that this meta tag will not be duplicated, you can use the key property and it will be rendered only once:

<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />

A good SEO result can be achieved by simply starting to use some meta tags in your application. Here is a list of some important meta tags that you should be using to improve your SEO results.

Do a review on your application right now, and check if you’re making use of meta tags (and the right ones). It can totally make a huge difference in your SEO result and improve your organic traffic.

Performance

Visitors don’t want to wait an eternity for your page to load. Performance should be the main concern when building an app. Performance is actually a crucial factor for SEO.

Search engines, especially Google, use the First Contentful Paint (FCP) of your page as a crucial performance metric. FCP metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen. A page with a poor First Contentful Paint performance will result in a bad SEO result.

You can use Next.js to measure some metrics such as FCP or LCP (Largest Contentful Paint). All you have to do is create a custom App component and define a function called reportWebVitals:

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

The reportWebVitals function will be triggered when the final values of any of the metrics have finished on the page.

You can find out more about measuring performance in Next.js applications here. Here you can find a list of points that you should improve in order to get a nice FCP result.

SSL certificate

In August 2014, Google declared HTTPS as a ranking signal. The Hypertext Transfer Protocol Secure (HTTPS) gives your users an extra layer of protection when they share information with you.

In order to use HTTPS, you should have an SSL (secure socket layers) certificate. A very nice SSL certificate can be expensive sometimes. How can you have an SSL certificate in your Next.js application for free?

You can use a cloud platform like Vercel for deploying. Vercel is also the company that created Next.js, so the integration is pretty smooth. To deploy a Next.js application using Vercel, just install the Vercel CLI:

yarn global add vercel

And inside your project, give it a command:

vercel

Your project will be deployed to Vercel by default using an SSL certificate.

Content is important

Showing your content to your clients the right way makes a big difference. Giving your clients a refined experience is the main concern and priority of every developer.

The whole point of deciding to use a single-page application instead of server-side rendered, or vice-versa, should be about the content that you want to show and the principal goal that you want to achieve with your clients.

The goal of Next.js is to provide a React server-side rendered application, and with that, we achieve nice levels of SEO, UX, performance, etc. It can help companies and developers to improve their websites and projects, and gain more organic traffic from search engines.

Now is a good time to start using Next.js and unlock the power of server-side rendered applications, they are really amazing and can help you and your company a lot. You will be surprised, guaranteed.

Conclusion

In this article, we learned more about Next.js and how it can help achieve nice SEO results in modern applications. We also learned about SEO in general and the important points that we should pay attention to such as meta tags, performance, SSL certificate, etc.