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
650
Other Decks in Programming
See All in Programming
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
OSS開発者という働き方
andpad
5
1.7k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.2k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
1.5k
速いWebフレームワークを作る
yusukebe
5
1.7k
Cache Me If You Can
ryunen344
2
1.4k
チームのテスト力を鍛える
goyoki
2
160
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
為你自己學 Python - 冷知識篇
eddie
1
350
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Producing Creativity
orderedlist
PRO
347
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
4 Signs Your Business is Dying
shpigford
184
22k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Why Our Code Smells
bkeepers
PRO
339
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Raft: Consensus for Rubyists
vanstee
140
7.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