I have just implemented a simple cookie consent banner on my website, and I want to share with you in this article how I've done it with a step-by-step guide.

The cookie consent banner is a way to inform your users how your website and the services it uses their browser cookies.

It does contain a link to your website privacy policy where they can learn in more detail how their personal data is stored and used.

Each website's policy is different, that's why you may need to change the content of the consent banner, as well as the type of action buttons your website needs.

In this article, we will use a fresh Next.js installation with TypeScript and Tailwind CSS, so it's easy for you to follow the same steps without getting lost in the project complexity.

You don't have to create a new Next.js project as long as you already have one, Luckily I already have an article that explains all about setting up a new project.

If you like to follow along, please go ahead and set up your project using the <a href="https://codersteps.com/articles/how-to-set-up-and-structure-your-full-stack-next-js-application">How To Set Up And Structure Your Full-Stack Next.Js Application</a> article.

Please skip the unnecessary sections for the purpose of this article, you can read up to the Tailwind CSS section by skipping the Google Fonts section.

I went ahead and did that myself, so now I have a fresh Next.js project with TypeScript and Tailwind CSS set up and ready to go.

In order to include the consent banner on all our public pages, we will need to create a shared layout that wraps all the pages we want the banner to show on.

We will create a simple layout that we will apply on the homepage and our privacy policy page, but for you, you may want to use a different approach that sweets your needs better.

You can learn more about how you can do that on the <a href="https://nextjs.org/docs/basic-features/layouts" rel="noopener noreferrer" target="_blank">Next.js Layouts</a> docs page.

Let's first, create a new file at `components/layouts/PublicLayout.tsx` and have it just add a simple header at the top and the footer at the bottom.

import Link from 'next/link'
import { ReactNode } from 'react'

export const Container = ({ children }: { children: ReactNode }) => (
  <div className="w-full max-w-5xl px-2 mx-auto md:px-4">{children}</div>
)

const PublicLayout = ({ children }: { children: ReactNode }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="flex items-center border-b border-gray-200 h-14">
        <Container>
          <nav>
            <ul>
              <li>
                <Link href="/">
                  <a className="text-sm font-medium text-center capitalize">
                    Home
                  </a>
                </Link>
              </li>
            </ul>
          </nav>
        </Container>
      </header>
      <main className="flex-grow">
        <Container>{children}</Container>
      </main>
      <footer className="py-5 border-t border-gray-200">
        <Container>
          <nav className="my-5">
            <ul>
              <li>
                <Link href="/privacy-policy">
                  <a className="text-sm font-medium text-center capitalize">
                    Privacy Policy
                  </a>
                </Link>
              </li>
            </ul>
          </nav>
        </Container>
        <Container>
          <p className="text-sm font-medium text-center capitalize">
            copyright © {new Date().getFullYear()} all rights reserved
          </p>
        </Container>
      </footer>
    </div>
  )
}

export default PublicLayout

As you can see this is a simplified not responsive `PublicLayout` example component, but it will serve us very well in this article.

At the top we declared a simple React component `Container` which we reuse it inside our layout component, it's just a simple div.

Then we added a simple header, main, and footer sections, we used `flex-col` and `flex-grow` to have the main section take the available height, in order to push the footer to the bottom.

Applying the public layout component to our public pages

Let's go ahead and have our homepage use the `PublicLayout` component

import Head from 'next/head'
import type { NextPage } from 'next'
import PublicLayout from '../components/layouts/PublicLayout'

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Next.js cookie consent banner</title>
        <meta
          name="description"
          content="A Next.js cookie consent banner with TypeScript and Tailwind CSS."
        />
      </Head>

      <PublicLayout>
        <h1 className="text-3xl font-bold font-open">
          Next.js cookie consent banner
        </h1>
      </PublicLayout>
    </>
  )
}

export default Home

We simply imported it and wrapped our content using it, now if we opened our homepage, we should see a header and a footer.

As we mentioned above we will link to the privacy policy page from the banner content. I know if you already own a website there's a high chance you already have it.

But I wanted to add it, so I can have a fully working example at the end of this article for you as a reference, as well as having a page link I can refer to.

I will go ahead and create a new file at `pages/privacy-policy.tsx` and a simple empty page with a title.

import Head from 'next/head'
import type { NextPage } from 'next'
import PublicLayout from '../components/layouts/PublicLayout'

