April Saturday,2nd 2022: AM

useRouter in SEO Component　

SEO.tsx

const OG = ({ title, description }: StProp) => {
  const router = useRouter();
  return (
    <Head>
      <title>{title}</title>
      <meta property="og:title" content={title} />
      <meta property="description" content={description} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={`https://og-image-sw.vercel.app/${title}.png`} />
      <meta property="og:url" content={`https://sou-web.net${router.asPath}`} />

    </Head>
  );
};

export default OG;

Next.jsでページのURLを取得するには次のようにuseRouterを使って取得します。

import { useRouter } from"next/router";
constrouter = useRouter();
return (
{router.asPath}
);

ですが全てのページでこの処理を書くのはいささか冗長的なのでSEO(Metaタグ)コンポーネントに埋め込んでみました。これで全てのページごとにconst router = useRouter();を記述する必要がありません。

使い方は

<OG title="404 - Sou Watanabe"description="Erorr URL"/>

として各ページのLayoutタグもしくはdivタグの次に上の渡し方で記述してあげればURLが取得できています。