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.

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;

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} />