const PrivacyPolicy: NextPage = () => {
  return (
    <>
      <Head>
        <title>Our Privacy Policy</title>
        <meta name="description" content="Website privacy policy page" />
      </Head>

      <PublicLayout>
        <h1 className="text-3xl font-bold font-open">
          Website privacy policy page content
        </h1>
      </PublicLayout>
    </>
  )
}

export default PrivacyPolicy

You may notice we have also wrapped its content with the `PublicLayout` component just like we did with the homepage.

It's time to create the main component that will display the cookie consent banner to the user. but first, let's install a single dependency that we will need to manage browser cookies.

The `js-cookie` npm package is a handy tool to set and get our browser cookies, and we need that to remember that a user has already accepted our consent.

To install it we will use the commands `npm i js-cookie` and `npm i --save-dev @types/js-cookie` for the package types.

CookieConsent component structuring and styling

Now we are ready to start with our component structure, content, and styling, we will have a fixed banned with standard content and a single button that says `"Got it"`.

Go ahead and create a file for our component at `components/banners/CookieConsent.tsx` and put the following.

import Link from 'next/link'
import { MouseEvent } from 'react'
import { Container } from '../layouts/PublicLayout'

const CookieConsent = () => {
  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    console.log('remember that I accept')
  }

  return (
    <section className="fixed bottom-0 left-0 w-full py-2 md:py-4">
      <Container>
        <div className="flex flex-col items-start px-5 py-3 space-y-2 bg-gray-200 md:flex-row md:space-y-0 md:items-stretch md:space-x-2">
          <div className="flex items-center flex-grow text-gray-900">
            <p className="text-sm font-medium">
              This site uses services that use cookies to deliver better
              experience and analyze traffic. You can learn more about the
              services we use at our{' '}
              <Link href="/privacy-policy">
                <a className="text-sm underline hover:text-lightAccent">
                  privacy policy
                </a>
              </Link>
              .
            </p>
          </div>
          <div className="flex items-center">
            <button
              className="p-3 text-sm font-bold text-white uppercase bg-gray-700 whitespace-nowrap"
              onClick={onClick}
            >
              Got it
            </button>
          </div>
        </div>
      </Container>
    </section>
  )
}

export default CookieConsent

I will assume that you know your way around CSS and Tailwind so I will focus on explaining the idea behind the styles instead of the actually applied styles.

We have added a simple fixed wrapper to the bottom, with a vertical padding, inside of it we have added a container which by default it has horizontal padding.

Inside the container, we added our banner saying that we use services that use the user's cookie and we give them a button to consent to it.

CookieConsent button action implementation

When the button is clicked, currently we just log to the console, but in this subsection, we will have it set a cookie with the key `cookie_consent_is_true` to `"true"` to mark a user as consented.

We will use the `js-cookie` package to easily do that, this package gives us two methods `set` and `get` which enable us to set a new cookie with `key=value` pairs.

Let's write the code first then explain it, go ahead and update the `CookieConsent` component to match the following changes.

import Link from 'next/link'
import Cookies from 'js-cookie'
import { MouseEvent, useCallback, useEffect, useState } from 'react'
import { Container } from '../layouts/PublicLayout'

const USER_CONSENT_COOKIE_KEY = 'cookie_consent_is_true'
const USER_CONSENT_COOKIE_EXPIRE_DATE = 365

const CookieConsent = () => {
  const [cookieConsentIsTrue, setCookieConsentIsTrue] = useState(true)

  useEffect(() => {
    const consentIsTrue = Cookies.get(USER_CONSENT_COOKIE_KEY) === 'true'
    setCookieConsentIsTrue(consentIsTrue)
  }, [])

  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()

    if (!cookieConsentIsTrue) {
      Cookies.set(USER_CONSENT_COOKIE_KEY, 'true', {
        expires: USER_CONSENT_COOKIE_EXPIRE_DATE,
      })
      setCookieConsentIsTrue(true)
    }
  }

  if (cookieConsentIsTrue) {
    return null
  }

  return (
    <section className="fixed bottom-0 left-0 w-full py-2 md:py-4">
      ...
    </section>
  )
}

export default CookieConsent

For a little best practice 😁 we declared two constants `USER_CONSENT_COOKIE_KEY` for the cookie key and `USER_CONSENT_COOKIE_EXPIRE_DATE` for the cookie expires property.

Then we created a new state for our user cookie consent value `cookieConsentIsTrue` we set it to be `true` by default.

Using the `useEffect` hook which runs once after the component has been mounted, we check if there's a cookie with the key `"cookie_consent_is_true"` and value `"true"`.

