How to Create a TSX HOC next-seo component

As Md Habibullah

2 min read

·

Jan 27, 2023

--

Listen

Share

Here is an example of a Higher Order Component (HOC) written in TypeScript and using JSX (TSX) that uses the next-seo library to set SEO information for a page:

Interface file

export type ArticleProps = {
  title?: string;
  titleTemplate?: string;
  noindex?: boolean;
  nofollow?: boolean;
  robotsProps?: AdditionalRobotsProps;
  description?: string;
  canonical?: string;
  mobileAlternate?: {
  media: string;
  href: string;
  };
  languageAlternates?: {
    hrefLang: string;
    href: string;
  }[];
  openGraph?: OpenGraph;
  facebook?: {
    appId: string;
  };
  twitter?: Twitter;
  additionalMetaTags?: ReadonlyArray<MetaTag>;
  additionalLinkTags?: {
    rel: string;
    href: string;
    sizes?: string;
    media?: string;
    type?: string;
    color?: string;
    keyOverride?: string;
    as?: string;
    crossOrigin?: string;
  }[];
  useAppDir?: boolean;
  ads?: {
    id?: string;
    slogan?: string;
    canonical?: string;
  }[];
  views?: number;
  loves?: number;
  clickes?: number;
  comments?: number;
  children?: never;
};

export type WithSeoProps = {
    [x: string]: string;
}
```

HOC code

import { NextSeo } from 'next-seo'
import { FunctionComponent } from 'react'

import { ArticleProps, WithSeoProps } from '../components/Utils/Intf'

const withSeo = (WrappedComponent: FunctionComponent<WithSeoProps>, seoProps: ArticleProps) => {
  const WithSeo: FunctionComponent<WithSeoProps> = (props) => (
    <>
      <NextSeo {…seoProps} />
      <WrappedComponent {…props} />
    </>
  )
  return WithSeo
}

export default withSeo
```

Line by line Explanation

1. import { NextSeo } from 'next-seo': This line imports the NextSeo component from the next-seo library, which is used to set SEO information for a page.
2. import { FunctionComponent } from 'react': This line imports the FunctionComponent type from the React library, which is used to define the wrapped component as a functional component.
3. import { ArticleProps, WithSeoProps } from '../components/Utils/Intf': This line imports two interfaces, ArticleProps and WithSeoProps, from the Intf file in the Utils folder of the components folder. These interfaces are used to describe the properties of the wrapped component and the seoProps that are passed to the HOC.
4. const withSeo = (WrappedComponent: FunctionComponent<WithSeoProps>, seoProps: ArticleProps) => {: This line defines a function withSeo which takes two arguments, WrappedComponent and seoProps. WrappedComponent is defined as a functional component with the WithSeoProps interface. seoProps is defined with the ArticleProps interface.
5. const WithSeo: FunctionComponent<WithSeoProps> = (props) => (: This line defines a new constant WithSeo which is also a functional component that takes props as its parameter.
6. <NextSeo {...seoProps} />: This line uses the NextSeo component and spread operator to pass the seoProps to the NextSeo component.
7. <WrappedComponent {...props} />: This line renders the WrappedComponent and passes the props to it as well.
8. return WithSeo: This line returns the WithSeo component
9. export default withSeo: This line exports the withSeo function, which can be imported and used in other files.