React と Next.js について

Transcript

1. ReactとNext.js 砂川　大地
2. Reactとは 仮想DOMを用いた ユーザインタフェース構築のためJavaScriptライブラリ 宣言的なView を用いてアプリケーションを構築することで、 コードの見通しが立ちやすく、デバッグがしやすい
3. 仮想DOM
4. 仮想DOM リコンシリエーションアルゴリズム「Fiber」
5. 宣言的UI Reactあり (宣言的UI) Reactなし (命令的UI)
6. Reactでできること React はライブラリです。 コンポーネントを組み合わせることはできますが、 ルーティングやデータフェッチの方法までは指定しません。 React でアプリ全体を構築する場合は、 Next.js や Remix のようなフルスタックのフレームワークをお勧めします。 https://ja.react.dev/より
7. Next.jsとは Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して 最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/
8. Next.jsでできること 様々な最適化機能（画像、フォント、スクリプト...） 動的なHTMLのストリーミング React Server Components に対応 サーバーとクライアント、両方のデータ取得をサポート CSSサポート（Sass、Tailwind、styled-jsx、...） クライアント及びサーバーサイドレンダリング Node.jsランタイム & Edgeランタイム ルートハンドラー(APIが構築できる) ルーティング及びネストレイアウト ミドルウェア
9. 知っておいてほしいこと 調べものをするときは、 ReactとNext.jsを切り分けると良い。
10. Next.jsを見てみよう！