When the user clicks on the "Got it" button, we simply check if the `cookieConsentIsTrue` is not true, which means the cookie wasn't set before, if not then we set it with the right value and an expiration date of a single year.

Finally, before rendering our component we check if the user has already accepted, if yes we just return `null` which means the component won't be rendering anything.

That was it for our component but sure you can extend it to whatever extent your website needs, Now it's time to add it to our public layout.

This is simply importing the component and inserting it after our footer, where you put it doesn’t matter because we give it a fixed position.

// imports
import CookieConsent from '../banners/CookieConsent'

...

const PublicLayout = ({ children }: { children: ReactNode }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="flex items-center border-b border-gray-200 h-14">
        ...
      </header>
      <main className="flex-grow">
        <Container>{children}</Container>
      </main>
      <footer className="py-5 border-t border-gray-200">
        ...
      </footer>
      <CookieConsent />
    </div>
  )
}

export default PublicLayout

Now if we checked out our home and privacy policy pages, we should see a cookie consent banner appears.

And if we click on the "Got it" button it should disappear, even if we reload it won't show, because we set the cookie to mark the user as consented.

In this article, you have learned about how to add a cookie consent banner to your Next.js website with Tailwind CSS as our styling framework of choice.

Source code is available at: https://github.com/codersteps/nextjs_cookie_consent_banner.

That's it for this one, I hope it was helpful, see you in the next one 😉.

Learn how to add a cookie consent banner with Next.js and Tailwind CSS, and how to remember when a user has already accepted the cookie consent banner.

I have just implemented a simple cookie consent banner on my website, and I want to share with you in this article how I've done it with a step-by-step guide.


The cookie consent banner is a way to inform your users how your website and the services it uses their browser cookies.


It does contain a link to your website privacy policy where they can learn in more detail how their personal data is stored and used.


Each website's policy is different, that's why you may need to change the content of the consent banner, as well as the type of action buttons your website needs.


In this article, we will use a fresh Next.js installation with TypeScript and Tailwind CSS, so it's easy for you to follow the same steps without getting lost in the project complexity.


You don't have to create a new Next.js project as long as you already have one, Luckily I already have an article that explains all about setting up a new project.


If you like to follow along, please go ahead and set up your project using the <a href="https://codersteps.com/articles/how-to-set-up-and-structure-your-full-stack-next-js-application">How To Set Up And Structure Your Full-Stack Next.Js Application</a> article.


Please skip the unnecessary sections for the purpose of this article, you can read up to the Tailwind CSS section by skipping the Google Fonts section.


I went ahead and did that myself, so now I have a fresh Next.js project with TypeScript and Tailwind CSS set up and ready to go.


In order to include the consent banner on all our public pages, we will need to create a shared layout that wraps all the pages we want the banner to show on.


We will create a simple layout that we will apply on the homepage and our privacy policy page, but for you, you may want to use a different approach that sweets your needs better.


You can learn more about how you can do that on the <a href="https://nextjs.org/docs/basic-features/layouts" rel="noopener noreferrer" target="_blank">Next.js Layouts</a> docs page.


Let's first, create a new file at <code>components/layouts/PublicLayout.tsx</code> and have it just add a simple header at the top and the footer at the bottom.


As you can see this is a simplified not responsive <code>PublicLayout</code> example component, but it will serve us very well in this article.


At the top we declared a simple React component <code>Container</code> which we reuse it inside our layout component, it's just a simple div.


Then we added a simple header, main, and footer sections, we used <code>flex-col</code> and <code>flex-grow</code> to have the main section take the available height, in order to push the footer to the bottom.


Let's go ahead and have our homepage use the <code>PublicLayout</code> component


We simply imported it and wrapped our content using it, now if we opened our homepage, we should see a header and a footer.


As we mentioned above we will link to the privacy policy page from the banner content. I know if you already own a website there's a high chance you already have it.


But I wanted to add it, so I can have a fully working example at the end of this article for you as a reference, as well as having a page link I can refer to.


I will go ahead and create a new file at <code>pages/privacy-policy.tsx</code> and a simple empty page with a title.


You may notice we have also wrapped its content with the <code>PublicLayout</code> component just like we did with the homepage.


It's time to create the main component that will display the cookie consent banner to the user. but first, let's install a single dependency that we will need to manage browser cookies.


The <code>js-cookie</code> npm package is a handy tool to set and get our browser cookies, and we need that to remember that a user has already accepted our consent.


To install it we will use the commands <code>npm i js-cookie</code> and <code>npm i --save-dev @types/js-cookie</code> for the package types.


