Next.js 13.3個人まとめ

File-Based Metadata API

ページごとにメタデータがより詳細に設定できるようになった

app
├── favicon.ico
├── layout.js
├── page.js
└── about
    ├── opengraph-image.jpg
    └── page.js

Dynamic Open Graph Image Generation

前に発表されていたOG画像の動的生成のやつが外部プラグインなしに実現可能になったっぽい

import { ImageResponse } from 'next/server';

export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';

export default function og() {
  return new ImageResponse();
  // ...
}

Static Export for App Router

appディレクトリでStaticなサイトやSPAサイトをexportできるようになったっぽい

then later optionally upgrade to use Next.js features that require a server.

というのがよくわからない
後にサーバーを必要とする機能を追加したくなった時も柔軟にできるよ

みたいなニュアンスかな？

Parallel Routes and Interception

Parallel Routes

一つのviewだけど、@で出し分けすることができる

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

export default async function Layout({ children, user, team }) {
  const userType = getCurrentUserType();

  return (
    <>
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

Intercepting routes

別のページを同じview内でレンダリングできる

feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

(..)みたいになっているところで、どのパスのページにアクセスするかが選べる
上記例の場合、feedページ内でモーダルを開いた時に、photoページの内容を参照してレンダリングさせることができるんだと思う

ざっとみた総評

appディレクトリの改善に本気。。

プロジェクトで採用することはまだまだ先になるだろうけど、

引き続き 👀する部分

• サーバーコンポーネント周り
  • エッジサーバー上でファイルやコンポーネントを作り上げ、ストリーミング配信する野望を叶えるために引き続き動きそう
  • 着実に一つ一つ解消して行っているというイメージ
• Router周り
  • Dashboard系などユースケースに応じて新しい機能を作ってそう
    • どんどん強い機能になっていってるけど、、みんなついていけるのかな？🤯