DATA-WORLD-BLOG

Next.js 13.3

Next.js 13.3 introduces dynamic open graph images, advanced static exports, parallel routes and interception, OTEL support, and more.

https://nextjs.org

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

ブラウザが古いとか？

npx browserslist@latest --update-db

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

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

それでも変化せず

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

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

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

limitのエラーが消えた👀

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

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

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

API Reference: Turbopack | Next.js

Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.

https://nextjs.org

Getting Started: Font Optimization | Next.js

Learn how to optimize fonts in Next.js

https://nextjs.org

これが近いかな

Getting Started: Font Optimization | Next.js

Learn how to optimize fonts in Next.js

https://nextjs.org

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

next/fontにしてpush

SIGTERMエラー

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

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

SIGTERMエラー

ちょっと細かいけど修正

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

↓

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

そしたら

SIGTERMエラーが１件に減った

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

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

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

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

通った＼(^o^)／

OpenGraphの様子は…変化なく

/

以外は動いている⭐

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

DWB：

https://github.com

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

zutto2：

Next13.3 by herohoro · Pull Request #11 · herohoro/zutto2_easy-notion-blog

https://nextjs.org/blog/next-13-3 メンテナンスの過程を記事化 https://data.herohoro.com/blog/next13-3_limit

https://github.com