Now we are ready to start with our component structure, content, and styling, we will have a fixed banned with standard content and a single button that says <code>"Got it"</code>.


Go ahead and create a file for our component at <code>components/banners/CookieConsent.tsx</code> and put the following.


I will assume that you know your way around CSS and Tailwind so I will focus on explaining the idea behind the styles instead of the actually applied styles.


We have added a simple fixed wrapper to the bottom, with a vertical padding, inside of it we have added a container which by default it has horizontal padding.


Inside the container, we added our banner saying that we use services that use the user's cookie and we give them a button to consent to it.


When the button is clicked, currently we just log to the console, but in this subsection, we will have it set a cookie with the key <code>cookie_consent_is_true</code> to <code>"true"</code> to mark a user as consented.


We will use the <code>js-cookie</code> package to easily do that, this package gives us two methods <code>set</code> and <code>get</code> which enable us to set a new cookie with <code>key=value</code> pairs.


Let's write the code first then explain it, go ahead and update the <code>CookieConsent</code> component to match the following changes.


For a little best practice 😁 we declared two constants <code>USER_CONSENT_COOKIE_KEY</code> for the cookie key and <code>USER_CONSENT_COOKIE_EXPIRE_DATE</code> for the cookie expires property.


Then we created a new state for our user cookie consent value <code>cookieConsentIsTrue</code> we set it to be <code>true</code> by default.


Using the <code>useEffect</code> hook which runs once after the component has been mounted, we check if there's a cookie with the key <code>"cookie_consent_is_true"</code> and value <code>"true"</code>.


When the user clicks on the "Got it" button, we simply check if the <code>cookieConsentIsTrue</code> is not true, which means the cookie wasn't set before, if not then we set it with the right value and an expiration date of a single year.


Finally, before rendering our component we check if the user has already accepted, if yes we just return <code>null</code> which means the component won't be rendering anything.


That was it for our component but sure you can extend it to whatever extent your website needs, Now it's time to add it to our public layout.


This is simply importing the component and inserting it after our footer, where you put it doesn’t matter because we give it a fixed position.


Now if we checked out our home and privacy policy pages, we should see a cookie consent banner appears.


And if we click on the "Got it" button it should disappear, even if we reload it won't show, because we set the cookie to mark the user as consented.


In this article, you have learned about how to add a cookie consent banner to your Next.js website with Tailwind CSS as our styling framework of choice.


Source code is available at: <a href="https://github.com/codersteps/nextjs_cookie_consent_banner">https://github.com/codersteps/nextjs_cookie_consent_banner</a>.


That's it for this one, I hope it was helpful, see you in the next one 😉.


How to add cookie consent banner with Next.js and Tailwind CSS

Learn how to set up and structure a Next.js project with TypeScript, Tailwind CSS, and Prisma.js for your future full-stack apps.

How to set up and structure your full-stack Next.js application

In this article, we will add OpenGraph to a new Next.js website, so it's easy to grab the knowledge that will enable you to add it to your website and adapt it to your or your client's situation.

We will start as usual by creating a new Next.js project, I like to use typescript on all of my projects. To create a new project I will use this command `npx create-next-app@latest --typescript open_graph`.

After it's done go and open the project inside your favorite code editor mine is vscode, then start the dev server with `npm run dev` and check it inside the browser you should see the default Next.js home page.

Before getting started with creating a component to add the open graph meta tags let's first learn a little bit about OpenGraph and its properties which we'll be adding to our Next.js website.

OpenGraph is used to make web pages rich when shared on social media, it enables you to control how it looks. Like page title, preview image, url, and so on.

When a page doesn't include the OpenGraph protocol and it's shared for example on Facebook, Facebook will try to pick some default values like the first image on that page, the page description, etc.

To be able to control the preview displayed information when our web page is shared on social, we use meta tags to set those values.

Because this article is about the **implementation of Open Graph with Next.js?** you can read more here: <a href="https://ahrefs.com/blog/open-graph-meta-tags/" rel="noopener noreferrer" target="_blank">Open Graph Meta Tags: Everything You Need to Know</a>.

At the end of this article, you will have an OpenGraph component and a useOpenGraph hook that can be reused on multiple pages, or extended by extra meta tags.

To make it easy for you to understand how to reuse it in multiple situations I like to work with a scenario for the rest of the article.

We will have two pages, one is a dynamic posts detail page at `/posts/{id}`, and another is the home page at `/`.

For our dynamic page, we will use a simple JSON file with 3 posts in it, then we will use `getServerSideProps` to read that file.

