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

2022/10/19に開催された第1回 LT 練習会（仮）の発表資料です。
https://gaji-lt.connpass.com/event/260558/

Transcript

1. 5分で予習する Next.js 「Layouts RFC」 2022/10/19 第1回LT練習会（仮）発表資料 5分で予習する Next.js 「Layouts RFC」 @kimizuy
2. 自己紹介 ID: @kimizuy 株式会社 Gaji-Labo フロントエンドエンジニア 最近は React や TypeScript をメインで使っています。 https://github.com/kimizuy https://twitter.com/kimizuy 趣味: スプラトゥーン 3 5分で予習する Next.js 「Layouts RFC」 @kimizuy
3. そもそも Next.js とは React ベースのフレームワーク SSG、SSR、ISR 画像最適化 API Routes などのバックエンド側の拡張性もある Vercel と組み合わせれば設定不要でデプロイ可能＆Next.js の機能をフルサポート 5分で予習する Next.js 「Layouts RFC」 @kimizuy
4. 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. 主な変更点 ルーティング 共有レイアウト 部分的なローディング 5分で予習する Next.js 「Layouts RFC」 @kimizuy
6. ルーティング 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
7. ルーティング 変更 フォルダ名が 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 <h1>Hello, Next.js!</h1> } 5分で予習する Next.js 「Layouts RFC」 @kimizuy
8. ルーティング → フォルダがパスの定義、ファイル( page.js )がビューの定義に明確に役割が分けられた！ 5分で予習する Next.js 「Layouts RFC」 @kimizuy
9. 共有レイアウト ヘッダーやフッター、サイドバーはページ間で再利用したい場合があります。そういったレ イアウトに関するコンポーネントをページ変更の際に再利用して状態を保持することで、画 面のチラつきの軽減やパフォーマンスの向上が見込めます。Layouts RFC ではより柔軟に共 有レイアウトの実装が可能になります。 これまでの書き方: // pages/_app.js import Layout from '../components/layout' export default function MyApp({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } 5分で予習する Next.js 「Layouts RFC」 @kimizuy
10. 共有レイアウト app 配下の layout.js に実装します。 {children} の部分にページコンテンツが入ります。 // app/layout.js export default function RootLayout({ children }) { return ( <html> <head> <title>Next.js Layouts RFC in 5 Minutes</title> </head> <body>{children}</body> </html> ); } ↓ 5分で予習する Next.js 「Layouts RFC」 @kimizuy
11. 共有レイアウト app/page.js は、 app/layout.js の子としてレンダリングされます。 // app/page.js export default function Page() { return <h1>Hello, Next.js!</h1> } ↓ <html> <head> <title>Next.js Layouts RFC in 5 Minutes</title> </head> <body> <h1>Hello, Next.js!</h1> </body> </html> 5分で予習する Next.js 「Layouts RFC」 @kimizuy
12. 共有レイアウト app/layout.js と合わせて /blog 以下で独自のレイアウトを共有したい場合。 // app/blog/layout.js export default function BlogLayout({ children }) { return ( <> <aside> <nav>...</nav> </aside> {children} </> ) } ↓ 5分で予習する Next.js 「Layouts RFC」 @kimizuy
13. 共有レイアウト app/blog/page.js は app/layout.js と app/blog/layout.js の子としてレンダリン グされます。 <html> <head> <title>Next.js Layouts RFC in 5 Minutes</title> </head> <body> <aside> <nav>...</nav> </aside> <h1>Blog Posts</h1> </body> </html> 5分で予習する Next.js 「Layouts RFC」 @kimizuy
14. 共有レイアウト → layout.js にレイアウトコンポーネントの役割を集約でき、フォルダごとのレイアウト のカスタムもより柔軟に管理できるようになった！ 5分で予習する Next.js 「Layouts RFC」 @kimizuy
15. 部分的なローディング loading.js は、ページや ネストしたセグメントを自動 的に React Suspence Boundary で囲みます。 Next.js は、最初の読み込み の際と、兄弟ルート間を移動 する際に、ローディングコン ポーネントを表示します。 5分で予習する Next.js 「Layouts RFC」 @kimizuy
16. 部分的なローディング React Suspense とは 「データの読み出しが準備できているかどうかを React に伝える仕組み」です。データ取得 中の場合は <Suspense> に渡されたフォールバックの UI が、代わりに表示されます。一部 のライブラリやフレームワーク（Next.js も）では、この機能を取り入れています。 5分で予習する Next.js 「Layouts RFC」 @kimizuy
17. 部分的なローディング Next.js では React Suspense をサーバ ーレンダリングと組み合わせてローディ ング UI とサーバーで生成された HTML を入れ替えます。 これまでのサーバーレンダリングはペー ジ全体が生成されるまで待機する必要が ありました。しかし 「データ取得中の UI」と「それ以外 （ヘッダーやフッター）の UI」でペー ジのレンダリングを部分的に分けること でユーザーはより速くページを操作し始 めることができます。 5分で予習する Next.js 「Layouts RFC」 @kimizuy
18. 部分的なローディング app/loading.js と app/layout.js を組み合わせて利用できます。 // app/loading.js export default function Loading() { return <YourSkeleton /> } // app/layout.js export default function Layout({children}) { return ( <> <Sidebar /> {children} </> ) } ↓ 5分で予習する Next.js 「Layouts RFC」 @kimizuy
19. 部分的なローディング app/loading.js と app/layout.js を組み合わせた結果。 <> <Sidebar /> <Suspense fallback={<Loading />}>{children}</Suspense> </> 5分で予習する Next.js 「Layouts RFC」 @kimizuy
20. 部分的なローディング → ページレンダリングの中心がよりサーバーに寄せられることで、ブラウザ側で追加の JS を 読み込んでレンダリングする必要が少なくなり、クライアント側のナビゲーションがさらに 高速に！ 5分で予習する Next.js 「Layouts RFC」 @kimizuy
21. まとめ page.js : パスとビューの定義がより明確に分けられる layout.js : 共有レイアウトがより柔軟に実装可能になる loading.js : Suspense などの機能が Next.js に統合され UX が向上する 5分で予習する Next.js 「Layouts RFC」 @kimizuy
22. Next.js Conf（10/25）が楽しみ！ 以上、ご静聴いただきありがとうございました。 5分で予習する Next.js 「Layouts RFC」 @kimizuy
23. 参考 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