ブログのスタイルを修正してついでにnextjsのバージョンを12.2にあげた

2022-08-01 16:36:27

本当にやらないといけないことを置いといて、スタイルの修正と画像が表示できるように修正した。

スタイルの修正は、 @contentful/rich-text-react-renderer を使用しているので、pタグとulタグの時の表示の修正をした。

const renderOptions = {
  renderNode: {
    :
    :
    [BLOCKS.PARAGRAPH]: (node: any, children: any) => {
      if (
        node.content.length === 1 &&
        node.content[0].marks.find((x: any) => x.type === "code")
      ) {
        return <div className="px-6 py-3 my-4 bg-gray-700 text-blue-100 font-mono rounded-lg overflow-scroll"><pre>{children}</pre></div>
      }
      return <p className='my-6'>{children}</p>;
    },
    [BLOCKS.UL_LIST]: (node: any, children: any) => {
      return <ul className='list-disc pl-12'>{children}</ul>
    },
    :
    :
  }
}

画像は素直に実装しても表示させることができなかった。ローカルでは表示できるけどデプロイすると表示されない問題が発生した。サーバーで表示しようとすると INVALID_IMAGE_OPTIMIZE_REQUEST と表示される画面が表示される。

ここで同じ問題について会話していて、結局Next.jsを通すとうまく動かなかったので直接ContentfulのURLを使うように修正した。

// これを設定する
const loaderProp = ({ src }: any) => { return src }

<Image
      src={`https://${node.data.target.fields.file.url}`}
      height={node.data.target.fields.file.details.image.height}
      width={node.data.target.fields.file.details.image.width}
      alt={node.data.target.fields.description}
      layout="responsive"
      loader={loaderProp}
/>

画像の表示成功！