個人ブログをNext13のApp Directoryに移行しました

2023/2/15に開催された第5回 LT 練習会（仮）の発表資料です。
https://gaji-lt.connpass.com/event/272514/

Transcript

1. 個人ブログをNext13のApp Directoryに移行しました 2023/2/15 第5回LT練習会（仮）発表資料 個人ブログをNext13のApp Directoryに移行しました @kimizuy
2. 自己紹介 ID: @kimizuy 最近は React や TypeScript をメインで使っています。 趣味はスプラトゥーン 3 です。 https://github.com/kimizuy https://twitter.com/kimizuy 個人ブログをNext13のApp Directoryに移行しました @kimizuy
3. Table of Contents これまでの Next.js Next13 の App Directory とは Server Components Client Components 実装レベルでの変更点（一部） ブログで（blog.kimizuy.dev）で使っている技術 まとめ 参考 個人ブログをNext13のApp Directoryに移行しました @kimizuy
4. これまでの Next.js アプリケーションを複数のページに分割し、サーバー上で事前レンダリングしていた。ただ 最初の HTML をインタラクティブにするためにはクライアントで追加の JavaScript が必要だ った。 個人ブログをNext13のApp Directoryに移行しました @kimizuy
5. 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
6. Server Components デフォルトでは、app ディレクトリは Server Components を使用する。サーバー上でコンポ ーネントをレンダリングし、クライアントに送信される JavaScript の量を減らせる。 個人ブログをNext13のApp Directoryに移行しました @kimizuy
7. 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
8. また Server Components に Client Components をインポートしたり、Client Components に Server Components を子または prop として渡すことで、コンポーネントツリー内で Server Components と Client Components を混在させられる。 個人ブログをNext13のApp Directoryに移行しました @kimizuy
9. 実装レベルでの変更点（一部） 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
10. ブログで（blog.kimizuy.dev）で使っている技術 MDX（mdx-bundler） React Context Framer Motion budoux など 個人ブログをNext13のApp Directoryに移行しました @kimizuy
11. 個人ブログをNext13のApp Directoryに移行しました @kimizuy
12. 個人ブログをNext13のApp Directoryに移行しました @kimizuy
13. まとめ Server Components によってコンポーネント単位でのレンダリングがサーバー側に移 り、アプリケーションが巨大化しても高いパフォーマンスを維持しやすくなった app フォルダ内でページに関わるファイル（コンポーネントやテスト、 stories などの ファイル）を配置できるようになり、より柔軟なディレクトリ戦略を取れる まだ experimental なためドキュメントも含め未完成な部分が残っているが移行自体は特 に問題なかった 個人ブログをNext13のApp Directoryに移行しました @kimizuy
14. 以上、ご静聴いただきありがとうございました。 個人ブログをNext13のApp Directoryに移行しました @kimizuy
15. 参考 https://beta.nextjs.org/docs/rendering/fundamentals https://nextjs.org/blog/layouts-rfc https://zenn.dev/panda_program/scraps/6c66f160636969 個人ブログをNext13のApp Directoryに移行しました @kimizuy