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
個人ブログをNext13のApp Directoryに移行しました
Search
kimizuy
February 18, 2023
Programming
0
220
個人ブログをNext13のApp Directoryに移行しました
2023/2/15に開催された第5回 LT 練習会(仮)の発表資料です。
https://gaji-lt.connpass.com/event/272514/
kimizuy
February 18, 2023
Tweet
Share
More Decks by kimizuy
See All by kimizuy
ざっくり知る tamagui v1
kimizuy
0
36
最近知った GitHub Actions の Tips
kimizuy
0
140
5分で予習する Next.js 「Layouts RFC」
kimizuy
0
470
Other Decks in Programming
See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
390
禅の心を手に入れよ
eltociear
1
180
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
120
ONE WEDGE_company_guide
1wedge_one
0
500
Ruby Pattern Matching
bkuhlmann
0
930
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
240
エンターテイメント業界で利用されるAWS
demuyan
0
210
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
370
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
210
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
Code Reviewing Like a Champion
maltzj
514
39k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Faster Mobile Websites
deanohume
299
30k
Six Lessons from altMBA
skipperchong
21
3k
Music & Morning Musume
bryan
41
5.6k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Automating Front-end Workflow
addyosmani
1356
200k
It's Worth the Effort
3n
180
27k
In The Pink: A Labor of Love
frogandcode
138
21k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Transcript
個人ブログをNext13のApp Directoryに移行しました 2023/2/15 第5回LT練習会(仮)発表資料 個人ブログをNext13のApp Directoryに移行しました @kimizuy
自己紹介 ID: @kimizuy 最近は React や TypeScript をメインで使っています。 趣味はスプラトゥーン 3
です。 https://github.com/kimizuy https://twitter.com/kimizuy 個人ブログをNext13のApp Directoryに移行しました @kimizuy
Table of Contents これまでの Next.js Next13 の App Directory とは
Server Components Client Components 実装レベルでの変更点(一部) ブログで(blog.kimizuy.dev)で使っている技術 まとめ 参考 個人ブログをNext13のApp Directoryに移行しました @kimizuy
これまでの Next.js アプリケーションを複数のページに分割し、サーバー上で事前レンダリングしていた。ただ 最初の HTML をインタラクティブにするためにはクライアントで追加の JavaScript が必要だ った。 個人ブログをNext13のApp
Directoryに移行しました @kimizuy
Next13 の App Directory とは フォルダ名が pages → app 、ページファイルは
page.js に レイアウトコンポーネント( layout.js )がサブパスページにも継承される error.js や loading.js の追加でエラーやローディングの境界を作ることがで き、そのコンポーネント外でのインタラクティブ性を保てる Server Components(SC) と Client Components(CC)の追加 React18 で追加された React Server Components(RSC)を利用することでコンポー ネント単位でのサーバーレンダリングが可能に 個人ブログをNext13のApp Directoryに移行しました @kimizuy
Server Components デフォルトでは、app ディレクトリは Server Components を使用する。サーバー上でコンポ ーネントをレンダリングし、クライアントに送信される JavaScript の量を減らせる。
個人ブログをNext13のApp Directoryに移行しました @kimizuy
Client Components React Hooks などブラウザ上で JavaScript を実行する必要がある場合は use client をフ
ァイルの一番最初で宣言する。バンドルサイズ削減のため多用は禁物。最小のコンポーネン ト単位で利用する。 'use client'; import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } 個人ブログをNext13のApp Directoryに移行しました @kimizuy
また Server Components に Client Components をインポートしたり、Client Components に Server
Components を子または prop として渡すことで、コンポーネントツリー内で Server Components と Client Components を混在させられる。 個人ブログをNext13のApp Directoryに移行しました @kimizuy
実装レベルでの変更点(一部) Server Components によって getStaticProps は実質的に廃止 export default async function
Page() { const data = await getData(); return <main>...</main>; } getStaticPaths → generateStaticParams に getServerSideProps のようにリクエストごとに常に再検証する場合は↓のようにす る export const dynamic = 'force-dynamic' 個人ブログをNext13のApp Directoryに移行しました @kimizuy
ブログで(blog.kimizuy.dev)で使っている技術 MDX(mdx-bundler) React Context Framer Motion budoux など 個人ブログをNext13のApp Directoryに移行しました
@kimizuy
個人ブログをNext13のApp Directoryに移行しました @kimizuy
個人ブログをNext13のApp Directoryに移行しました @kimizuy
まとめ Server Components によってコンポーネント単位でのレンダリングがサーバー側に移 り、アプリケーションが巨大化しても高いパフォーマンスを維持しやすくなった app フォルダ内でページに関わるファイル(コンポーネントやテスト、 stories などの ファイル)を配置できるようになり、より柔軟なディレクトリ戦略を取れる
まだ experimental なためドキュメントも含め未完成な部分が残っているが移行自体は特 に問題なかった 個人ブログをNext13のApp Directoryに移行しました @kimizuy
以上、ご静聴いただきありがとうございました。 個人ブログをNext13のApp Directoryに移行しました @kimizuy
参考 https://beta.nextjs.org/docs/rendering/fundamentals https://nextjs.org/blog/layouts-rfc https://zenn.dev/panda_program/scraps/6c66f160636969 個人ブログをNext13のApp Directoryに移行しました @kimizuy