created: 2020-11-20T09:50:25.000Z

nextjsのSSGでhtmlでredirect

nextjsのSSGでブログを作っているが、技術系以外の記事もこのブログで管理したくなったので今ある技術系の記事を /tech 配下のパスにもってきたいということになった。

301でリダイレクトできればいいのだが、サーバはSSGで生成したhtmlをサーブしているだけだし、そこまでSEO的なページランクが惜しいわけでもないのでもう meta refresh でいいかなということにした。

MetaRefreshRedirect

meta refresh をしてくれる react コンポーネント次のようになった。

import React from "react";
import Head from "next/head";

export const MetaRefreshRedirect: React.FC<{ url: string }> = ({ url }) => (
  <Head>
    <link rel="canonical" href={url} />
    <meta httpEquiv="Refresh" content={`0; URL=${url}`}></meta>
  </Head>
);

Head

nextjsではヘッダにタグを入れたいときは Head コンポーネントを使う。

next/head | Next.js

nextでは自動的に有象無象のjsファイルをhead内でロードしてくれるが、そこに触らないで済むためのコンポーネント。

meta/httpEquiv="Refresh"

本当は301リダイレクトのほうがいいのだが、html内にこれを書くとブラウザが指示したページに遷移してくれる。

HTTP のリダイレクト - HTTP | MDN

link rel="canonical"

本来はサイト内に違うURLで同じページがある場合に使うタグだが、つけておくとよいという記事を見つけたのでつけた。かなり古い記事なので実際は分からないが、「このページの本来のURLはここだよ!」という意味付けができるのは意図とあっている。