It won't be complicated we will simply import the JSON file, search for the right post, then show the page with that post's content.

But our mean focus won't be on this part, as you may already have a similar setup, but it will help us understand better the OpenGraph component and its helper hook on how it can be used in multiple types of Next.js pages.

As mentioned before, let's start by creating a new file at `data/posts.json` with 3 simple posts, remember this step is only to have something to work with.

Post 1

Post 2

Post 3

A post will have an `id, title, thumbnail, description`, and a content property, these are commonly used fields, and we will use them to set the appropriate Open Graph meta tags.

Don't forget to add a placeholder image at `public/images/og-posts-image.jpg` as we used it inside out posts data.

Now that we have the posts data we'll need inside the show post page, let's create another new file at `pages/posts/[id].tsx` with a default Next.js page component.

import Head from "next/head";
import Image from "next/image";
import { GetServerSideProps, NextPage } from "next";

type Post = {
  id: number;
  title: string;
  thumbnail: string;
  description: string;
  content: string;
};

interface ServerSideProps {
  post: Post;
}

const ShowPost: NextPage<ServerSideProps> = ({ post }) => {
  return (
    <>
      <Head>
        <title>{post.title}</title>
      </Head>

      <main>
        <article>
          <h1>{post.title}</h1>

          <Image
            width={720}
            height={420}
            src={post.thumbnail}
            alt={post.title}
          />

          <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
        </article>
      </main>
    </>
  );
};

export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
  params,
}) => {
  if (!params || typeof params.id !== "string" || isNaN(+params.id)) {
    return { notFound: true };
  }

  const posts: Post[] = require("../../data/posts.json");

  const postId = +params.id;
  const post = posts.find((p) => p.id === postId);
  if (!post) {
    return { notFound: true };
  }

  return {
    props: {
      post,
    },
  };
};

export default ShowPost;

This is also a common situation, you have some kind of data source, then you use it to retrieve the post data if it was found and 404 otherwise.

First, we declared a `Post` type, `ServerSideProps` that uses the Post type and passed a generic type value to both `NextPage`, and `GetServerSideProps` types.

Doing that will help our `ShowPost` component, and `getServerSideProps` function understands each other, so both returned props and received ones are aligned.

Inside the `ShowPost` component we accept a `post` prop and use it to show posts data, the usual stuff.

Inside the `getServerSideProps` function we first validate the provided `id` and make sure it's a valid number.

Then we import our JSON data file using the `require` keyword inside the `getServerSideProps` to avoid any client/server ssr errors.

Then we convert the `postId` to a number by adding a plus sign at the beginning, we store it in another variable to help TypeScript understand its type.

Now that we have both a valid ID and a list of posts, we search for the requested post, if it wasn't found we return a 404 response otherwise we return the post prop to the page component.

When creating a new Next.js project, by default it comes with a home page with some content in it, that we will clean up to make it easy for us to not get lost outside our context.

We will remove any style-related stuff, classes, and the related CSS module file, go on and open the `pages/index.tsx` file, and replace it with the following.

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>OpenGraph with Next.js</title>
        <meta
          name="description"
          content="Article about OpenGraph with Next.js"
        />
      </Head>

      <main>
        <h1>OpenGraph with Next.js</h1>
        <div>An empty page is a good page</div>
      </main>
    </div>
  );
};

export default Home;

Building the OpenGraph component with Next.js

Now that we have a better idea about Open Graph and that we did set up our Next.js project to help us achieve our goal from this article, it's time to build the actual component.

Go ahead and create a new file at `components/common/OpenGraph.tsx` as usual we always need to think about the project structure from the start, that's why we put it inside a common directory.

export type OGProperties = {
  locale: "en_US" | "fr_FR"; // https://saimana.com/list-of-country-locale-code/
};

const OpenGraph = ({ properties }: { properties: OGProperties }) => {
  const { locale } = properties;

  return (
    <>
      <meta property="og:locale" content={locale} />
    </>
  );
};

export default OpenGraph;

We will go step-by-step, we declared an `OGProperties` type and then used it to type the `properties` prop, as the first step we have a `locale` as a property.

Open Graph locale property is for telling the page locale, there's a link to all the available locales you can check to find yours.

The OpenGraph component's main purpose is to group a list of OG meta tags, then give them their values from the `properties` prop that it receives.

We made it a component in the first place because we will need it on multiple pages, and each page may have a different source of data, for example in a multi-language website we can have different locales for different pages.

In the same way, we added the `og:locale` meta tag we will add the rest of the needed `og:*` tags.

