ゴール

import type { MetaFunction } from '@remix-run/node'; // or cloudflare/deno

export const meta: MetaFunction = () => {
  return {
    title: 'Something cool',
    description: 'This becomes the nice preview on search results.',
    'og:url': `${サイトのURL}`, // こいつを動的に取得したい
  };
};

こんな感じでMetaFunctionの中で OGP の設定をするときにサイトの URL を動的に取得したい！

環境変数とかで URL を定義してしまってもいいけれど、動的に取得できたらありがたいなぁという願望。

ライブラリのバージョン

• @remix-run/node: v1.19.3

試行錯誤

// 公式より引用
export const meta: MetaFunction = ({ location }) => {
  const searchQuery = new URLSearchParams(location.search).get('q');
  return [{ title: `Search results for "${searchQuery}"` }];
};

locationという引数は取れるようだが、

// locationの中身
 {
  pathname: '/news',
  search: '',
  hash: '',
  state: null,
  key: 'default'
}

pathnameだけで、originまでは取得できず

結論

loaderのrequestパラメーターから取得する。

https://remix.run/docs/en/main/route/loader#request

requestパラメーターから url が取得できるので

// loader
export async function loader({ request }: LoaderArgs) {
  const url = new URL(request.url);
  const origin = url.origin;

  return json({
    origin,
  });
}

// meta
export const meta: MetaFunction = ({ data }) => {
  const { origin } = data;

  return {
    'og:url': origin,
  };
};

こんな感じでできた。

最後に

MetaFunctionは内部でごちゃごちゃやる感じじゃなくて、単に情報を meta タグでレンダリングするだけの役割なんですね。ごちゃごちゃするのはloaderの役目っぽい。

では

Bye