tips chips

日々の作業で出てきた技術メモの切れ端を置いておくページ

Next.js 13.3出たのでみてみた

Next.js 13.3が出たのでリリースノートを読んだりアップデートしたりした

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/blog/next-13-3

File-Based Metadata API

新たなファイル命名規則に以下が追加された

  • opengraph-image.(jpg|png|svg)
  • twitter-image.(jpg|png|svg)
  • favicon.ico
  • icon.(ico|jpg|png|svg)
  • sitemap.(xml|js|jsx|ts|tsx)
  • robots.(txt|js|jsx|ts|tsx)
  • manifest.(json|js|jsx|ts|tsx)

それぞれファイルを置いて値を返すとmetaタグをheadに追加してくれる（従来通り静的な値をセットしたいだけならpageやlayoutでmetadataオブジェクトをexportする形でもOK）

例えばこのサイトだと、sitemapやOGP画像が動的生成なのでこれに移行した。

Dynamic Open Graph Image Generation

  • 元々@vercel/ogとして提供されていたやつがNext.js本体に入った?(多分)
  • OGP画像の生成などを動的におこなってレスポンスとして返せる

https://github.com/uutarou10/tips-chips/blob/next13_3/app/(default)/p/[id]/opengraph-image.tsx

Static Export for App Router

  • appディレクトリでもstatic exportができるようになった
  • 前述のopengraph-imageやRSCにも対応

Parallel Routes and Interception

Parallel Routes

routeのディレクトリに @というprefixをつけるとslotを作ることができる

dashboard ├── @user │ └── page.js ├── @team │ └── page.js ├── layout.js └── page.js

このようにして

// app/dashboard/layout.js export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

こうする。

例えばEditとViewモードを切り替えられるとか、ログインと非ログインで別のコンポーネントを出したいとか、ブログサービスで記事書いた人とそれ以外の読む人で別ページを出したいとかそういうケースで使えそう？

Intercepting routes

よく見る、クライアントサイドで遷移すると特定のページの上にモーダルが載っかるみたいなやつを作れる機能

/feedからクライアントサイドで遷移すると、/feedの画面に重ねる形で/photo/123を表示、/photo/123を直接開くと通常のページとして開くみたいな。

確かにブラウザのURLを適当な形にしつつ、今までのroutingで作るのは結構大変そう。

そのほか

個人的に興味あるやつの抜粋

  • app routerでもroute announce(クライアントサイドでのページ遷移時にスクリーンリーダーに戦意を伝える)に対応した
  • headファイルは使えなくなったのでpageやlayoutでmetadataオブジェクトをエクスポートする形式に書き直す必要がある
  • npx create-next-app@latest --tailwindでtailwind入りでスタートできるようになった
  • https://beta.nextjs.org/docs/routing/route-handlers Route HandlerがHTTPメソッドごとの関数をエクスポートするのに対応した
    • if(request.method === 'POST')とかやらなくてOK
  • useParams hookが追加された https://beta.nextjs.org/docs/api-reference/use-params
  • app/not-found.jsで404ページを作れるようになった

実際このサイトをアップデートしてみた

  • アップデート前: 13.1.1
  • npm i next@latest react@latest react-dom@latestを実行
  • とりあえずは動いたけどhead.tsxの内容が当たっていなくてtitle/faviconがデフォルトに戻った
    • 13.2の時点でhead.tsxがdeprecated、13.3からは削除されたため
  • layout.tsxからmetadataをexportするようにして対応
    • api route + @vercel/og で作っていたog:image用の画像をopengraph-image.tsxに移植 加えてog:imageは勝手にセットしてくれるようになったのでその部分を削除
    • api routeで作っていたsitemap生成をmetadata.tsへ移植

ひとまずここまでやれば元通り動いている(多分)

現時点ではまだmainにマージしていない

https://github.com/uutarou10/tips-chips/pull/7