export type OGProperties = {
  locale?: "en_US" | "fr_FR";
  url: string;
  title: string;
  type: "article" | "website";
  description: string;
  site_name: string;
  image: {
    alt: string;
    type: string;
    url: string;
    width: string;
    height: string;
  } | null;
  author?: string;
  section?: string;
  modified_time?: string;
  published_time?: string;
  card: "summary" | "summary_large_image" | "app" | "player";
};

const OpenGraph = ({ properties }: { properties: OGProperties }) => {
  const {
    locale,
    url,
    site_name,
    title,
    type,
    description,
    author,
    section,
    image,
    modified_time,
    published_time,
    card,
  } = properties;

  return (
    <>
      <meta property="og:locale" content={locale || "en_US"} />
      <meta property="og:title" content={title} />
      <meta property="og:type" content={type} />
      <meta property="og:description" content={description || ""} />
      <meta property="og:url" content={url} />
      <meta property="og:site_name" content={site_name} />
      {type === "article" && (
        <>
          <meta property="article:author" content={author} />
          <meta property="article:section" content={section} />
          <meta property="article:modified_time" content={modified_time} />
          <meta property="article:published_time" content={published_time} />
        </>
      )}
      {image && (
        <>
          <meta property="og:image" content={image.url} />
          <meta
            property="og:image:secure_url"
            content={image.url.replace("http://", "https://")}
          />
          <meta property="og:image:width" content={image.width} />
          <meta property="og:image:height" content={image.height} />
          <meta property="og:image:alt" content={image.alt} />
          <meta property="og:image:type" content={image.type} />
          <meta name="twitter:image" content={image.url} />
        </>
      )}
      <meta name="twitter:card" content={card} />
      <meta name="twitter:url" content={url} />
      <meta name="twitter:domain" content="codersteps.com" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description || ""} />
      <meta name="twitter:site" content="@codersteps" />
      <meta name="twitter:creator" content="@abdessamadely" />
    </>
  );
};

export default OpenGraph;

Take a minute to read the OpenGraph component content, after that let me highlight the parts that may need a little explanation.

First, we have marked the `locale` as optional and provided it with a default of `"en_US"`, then we added other simple og:tags the same way we did with the locale property.

These are simple open graph tags types: *og:locale*, *og:title*, *og:type*, *og:description*, *og:url*, *og:site_name*, *og:image*. because the image is optional, we check for it, before adding the *og:image* related meta tags.

With each property, we used the same process, first adding the property the the `OGProperties` type, then extracting it using object destructuring, and finally adding it to the meta tags JSX.

When the *og:type* is equal to **article**, we add extra open graph meta tags related to the article: *article:author*, *article:section*, *article:modified_time*, *article:published_time*.

Whenever we add a new og meta tag, we extend the *OGProperties* type to include the new property that was added.

And at the end, we added Twitter-related open graph meta tags, which use the HTML meta tag with a `name` attribute instead of the `property` attribute.

Some value you can keep static like your domain name, twitter site (your website twitter account), or your own twitter account (creator).

You can always read more about this property from the mentioned blog post above, and you can always use your new knowledge to extend this component, but these are the most used open graph meta tags.

Building the useOpenGraph hook with Next.js

We could have used the component without the need of creating a hook for that, but it will be a little missy as our OpenGraph component take one little big object, which can make it a little hard to be reused in multiple places while maintaining the ease of making changes later on.

So to simplify our life and make the component easy to use in multiple places, we will create a helper hook, that will play the role of building the OpenGraph properties prop 😁.

Let's create a new file for our hook at `hooks/useOpenGraph.ts` then declare, and export the hook function.

import { useMemo } from "react";

type PageOgData = {};

const useOpenGraph = (data: PageOgData) => {
  const ogProperties = useMemo<{}>(() => {
    return {};
  }, []);

  return ogProperties;
};

export default useOpenGraph;

This is the basic structure of the `useOpenGraph` hook, we use the react `useMemo` hook to store the OpenGraph component properties.

The hook accepts a data prop of type `PageOgData` which is similar to the `OGProperties` type with some small differences like making some properties that can have default values optional.

The `useOpenGraph` takes some data, then use it to build and manage the OpenGraph component properties, and finally returns the properties object, to be passed to the OpenGraph component.

To create the `absUrl` function we will need the base url like `http://localhost:3000`, we can use it directly, but it will make out life pretty hard when we move to the production environment.

So we will add this value to the `.env.local` file, create a new file `.env.local`, then add to it the APP_URL env variable.

APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_URL=${APP_URL}

When we prefix an environment variable with *NEXT_PUBLIC_* next.js will expose it to be used publicity, in case we used our `absUrl` helper inside a component that runs on the client, then this will be helpful.

You can create a config file, to export an object with your configurations, like we did in the <a href="https://codersteps.com/articles/how-to-add-google-analytics-to-your-next.js-website" target="_blank">How to add Google Analytics to your Next.js website</a> article.

But it's not required for this article, to keep it simple we will use the `process.env` directly inside our helper.

export const absUrl = (path: string): string => {
  path = path.trim();
  if (path.startsWith("http")) {
    return path;
  }
  if (path.indexOf("/") === 0) {
    path = path.substring(1);
  }

  const appUrl =
    process.env.APP_URL ||
    process.env.NEXT_PUBLIC_APP_URL ||
    "http://localhost:3000";

  return `${appUrl}/${path}`;
};

The helper function is pretty straightforward, we accept a path, trim it to remove any extra spaces, then check if it's already an absolute path, by checking if it starts with `http`.

If the path is a relative path, we check to make sure it doesn't have a preceding slash, so we won't have double slashes like `http://localhost:3000//relative-path`

And finally we store out `APP_URL` into a constant and return a combination between the *appUrl* and the path.

Implementation of the useOpenGraph functionality

After we understood the purpose of our hook and added the needed helpers, its time to implement the full functionality.

import { useMemo } from "react";
import { absUrl } from "../core/helpers";
import { OGProperties } from "../components/common/OpenGraph";

type OGImage = {
  alt: string;
  type: string;
  url: string;
  width?: string;
  height?: string;
} | null;

type PageOgData = Omit<OGProperties, "image" | "card" | "site_name"> & {
  card?: OGProperties["card"];
  image: OGImage;
};

export const useOpenGraph = (data: PageOgData) => {
  const ogProperties = useMemo<OGProperties>(() => {
    return {
      url: data.url,
      title: data.title,
      type: data.type,
      author: data.author,
      site_name: "OpenGraph Article",
      description: data.description,
      image: data.image
        ? {
            type: data.image.type,
            url: absUrl(data.image.url),
            alt: data.image.alt || "",
            height: data.image.height || "720",
            width: data.image.width || "420",
          }
        : null,
      card: data.card || data.image ? "summary_large_image" : "summary",
      section: data.section,
      modified_time: data.modified_time,
      published_time: data.published_time,
    };
  }, [data]);

  return ogProperties;
};

export default useOpenGraph;

It's a simple react hook, by looking at it you can understand its purpose, and you may not see its added value now, but I think t's a good practice, this will allow you to do changes later without having to do the changes on each page it uses it.

For example, we made our `site_name` a static value, as its rarely that we do rename our website, Also we have made the `card` prop optional with a default value related to if we have an image or not.

We also use the `absUrl` to make sure that our image url is an absolute url, you can customize it to fit your use case, maybe you have to make some changes like adding prefix to your path like: `{url: absUrl(`/uploads/${upload.path}`)}`.

At this point, we should have a working open-graph setup with its own component and a helper hook. It's time to put it to use on the home page.

Open your `pages/index.tsx` file and do the following changes, then we'll explain the changes, they're not that complex.

import type { NextPage } from "next";
import Head from "next/head";
import OpenGraph from "../components/common/OpenGraph";
import { useOpenGraph } from "../hooks/useOpenGraph";
import { absUrl } from "../core/helpers";

const Home: NextPage = () => {
  const ogProperties = useOpenGraph({
    url: absUrl("/"),
    title: "OpenGraph Article", // Add you homepage title
    image: {
      // some default image preview for your website
      type: "image/jpeg",
      url: "/assets/images/ogImage.jpg",
      alt: "Image Alt",
    },
    description: "Your website description",
    type: "website",
  });

  return (
    <div>
      <Head>
        <title>OpenGraph with Next.js</title>
        <meta
          name="description"
          content="Article about OpenGraph with Next.js"
        />

        <OpenGraph properties={ogProperties} />
      </Head>

      <main>
        <h1>OpenGraph with Next.js</h1>
        <div>An empty page is a good page</div>
      </main>
    </div>
  );
};

export default Home;

First, we used the `useOpenGraph` helper hook to build the OpenGraph properties, which we'll be passed to the OG component.

After that inside the `Head` component, we add the `OpenGraph` component providing it with the properties we created using the useOpenGraph helper hook.

