April 2nd, 2022

useRouter in SEO Component　

SEO.tsx

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

11    </Head>
12  );
13};
14
15export default OG;

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

1import { useRouter } from"next/router";
2constrouter = useRouter();
3return (
4{router.asPath}
5);

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

使い方は

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

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