Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
5分で予習する Next.js 「Layouts RFC」
Search
kimizuy
October 20, 2022
Programming
0
660
5分で予習する Next.js 「Layouts RFC」
2022/10/19に開催された第1回 LT 練習会(仮)の発表資料です。
https://gaji-lt.connpass.com/event/260558/
kimizuy
October 20, 2022
Tweet
Share
More Decks by kimizuy
See All by kimizuy
実践Server Actions
kimizuy
0
28
Exploring Hono
kimizuy
0
46
ざっくり知る tamagui v1
kimizuy
0
200
個人ブログをNext13のApp Directoryに移行しました
kimizuy
0
280
最近知った GitHub Actions の Tips
kimizuy
0
240
Other Decks in Programming
See All in Programming
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
150
株式会社 Sun terras カンパニーデック
sunterras
0
270
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
550
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
CSC305 Lecture 06
javiergs
PRO
0
220
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
240
dynamic!
moro
10
7.3k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
110
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
340
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Fireside Chat
paigeccino
40
3.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
KATA
mclloyd
32
15k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Context Engineering - Making Every Token Count
addyosmani
5
220
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Gamification - CAS2011
davidbonilla
81
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Thoughts on Productivity
jonyablonski
70
4.9k
How to Ace a Technical Interview
jacobian
280
24k
Transcript
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