absoluteUrl の使い方 備忘録

環境

Node.js v15.3.0
Next.js v10.2.0

やりたいこと

• fitch で JSON を読み込み
• 読み込んだデータを画面に表示
• カレントホスト名はハードコードしたくない

結論

以下の様にコード化する。

//@see : https://www.npmjs.com/package/next-absolute-url
import absoluteUrl from 'next-absolute-url';

export default function Home() {
    // データソースのURL
    const dataURL = '/data.json';

    // データソースの相対URL
    const relativeURL = '.' + dataURL;

    // Get Request のインスタンス化
    // @see: https://developer.mozilla.org/ja/docs/Web/API/Request
    const request = new Request( relativeURL );

    // Request から、プロトコル｜インターネットホスト名｜オリジンを取得
    // @return {
    //     protocol: string;
    //     host: string;
    //     origin: string;
    //}
    const { origin } = absoluteUrl( request );

    // オリジンとデータソースのURLをくっつける（絶対URL化）
    const url = origin + dataURL;

    // native fitch() を call。
    fitch( url ).then(res => res.json())
    //@TODO: 以下、描画処理
}

参考リンク