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
46
ざっくり知る tamagui v1
kimizuy
0
200
最近知った GitHub Actions の Tips
kimizuy
0
240
5分で予習する Next.js 「Layouts RFC」
kimizuy
0
660
Other Decks in Programming
See All in Programming
CSC305 Lecture 04
javiergs
PRO
0
270
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
490
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
私はどうやって技術力を上げたのか
yusukebe
43
18k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
140
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
120
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
630
CSC305 Lecture 06
javiergs
PRO
0
220
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
11k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Scaling GitHub
holman
463
140k
Faster Mobile Websites
deanohume
310
31k
Code Reviewing Like a Champion
maltzj
526
40k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Applications with DynamoDB
mza
96
6.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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