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
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
840
What's new in Spring Modulith?
olivergierke
1
150
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
株式会社 Sun terras カンパニーデック
sunterras
0
310
Cursorハンズオン実践!
eltociear
2
1.1k
Le côté obscur des IA génératives
pascallemerrer
0
150
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Music & Morning Musume
bryan
46
6.8k
Practical Orchestrator
shlominoach
190
11k
Producing Creativity
orderedlist
PRO
347
40k
What's in a price? How to price your products and services
michaelherold
246
12k
A Tale of Four Properties
chriscoyier
161
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Making Projects Easy
brettharned
120
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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