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
10分でわかるNext.js14
Search
Daichi Sunagawa
November 16, 2023
Programming
0
64
10分でわかるNext.js14
Daichi Sunagawa
November 16, 2023
Tweet
Share
More Decks by Daichi Sunagawa
See All by Daichi Sunagawa
フロントエンドの設計で大事なこと
sngw0113
0
25
React と Next.js について
sngw0113
0
16
フロント開発でよく使われるライブラリの紹介
sngw0113
0
11
モダンJavaScript入門
sngw0113
0
16
【React入門】絶対に躓かない Reactワークショップ #3
sngw0113
0
6
【React入門】絶対に躓かない Reactワークショップ #2
sngw0113
0
9
【React入門】絶対に躓かない Reactワークショップ #1.pdf
sngw0113
0
33
Other Decks in Programming
See All in Programming
The grand strategy of Ruby Parser
yui_knk
5
290
Sheets API使ってみた
toshi0383
2
180
酒飲んでたらテックリードになった話
spbaya0141
0
210
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
610
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
220
Embedding it into Ruby code
soutaro
2
320
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
140
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
560
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
WebGLで始める コンピュータグラフィックス入門
heller77
0
370
Featured
See All Featured
Debugging Ruby Performance
tmm1
70
11k
Side Projects
sachag
451
41k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Web Components: a chance to create the future
zenorocha
306
41k
Designing the Hi-DPI Web
ddemaree
276
33k
Unsuck your backbone
ammeep
664
57k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
A better future with KSS
kneath
231
16k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Transcript
10分でわかる Next.js14 砂川 大地
@0113Ds 砂川 大地 2019年 株式会社KDDIウェブコミュニケーションズに新卒入社。 レンタルサーバー事業『CPI』のコントロールパネルの フロントエンド開発。 2023年 KDDIアジャイル開発センター株式会社に出向。 レンタルスペースの予約システムや、
ホームページ制作代行事業の作業管理ツールを アジャイル/スクラムで開発。 趣味 音楽、ドラム、ギター、カメラ、映画、インテリア、etc... 直近だとモンパチ主催のWhat a Wonderful World!! 23に行きました。 おもち
Next.jsとは? Next.jsとは、Reactをベースに開発された、 フロントエンドフレームワークです。 @0113Ds
Next.jsで何ができるの? Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して
最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 @0113Ds
Next.jsで何ができるの? Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して
最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 React Canary まだ破壊的変更が入る可能性はあるが、 Reactが公式にサポートできる。 @0113Ds
Next.jsで何ができるの? Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して
最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 React Canary まだ破壊的変更が入る可能背はあるが、 Reactが公式にサポートできる。 Turbopack Nextjs13からα版を使うことができる モジュールバンドラー。 Viteよりも10倍、 Webpackよりも700倍速い(らしい) @0113Ds
Next.jsで何ができるの? Next.js を使用すると、最新の React 機能を拡張し、 強力な Rust ベースの JavaScript ツールを統合して
最速のビルドを実現することで、 フルスタックの Web アプリケーションを作成できます。 https://nextjs.org/ より引用 @0113Ds
Reactとの違いは? React はライブラリです。 コンポーネントを組み合わせることはできますが、 ルーティングやデータフェッチの方法までは指定しません。 React でアプリ全体を構築する場合は、 Next.js や Remix
のようなフルスタックのフレームワークをお勧めします。 https://ja.react.dev/より引用 @0113Ds
Next.jsの機能 様々な最適化機能(画像、フォント、スクリプト...) 動的なHTMLのストリーミング React Server Components に対応 サーバーとクライアント、両方のデータ取得をサポート CSSサポート(Sass、Tailwind、styled-jsx、...) クライアント及びサーバーサイドレンダリング
Node.jsランタイム & Edgeランタイム ルートハンドラー(APIが構築できる) ルーティング及びネストレイアウト ミドルウェア @0113Ds
Next.js14の変更点 @0113Ds
Turbopackがほぼ安定 ローカルサーバーの起動が53%高速化 Fast Refreshによるコードの更新が94%高速化 App & Pagesルーター向けの5000のテストをパスしている。 “next dev --turbo”
で利用することができる。 テストの合格率が100%になったら、次のマイナーリリースで安 定化する予定。 @0113Ds
ServerActionsがStableに Next.js 9から バックエンドのエンドポイントが 簡単に構築できるAPIルートが導入された。
ServerActionsがStableに Next.js14では、 サーバーで安全に実行され、 Reactコンポーネントから直接呼び出される関数 を定義できるようになり、 APIルートを手動で作成する必要がなくなった。
@0113Ds
部分的なプリレンダリング @0113Ds
Next.js Learn @0113Ds
ぜひ懇親会で お話しましょう! @0113Ds