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

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 <h1>Hello, Next.js!</h1> } 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 ( <Layout> <Component {...pageProps} /> </Layout> ) } 5分で予習する Next.js 「Layouts RFC」 @kimizuy

共有レイアウト 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

共有レイアウト 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

共有レイアウト 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

共有レイアウト 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

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

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

部分的なローディング React Suspense とは「データの読み出しが準備できているかどうかを React に伝える仕組み」です。データ取得中の場合は <Suspense> に渡されたフォールバックの
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 <YourSkeleton /> } // app/layout.js export default function Layout({children}) { return ( <> <Sidebar /> {children} </> ) } ↓ 5分で予習する Next.js 「Layouts RFC」 @kimizuy

部分的なローディング app/loading.js と app/layout.js を組み合わせた結果。 <> <Sidebar /> <Suspense fallback={<Loading
/>}>{children}</Suspense> </> 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

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

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

kimizuy

More Decks by kimizuy

Other Decks in Programming

Featured

Transcript