Next.js 13.3出たのでみてみた
Next.js 13.3が出たのでリリースノートを読んだりアップデートしたりした
日々の作業で出てきた技術メモの切れ端を置いておくページ
Next.js 13.3が出たのでリリースノートを読んだりアップデートしたりした
新たなファイル命名規則に以下が追加された
opengraph-image.(jpg|png|svg)twitter-image.(jpg|png|svg)favicon.icoicon.(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画像が動的生成なのでこれに移行した。
https://github.com/uutarou10/tips-chips/blob/next13_3/app/(default)/p/[id]/opengraph-image.tsx
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モードを切り替えられるとか、ログインと非ログインで別のコンポーネントを出したいとか、ブログサービスで記事書いた人とそれ以外の読む人で別ページを出したいとかそういうケースで使えそう？
よく見る、クライアントサイドで遷移すると特定のページの上にモーダルが載っかるみたいなやつを作れる機能
/feedからクライアントサイドで遷移すると、/feedの画面に重ねる形で/photo/123を表示、/photo/123を直接開くと通常のページとして開くみたいな。
確かにブラウザのURLを適当な形にしつつ、今までのroutingで作るのは結構大変そう。
個人的に興味あるやつの抜粋
npx create-next-app@latest --tailwindでtailwind入りでスタートできるようになったapp/not-found.jsで404ページを作れるようになったnpm i next@latest react@latest react-dom@latestを実行ひとまずここまでやれば元通り動いている(多分)
現時点ではまだmainにマージしていない
if(request.method === 'POST')とかやらなくてOK