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
290
個人ブログを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
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
910
Le côté obscur des IA génératives
pascallemerrer
0
150
CSC509 Lecture 03
javiergs
PRO
0
340
CSC509 Lecture 06
javiergs
PRO
0
260
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
540
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
370
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
180
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for humans not robots
tammielis
254
26k
How STYLIGHT went responsive
nonsquared
100
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Code Reviewing Like a Champion
maltzj
526
40k
Mobile First: as difficult as doing things right
swwweet
224
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
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