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
280
個人ブログを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
実践Server Actions
kimizuy
0
28
Exploring Hono
kimizuy
0
45
ざっくり知る tamagui v1
kimizuy
0
190
最近知った GitHub Actions の Tips
kimizuy
0
240
5分で予習する Next.js 「Layouts RFC」
kimizuy
0
640
Other Decks in Programming
See All in Programming
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
330
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Laravel Boost 超入門
fire_arlo
2
150
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
190
RDoc meets YARD
okuramasafumi
3
150
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
AHC051解法紹介
eijirou
0
640
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
1
160
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.6k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
2
350
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Navigating Team Friction
lara
189
15k
Git: the NoSQL Database
bkeepers
PRO
431
65k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
How to Ace a Technical Interview
jacobian
279
23k
Automating Front-end Workflow
addyosmani
1370
200k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Scaling GitHub
holman
463
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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