5分で予習する Next.js 「Layouts RFC」 2022/10/19 第1回LT練習会（仮）発表資料 5分で予習する Next.js 「Layouts RFC」 @kimizuy

自己紹介 ID: @kimizuy 株式会社 Gaji-Labo フロントエンドエンジニア 最近は React や TypeScript をメインで使っています。 https://github.com/kimizuy https://twitter.com/kimizuy 趣味: スプラトゥーン 3 5分で予習する Next.js 「Layouts RFC」 @kimizuy

そもそも Next.js とは React ベースのフレームワーク SSG、SSR、ISR 画像最適化 API Routes などのバックエンド側の拡張性もある Vercel と組み合わせれば設定不要でデプロイ可能＆Next.js の機能をフルサポート 5分で予習する Next.js 「Layouts RFC」 @kimizuy

Layouts RFC 「これまでの Next.js でもっとも大きな変更」 React18 の機能を引き出す目的 2022/10/25 のカンファレンスで Next13 の発表と一緒にリリースされる可能性が高い https://github.com/vercel/next.js/discussions/37136 RFC とは Request for Comments の略。開発者が提示した新機能の技術仕様に対して不具合や不 足する点がないか広くコメントを求めること。元々はインターネット関連技術の標準化 組織 IETF が策定し、定期的に発行している仕様文書のことを指す。 5分で予習する Next.js 「Layouts RFC」 @kimizuy

主な変更点 ルーティング 共有レイアウト 部分的なローディング 5分で予習する Next.js 「Layouts RFC」 @kimizuy

ルーティング Next.js はファイルシステムをベースにしたルーティング。 pages/index.js → / pages/blog/index.js → /blog pages/about.js → /about pages/blog/[slug].js → /blog/foo , /blog/bar 5分で予習する Next.js 「Layouts RFC」 @kimizuy

ルーティング 変更 フォルダ名が pages → app 、ページファイルは page.js に。 app/page.js → / app/blog/page.js → /blog app/about/page.js → /about app/blog/[slug]/page.js → /blog/foo , /blog/bar // app/page.js export default function Page() { return

Hello, Next.js!

} 5分で予習する Next.js 「Layouts RFC」 @kimizuy

ルーティング → フォルダがパスの定義、ファイル( page.js )がビューの定義に明確に役割が分けられた！ 5分で予習する Next.js 「Layouts RFC」 @kimizuy

共有レイアウト ヘッダーやフッター、サイドバーはページ間で再利用したい場合があります。そういったレ イアウトに関するコンポーネントをページ変更の際に再利用して状態を保持することで、画 面のチラつきの軽減やパフォーマンスの向上が見込めます。Layouts RFC ではより柔軟に共 有レイアウトの実装が可能になります。 これまでの書き方: // pages/_app.js import Layout from '../components/layout' export default function MyApp({ Component, pageProps }) { return ( ) } 5分で予習する Next.js 「Layouts RFC」 @kimizuy

共有レイアウト app 配下の layout.js に実装します。 {children} の部分にページコンテンツが入ります。 // app/layout.js export default function RootLayout({ children }) { return ( Next.js Layouts RFC in 5 Minutes {children} ); } ↓ 5分で予習する Next.js 「Layouts RFC」 @kimizuy

共有レイアウト app/page.js は、 app/layout.js の子としてレンダリングされます。 // app/page.js export default function Page() { return

Hello, Next.js!

} ↓ Next.js Layouts RFC in 5 Minutes

Hello, Next.js!

5分で予習する Next.js 「Layouts RFC」 @kimizuy

共有レイアウト app/layout.js と合わせて /blog 以下で独自のレイアウトを共有したい場合。 // app/blog/layout.js export default function BlogLayout({ children }) { return ( <> ... {children} > ) } ↓ 5分で予習する Next.js 「Layouts RFC」 @kimizuy

共有レイアウト app/blog/page.js は app/layout.js と app/blog/layout.js の子としてレンダリン グされます。 Next.js Layouts RFC in 5 Minutes ...

Blog Posts

5分で予習する Next.js 「Layouts RFC」 @kimizuy

共有レイアウト → layout.js にレイアウトコンポーネントの役割を集約でき、フォルダごとのレイアウト のカスタムもより柔軟に管理できるようになった！ 5分で予習する Next.js 「Layouts RFC」 @kimizuy

部分的なローディング loading.js は、ページや ネストしたセグメントを自動 的に React Suspence Boundary で囲みます。 Next.js は、最初の読み込み の際と、兄弟ルート間を移動 する際に、ローディングコン ポーネントを表示します。 5分で予習する Next.js 「Layouts RFC」 @kimizuy

部分的なローディング React Suspense とは 「データの読み出しが準備できているかどうかを React に伝える仕組み」です。データ取得 中の場合は に渡されたフォールバックの UI が、代わりに表示されます。一部 のライブラリやフレームワーク（Next.js も）では、この機能を取り入れています。 5分で予習する Next.js 「Layouts RFC」 @kimizuy

部分的なローディング Next.js では React Suspense をサーバ ーレンダリングと組み合わせてローディ ング UI とサーバーで生成された HTML を入れ替えます。 これまでのサーバーレンダリングはペー ジ全体が生成されるまで待機する必要が ありました。しかし 「データ取得中の UI」と「それ以外 （ヘッダーやフッター）の UI」でペー ジのレンダリングを部分的に分けること でユーザーはより速くページを操作し始 めることができます。 5分で予習する Next.js 「Layouts RFC」 @kimizuy

部分的なローディング app/loading.js と app/layout.js を組み合わせて利用できます。 // app/loading.js export default function Loading() { return } // app/layout.js export default function Layout({children}) { return ( <> {children} > ) } ↓ 5分で予習する Next.js 「Layouts RFC」 @kimizuy

部分的なローディング app/loading.js と app/layout.js を組み合わせた結果。 <> }>{children} > 5分で予習する Next.js 「Layouts RFC」 @kimizuy

部分的なローディング → ページレンダリングの中心がよりサーバーに寄せられることで、ブラウザ側で追加の JS を 読み込んでレンダリングする必要が少なくなり、クライアント側のナビゲーションがさらに 高速に！ 5分で予習する Next.js 「Layouts RFC」 @kimizuy

まとめ page.js : パスとビューの定義がより明確に分けられる layout.js : 共有レイアウトがより柔軟に実装可能になる loading.js : Suspense などの機能が Next.js に統合され UX が向上する 5分で予習する Next.js 「Layouts RFC」 @kimizuy

Next.js Conf（10/25）が楽しみ！ 以上、ご静聴いただきありがとうございました。 5分で予習する Next.js 「Layouts RFC」 @kimizuy

参考 https://vercel.com/blog/next-js-layouts-rfc-in-5-minutes https://nextjs.org/blog/layouts-rfc https://github.com/vercel/next.js/discussions/37136 5分で予習する Next.js 「Layouts RFC」 @kimizuy