Next Js Page Api Template with SEO Fields

PHOTO

Fri Jul 07 2023 06:59:00 GMT+0000 (Coordinated Universal Time)

import { BASE_PATH } from "../helper/utils";
import {useRouter} from "next/router";
import Head from "next/head";
import { InnerBanner } from "../components/ui";

import { uid } from '../helper/utils';
import { fetchPageData, fetchLocations } from "../helper/http";

// import InnerBanner from '../components/ui/inner-banner/inner-banner'
import RaiseTicket from '../components/connect-with-us/raise-ticket-sec';
import EscalationMatrix from '../components/connect-with-us/escalation-matrix-sec';

const ConnectWithUs = ({ data }) => {
    const router = useRouter();
  const path = BASE_PATH + router.asPath;
//   console.log({...data.page.content.unit2})
    return (
        <>
            {
        data && data.page ? (
          <>
            <Head>
                {
                    data.page.seo && data.page.seo.metaTitle ?
                    <>
                        <title>{data.page.seo.metaTitle}</title>
                        <meta name="twitter:title" content={data.page.seo.metaTitle} />
                        <meta property="og:title" content={data.page.seo.metaTitle} />
                        <meta name="twitter:title" content={data.page.seo.metaTitle}/>
                    </> : null
                }

                {
                    data.page.seo && data.page.seo.metaDescription ?
                    <>
                        <meta name="description" content={data.page.seo.metaDescription} />
                        <meta name="twitter:description" content={data.page.seo.metaDescription} />
                        <meta property="og:description" content={data.page.seo.metaDescription} />
                        <meta name="twitter:description" content={data.page.seo.metaDescription} />
                    </> : null
                }
                
                {
                    data.page.seo && data.page.seo.metaKeywords ?
                    <meta name="keywords" content={data.page.seo.metaKeywords}/>: null
                }

                {/* OG tags */}
                <meta property="og:site_name" content='NMIMS' />
                <meta property="og:type" content="website" />
                <meta property="og:url" content={path} />
                <meta property="og:image" content={`/images/logo-og.png`} />

                {/* twitter tags */}
                <meta name="twitter:card" content="summary" />
                <meta name="twitter:site" content="@NMIMSGlobal"/>
                <meta name="twitter:url" content={path}/>
                <meta name="twitter:image" content={`/images/logo-og.png`} />
                <meta name="twitter:app:country" content="IN" />

                {/* <link rel="canonical" href={path} /> */}

                </Head>

                <main>
                {
                    data && data.page.content && data.page.content.banner ? (
                    <InnerBanner
                        image={data.page.content.banner.image}
                        mobImage={''}
                        topText={` `}
                        title={data.page.content.banner.heading}
                        smallBanner={true}
                        titleCenter={true}
                        customClass={`mb-0`}
                    >
                    </InnerBanner>
                    ): null
                }
                {
                   
                    <RaiseTicket data={data.page.content.unit2}/>
                }
                {
                    <EscalationMatrix data={data.page.content.unit3} matrixLevels={data.escalationMatrix} />
                }
                 
                </main>
            </>
            ) : null
            }
            
        </>
    )
}

export default ConnectWithUs


// for production
export const getStaticProps = async (context) => {
    const data = await fetchPageData('connect-with-us');
    
    if( !data ){
      return {
        notFound: true
      }
    }else{
      return {
        props: {
          data: data.record
        },
        revalidate: 1800
      };
    }
  }

COPY