BlogWorkAboutFree ToolsNewsletter
BlogWorkAboutFree ToolsNewsletter
All articles

How to access the canonical URL in Next.js

Learn how to access the canonical URL for any page of your Next.js website by using the getInitialProps SSR method.

Written by Jim Raptis

Mar 6, 2022 • 2 min

How to access the canonical URL in Next.js

In this tutorial, we’ll learn how to access the canonical URL in Next.js using the getInitialProps data fetching method for any page on your website.

💡
getInitialProps enables server-side rendering in a page and allows you to do initial data population, it means sending the page with the data already populated from the server. This is especially useful for SEO.

Before showing you the code, let’s see why the canonical URL is important for your SEO ranking.

What’s a canonical URL, and why it’s important for your website?

A canonical link (also called canonical tag, canonical URL, or URL canonicalization) is included in the HTML code of a webpage to indicate the original source of content. This markup is used to address SEO problems with duplicate content which arise when different pages with different URLs contain identical or nearly identical content. Source

A good use case for the canonical URL is when you cross-post your articles to publications like dev.to, Hasnode, Medium, etc.

By setting the canonical link to your own website’s post, you tell Google that your website is the original source of the article, and Google ranks your website over the publication’s.

Next.js snippet to access the canonical URL.

import React from "react";
import Seo from "../components/ui/Seo";

function MyApp({ Component, pageProps, canonical }) {
  return (
    <>
      <Seo canonical={canonical} />
      <Component {...pageProps} canonical={canonical} />
    </>
  );
}

MyApp.getInitialProps = ({ ctx }) => {
  const isProd = process.env.NODE_ENV === "production";
  const base = isProd ? "https://www.jimraptis.com" : "http://localhost:3000";
  const { asPath } = ctx;
  const canonical = base + asPath;

  return {
    canonical,
  };
};

export default MyApp;

We use the getInitialProps to calculate the canonical link because we need to populate the page with the link before the initial render. In that way, the Google crawler will be aware of the link.

It’s better to include the whole path with the query into the canonical link, that’s why we prefer the asPath prop of the getInitialProps context object, instead of the pathname.

...
const { asPath } = ctx;
const canonical = base + asPath;
💡
pathname - Current route. That is the path of the page in /pages asPath - String of the actual path (including the query) shown in the browser

Then, we pass the canonical URL to each page as a prop to the Component component.

Keep in mind, that the canonical prop will be available only to the components inside the /page folder, not their children.

<Component {...pageProps} canonical={canonical} />
💡
Read this article about the custom Seo React.js component.
 

If you liked this post, you can follow me on Twitter where I share daily tips about bootstraping, product development, and UI/UX design tips.

More articles like this:

Jim Raptis

© 2022