【Nest.js】ふんわりNext.js 13の理解

10月25日の深夜に「Next.js Conf 2022」が開催されて、Next13が発表されたので確認する

nextjs.org

/appディレクトリ いままでは/pageディレクトリ配下にファイルをおくと設定不要で階層に応じたルーティングが行えるが、同じ用途で新たに/appディレクトリが追加された

この/appディレクトリに配置するとルーティングだけでなく以下の機能が使えるようになる

• Layouts
• Server Components
• Streaming
• Suspense for Data Fetching

※ちなみに既存の/pagesディレクトリによるルーティングと共存できるため、段階的な導入が可能

Server Components と Streaming は以前調べた

uga-box.hatenablog.com uga-box.hatenablog.com

Layouts はアプリケーション全体を通して共通するレイアウトでのデータフェッチを可能にするもので、ナビゲーション間で状態を維持し、コストのかかる再レンダリングを回避することができる

ファイル名の規則としてlayout.jsを作るとそれが、レイアウトコンポーネントになる

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

Suspense for Data Fetching はこれまでのgetStaticPropsやgetServerSidePropsに置き換わるデータフェッチの仕組みでReact.useとカスタムfetchを使う

// app/page.js
import { use } from 'react';

async function getData() {
  const res = await fetch('...');
  const name: string = await res.json();
  return name;
}

export default function Page() {
  // This value is fully typed
  // The return value is *not* serialized
  // so you can return Date, Map, Set, etc.
  const name = use(getData());

  return '...';
}

あとは、他にもいかが紹介されているが、これは後日にする

• Turbopack
• next/image
• next/link
• など