Zenn
🗣️

【個人開発】コードレビューサービスKanon CodeでOGP設定するときにハマったこと

2021/09/14に公開
Next.js
個人開発
Open Graph protocol
#
コードレビュー
Kanon Code
tech

【個人開発】コードレビューサービスKanon CodeでOGP設定するときにハマったこと

フロント：Next.js
ホスティング：vercel

この記事ではOGPの説明は割愛します。

参考記事一覧

Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する
nextjsのISRを使うときのfallback指定について理解するまでの話
fallbackに関して【公式】

下調べが足りなかった箇所

  • OGPで表示される画像の拡張子
  • OGPで表示される画像の最小サイズ
  • fallbackの挙動についての理解

OGPに関すること

これは自分がドキュメントを読むのが遅かったです。
まずドキュメント
まずドキュメント
まずドキュメント
大切なことなので3回言いました。

fallbackの挙動

fallbackの説明をする前にまずはSSGです。
SSGは事前に htmlファイルをレンダリングします。
クライアントは、事前にレンダリングされたhtmlをただ表示させるだけです。

こちらがSSGに設定するコードです。
まずエラーになっていたコードがこちらです。

import Head from 'next/head'

type Props = {
  user: UserType
}

const IndexPage = (props: Props) => {
  const user = props.user
  return (
    <Head/>
    // この中でuserを使う
  )
}

export const getStaticPaths = async () => {
  return {
    paths: [],
    fallback: true,
  };
};

export const getStaticProps = async (props: any) => {
  const result = await sameApi();
  return {
    props: {
      user: result.data.user,
    },
    revalidate: 30,
  };
};

export default IndexPage;

要らない部分は省略していますが構成はこんな感じです。
このソースコードをbuildすると以下のようなエラーが吐かれます

TypeError: Cannot read property 'user' of undefined

このエラーを見てSSGってgetStaticPathsとgetStaticPropsの実行後にbuildされるんじゃないの？と思いました。
原因はfallback: trueでした。

fallbackとは

fallbackでは、SSGで生成されていないパスにアクセスした際の挙動の設定ができます。

false: 404を返す
true: CSRに近い動きをする。データ取得を要する部分以外がレンダリングされてレスポンスされる
blocking: SSRされる。サーバー側でレンダリングしてレスポンスする

そして、このfallbackをtrueにした場合はpropsが空になるのです。

In the “fallback” version of a page:
The page’s props will be empty.
Using the router, you can detect if the fallback is being rendered, router.isFallback will be true.

https://nextjs.org/docs/basic-features/data-fetching#fallback-true

なぜ空になるのかは恐らくこの部分だと思います。

The paths that have not been generated at build time will not result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path (see “Fallback pages” below for details).
ビルド時に生成されなかったパスは、404ページにはなりません。代わりに、Next.jsはそのようなパスへの最初のリクエストに対して、「フォールバック」バージョンのページを提供します（詳細は後述の「フォールバックページ」を参照）。

つまり用意されていない場合は、fallbackページを返したいためbuild時にデータ取得を要する部分以外をレンダリングしているのだと思います。

なので、propsが空になるんだろうと思います。

fallbackをblockingにして対処しました。

まずドキュメント
まずドキュメント
まずドキュメント

まとめ

不具合が起きたときは何が問題になっているかの切り分けが非常に大切だと感じます。
ドキュメントを読んだところで、何が問題になっているのかが分からないと検討のつけようがないので。

またkanon Codeでは、Next.js node.js pythonのコードレビューを受け付けております。
基本使用料はもちろん無料で、コードレビューには金額を設定して販売することも可能です。

また、Kanon Codeでは現在ユーザーインタビューを実施しています。
ユーザーインタビューに答えていただけた方にはお礼として、最大¥2000のAmazonギフト券をプレゼントしております。
十分な金額ではございませんが、技術書だったり日用品の購入の足しにしていただければと思います。

Kanon Code
ユーザーインタビューお問い合わせ

Discussion