10分でわかるNext.js14

Transcript

1. 10分でわかる Next.js14 砂川 大地
2. @0113Ds 砂川 大地 2019年 株式会社KDDIウェブコミュニケーションズに新卒入社。 レンタルサーバー事業『CPI』のコントロールパネルの フロントエンド開発。 2023年 KDDIアジャイル開発センター株式会社に出向。 レンタルスペースの予約システムや、 ホームページ制作代行事業の作業管理ツールを アジャイル／スクラムで開発。 趣味 音楽、ドラム、ギター、カメラ、映画、インテリア、etc... 直近だとモンパチ主催のWhat a Wonderful World!! 23に行きました。 おもち
3. Next.jsとは？ Next.jsとは、Reactをベースに開発された、 フロントエンドフレームワークです。 @0113Ds
4. Next.jsで何ができるの？ Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して 最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 @0113Ds
5. Next.jsで何ができるの？ Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して 最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 React Canary まだ破壊的変更が入る可能性はあるが、 Reactが公式にサポートできる。 @0113Ds
6. Next.jsで何ができるの？ Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して 最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 React Canary まだ破壊的変更が入る可能背はあるが、 Reactが公式にサポートできる。 Turbopack Nextjs13からα版を使うことができる モジュールバンドラー。 Viteよりも10倍、 Webpackよりも700倍速い(らしい) @0113Ds
7. Next.jsで何ができるの？ Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して 最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 @0113Ds
8. Reactとの違いは？ React はライブラリです。 コンポーネントを組み合わせることはできますが、 ルーティングやデータフェッチの方法までは指定しません。 React でアプリ全体を構築する場合は、 Next.js や Remix のようなフルスタックのフレームワークをお勧めします。 https://ja.react.dev/より引用 @0113Ds
9. Next.jsの機能 様々な最適化機能（画像、フォント、スクリプト...） 動的なHTMLのストリーミング React Server Components に対応 サーバーとクライアント、両方のデータ取得をサポート CSSサポート（Sass、Tailwind、styled-jsx、...） クライアント及びサーバーサイドレンダリング Node.jsランタイム & Edgeランタイム ルートハンドラー(APIが構築できる) ルーティング及びネストレイアウト ミドルウェア @0113Ds
10. Next.js14の変更点 @0113Ds
11. Turbopackがほぼ安定 ローカルサーバーの起動が53%高速化 Fast Refreshによるコードの更新が94%高速化 App & Pagesルーター向けの5000のテストをパスしている。 “next dev --turbo” で利用することができる。 テストの合格率が100%になったら、次のマイナーリリースで安 定化する予定。 @0113Ds
12. ServerActionsがStableに Next.js 9から バックエンドのエンドポイントが 簡単に構築できるAPIルートが導入された。
13. ServerActionsがStableに Next.js14では、 サーバーで安全に実行され、 Reactコンポーネントから直接呼び出される関数 を定義できるようになり、 APIルートを手動で作成する必要がなくなった。
14. @0113Ds
15. 部分的なプリレンダリング @0113Ds
16. Next.js Learn @0113Ds
17. ぜひ懇親会で お話しましょう！ @0113Ds