Contentfulで作るコーポレートサイト

module.exports = () => {
  // Preview Modeが無効の場合はexportする
  if (process.env.NEXT_PUBLIC_PREVIEW_MODE === "false" || process.env.NEXT_PUBLIC_PREVIEW_MODE === undefined) {
    return {
      output: "export",
    };
  }

  // Preview Modeが有効の場合はstandaloneで出力する
  return {
    output: "standalone",
  };
};

  // SSGの場合は404ページを表示する
  if (
    process.env.NEXT_PUBLIC_PREVIEW_MODE === undefined ||
    process.env.NEXT_PUBLIC_PREVIEW_MODE === "false"
  ) {
    return notFound();
  }

 // bodyの中にある画像のURLを取得する
  const images = post?.fields.body?.content
    .filter((content) => content.nodeType === "embedded-asset-block")
    .map((content) => {
      return {
        imageId: content.data.target.sys.id,
        imageUrl: content.data.target.fields.file.url,
      };
    });

const imageUrl = images?.find((image) => image.imageId === node.data.target.sys.id)?.imageUrl;
// プレビュー環境下(imageUrlが存在する) の場合
if (isPreview && imageUrl && node.data?.target) {
  const { description, file } = node.data.target.fields;
  return (
    <div className={styles.embeddedImage}>
      <Image
        src={file?.url ? file.url : "https://" + imageUrl}
        alt={description}
        quality={60}
        priority={true}
        width={800}
        height={600}
        style={{
          maxWidth: "100%",
          height: "auto",
        }}
      />
    </div>
  );
}

export async function getMetaTags(
  urlData: string[] | undefined
): Promise<MetaTag[] | undefined> {
  if (urlData == undefined) {
    return;
  }

  return await Promise.all(
    urlData.map(async (url) => {
      const urlHostname = new URL(url).hostname;

      // ホスト名で分岐
      switch (urlHostname) {
        case "www.youtube.com": {
          const videoId = new URL(url).searchParams.get("v");

          // videoIdが規定の形式になっているかチェック
          if (!videoId?.match(/[a-zA-Z0-9_-]*/)) {
            return {
              url: url,
              error: true,
            };
          }

          return {
            url: url,
            serviceName: "YouTube",
            embed: videoId,
          };
        }
        case "x.com":
        case "twitter.com": {
          const postId = new URL(url).pathname.split("/")[3];

          // 投稿IDが規定の形式になっているかチェック
          if (!postId) {
            return {
              url: url,
              error: true,
            };
          }

          return {
            url: url,
            serviceName: "X",
            embed: postId,
          };
        }
        case "speakerdeck.com": {
          const res = await fetch(
            `https://speakerdeck.com/oembed.json?url=${url}`
          ).then((res) => res.json());

          if (res.error) {
            return {
              url: url,
              error: true,
            };
          }

          return {
            url: url,
            serviceName: "SpeakerDeck",
            embed: String(res.html),
          };
        }
        case "vimeo.com": {
          const res = await fetch(
            `https://vimeo.com/api/oembed.json?url=${url}`
          ).then((res) => res.json());

          if (res.error) {
            return {
              url: url,
              error: true,
            };
          }

          return {
            url: url,
            serviceName: "Vimeo",
            embed: String(res.html),
          };
        }
        case "www.linkedin.com": {
          // パス名から投稿IDを抽出
          const pathName = new URL(url).pathname.split("/")[3];

          // 投稿IDが規定の形式になっているかチェック
          if (!pathName.match(/^urn:li:(ugcPost|share):\d+$/u)) {
            return {
              url: url,
              error: true,
            };
          }

          const baseUrl = `https://www.linkedin.com/embed/feed/update/${pathName}`;
          return {
            url: url,
            serviceName: "LinkedIn",
            embed: `<div style="position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" src="${baseUrl}" loading="lazy" frameborder="0" title="LinkedIn" sandbox="allow-scripts"></iframe></div>`,
          };
        }
        default:
          try {
            const res = await fetch(url).then((res) => res.text());
            const dom = new JSDOM(res);

            // metaタグから，title, description, og:imageを取得
            const title =
              dom.window.document.querySelector("title")?.textContent;
            const description = dom.window.document
              .querySelector("meta[name='description']")
              ?.getAttribute("content");
            const ogImage = dom.window.document
              .querySelector("meta[property='og:image']")
              ?.getAttribute("content");

            return {
              url: url,
              title: title ? title : "",
              description: description ? description : "",
              ogImage: ogImage ? ogImage : "",
            };
          } catch (e: unknown) {
            if (e instanceof Error) {
              console.error(e.message);
            }
            return {
              url: url,
              error: true,
            };
          }
      }
    })
  );
}