Finally, it's time to test, visit the home page on your browser, then _View Page Source_ and search for one of the OG meta tags that we have added like `og:title`.

In the same way, we used the OpenGraph component on the home page we will use it on the show post page, with a little different input like the `og:type` will be an _article_ instead of _website_ and we need to pass the article related data.

Open your `pages/posts/[id].tsx` file and do the following changes, then we'll explain the changes.

import Head from "next/head";
import Image from "next/image";
import { GetServerSideProps, NextPage } from "next";
import OpenGraph from "../../components/common/OpenGraph";
import useOpenGraph from "../../hooks/useOpenGraph";
import { absUrl } from "../../core/helpers";

type Post = {
  id: number;
  title: string;
  thumbnail: string;
  description: string;
  content: string;
};

interface ServerSideProps {
  post: Post;
}

const ShowPost: NextPage<ServerSideProps> = ({ post }) => {
  const ogProperties = useOpenGraph({
    url: absUrl(`/posts/${post.id}`),
    title: post.title,
    image: {
      // The post thumbnail
      type: "image/jpeg", // replace it with a dynamic thumbnail mimetype
      url: post.thumbnail,
      alt: post.title,
    },
    description: post.description,
    type: "article",
    author: "Article Author",
    section: "Article Category",
    modified_time: "Post Updated Time",
    published_time: "Post Published Time",
  });

  return (
    <>
      <Head>
        <title>{post.title}</title>

        <OpenGraph properties={ogProperties} />
      </Head>

      <main>
        <article>
          <h1>{post.title}</h1>

          <Image
            width={720}
            height={420}
            src={post.thumbnail}
            alt={post.title}
          />

          <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
        </article>
      </main>
    </>
  );
};

export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
  params,
}) => {
  if (!params || typeof params.id !== "string" || isNaN(+params.id)) {
    return { notFound: true };
  }

  const posts: Post[] = require("../../data/posts.json");

  const postId = +params.id;
  const post = posts.find((p) => p.id === postId);
  if (!post) {
    return { notFound: true };
  }

  return {
    props: {
      post,
    },
  };
};

export default ShowPost;

The same thing here, we build the ogProperties and then added the OpenGraph component to the Head.

The only difference is that we used dynamic data, for example, the posts data structure that we use doesn't have many properties to use but, in a real-life situation, you may want to make everything dynamic like the image mime-type, update and publish dates, etc...

You can now navigate to `http://localhost:3000/posts/3` then _View Page Source_ and search for something like `article:author`.

In this article, we have added OpenGraph meta tags to a fresh Next.js website, we used two pages as examples: *home page* and *show post page*, in order to demonstrate how to add the OpenGraph tags to multiple types of pages.

Source code is available at: <a href="https://github.com/codersteps/nextjs_open_graph" rel="nofollow">https://github.com/codersteps/nextjs_open_graph</a>.

You will learn exactly how to add OpenGraph to your Next.js website by using a reusable component and a helper hook and how to reuse it on multiple pages.

In this article, we will add OpenGraph to a new Next.js website, so it's easy to grab the knowledge that will enable you to add it to your website and adapt it to your or your client's situation.


We will start as usual by creating a new Next.js project, I like to use typescript on all of my projects. To create a new project I will use this command <code>npx create-next-app@latest --typescript open_graph</code>.


After it's done go and open the project inside your favorite code editor mine is vscode, then start the dev server with <code>npm run dev</code> and check it inside the browser you should see the default Next.js home page.


Before getting started with creating a component to add the open graph meta tags let's first learn a little bit about OpenGraph and its properties which we'll be adding to our Next.js website.


OpenGraph is used to make web pages rich when shared on social media, it enables you to control how it looks. Like page title, preview image, url, and so on.


When a page doesn't include the OpenGraph protocol and it's shared for example on Facebook, Facebook will try to pick some default values like the first image on that page, the page description, etc.


To be able to control the preview displayed information when our web page is shared on social, we use meta tags to set those values.


Explore Next.js Articles

Learn Next.js with practical articles

How to add cookie consent banner with Next.js and Tailwind CSS

Next.js

How to set up and structure your full-stack Next.js application

Next.js

How to add OpenGraph to your Next.js website

Next.js

How to add a Sitemap to your Next.js website

Next.js

How to add Google Analytics to your Next.js website

Next.js

Next.js file upload progress bar using Axios

Next.js

How to build a file uploader with Next.js and formidable

Next.js

How I Integrated a Simple CI/CD for Next.js website on a VPS

Next.js