DATA-WORLD-BLOG

Next.js13.3

👤horomi

Next.js 13.3でサポートされたコードを取り入れる

Vercelのキャッシュの削除を発見したから試してみた

image block

ブラウザが古いとか?

image block
npx browserslist@latest --update-db

planオーバーっていうオチ:

image block
  • 重なっている背景を削除して節約

それでも変化せず

Next.jsのバッチバージョンが合わないのでは!?と思い、Next.jsのリリースタグから13.3の最終が13.3.5だということを知り、13.3.1を13.3.5に変更

image block

limitって…独自ドメインじゃないからとかも関係する!?

試しにサブドメイン当ててみる

limitのエラーが消えた👀


※ 以降、このエラーを「SIGTERMエラー」と命名する

image block

Redeployしたら通ったものの、今度はlimitエラーが再び….

image block

🤔
そうか…通ればlimitエラーが登場するのか…裏を返せばちゃんとOpenGraphは反応しているということだ….

散らかりそうだからDWBブログで検証

limit対策候補としてfont。Nextでサポートされたっていう設定の仕方で試してみよう….

image block

これが近いかな

Error: The Edge Function "api/og-image" size is 1.1 MB and your plan size limit is 1 MB. は、ファイルサイズなのかEdge Functionサイズなのかはハッキリしないってことか。。。

image block

next/fontにしてpush

SIGTERMエラー

時間差でredeployをし続けて3回目で18エラーが2エラーに減った

image block

一旦フォント設定をOFFにしてdeployできるか試してみたら….

SIGTERMエラー

ちょっと細かいけど修正

import { NextRequest } from 'next/server'
import { ImageResponse } from 'next/server'

↓

import { NextRequest, ImageResponse } from 'next/server'

そしたら

SIGTERMエラーが1件に減った

image block

fontのファイルの位置がpublicに入れることでパフォーマンス向上につながるってChatGPTが言ってたから…試してみる

image block

エラーから気づいたのは…

image block

publicだからといってapiディレクトリのファイルはプロジェクトルートからパスを記述できないっぽいから、フォントをapiディレクトリに入れてなるべく近くにすることにした。

それに加えてぐださんに作ってもらった軽量化版fontを導入

image block

通った\(^o^)/

OpenGraphの様子は…変化なく

/

以外は動いている⭐

メンテナンス用Repository(zutto2)で整ったpushをしとく

  1. next/serverの複数記述版import
  2. fontファイルをapiディレクトリに移動
    1. ここまでで通るか試してみたがやっぱlimitに引っかかってた….
  3. 軽量font差し替え
    1. limit引っかかった….やはりnext/font必要か
  4. next/font対応
image block

ここまでのPush履歴

DWB:

ぐださん!ありがとう〜〜〜〜〜 🎉

zutto2: