Next.js
https://gyazo.com/2ddea4dabb1087963d301737955e6d00
とは
オープンソースのReactフロントエンド開発Webフレームワーク フロントエンド 開発において考慮するべき面倒な点を隠蔽してくれる。
Next.jsを使うと何が嬉しいのか?
従来のReact開発において発生し得る以下の点をNext.jsが隠蔽する
コード分割のようなプロダクション環境を最適化する必要がある
パフォーマンスや SEO のために静的にプリレンダリングしたいページがある一方で、サーバサイドレンダリングやク ライアントサイドレンダリングを利用したいページもあるかもしれない
Reactとデータストアを接続するために、サーバーサイド側のコードを書く必要がある
Next.jsの特徴
ページベースの直感的なルーティングシステム(動的ルーティングをサポート)
より速いページロードのための自動コード分割
最適化されたプリフェッチングによるクライアントサイドルーティング
CSS と Sass のビルトインサポートおよびあらゆる CSS-in-JS ライブラリのサポート
サーバレス関数を用いて API エンドポイントを構築するための API ルート
完全に拡張可能であるという点
ページ間の移動の基礎概念
Next.jsにおけるページ
Next.jsにおけるページとは?
pagesディレクトリに存在するファイルからエクスポートされるコンポーネントがページとなる
ルーティングとの関連付け
Next.jsにおけるページは、ファイル名に基づいてルーティングに関連付けられる
ex..
pages/index.js は / にルーティングされ
pages/posts/first-post.js は /posts/first-post としてルーティングされる
Linkコンポーネント
とは
<a> タグをラップした React コンポーネント
aタグとの違い
Linkコンポーネントの場合、サーバー側へのリクエスト無しにページ遷移が可能になっている
コード分割とプリフェッチング
コード分割
Next.jsは自動的にコード分割を行う
各ページはそのページに必要なものだけを読み込む
つまり、トップのページがレンダリングされたときに、他のページのコードが最初からサーブされるわけではない
そのため、数百ものページを持つアプリであってもトップページは素早く読み込まれることが保証される。
プリフェッチング
(開発時のビルドでなく)本番環境でのビルドにおいては、Link コンポーネントがブラウザのビューポートに表示されると、Next.js は自動的にリンク先のページのコードをバックグラウンドで取得するようになっている
これをプリフェッチングという