Next.js公式読んだ
https://nextjs.org/
Next.js？
reactでwebアプリケーション作るとなると色々考えないといけないけど、これらを簡単にしてくれるのがnext.js
・Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
・You need to do production optimizations such as code splitting.
・You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
・You might have to write some server-side code to connect your React app to your data store.
具体だと、こんな機能を提供する。
・An intuitive page-based routing system (with support for dynamic routes)
・Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
・Automatic code splitting for faster page loads
・Client-side routing with optimized prefetching
・Built-in CSS and Sass support, and support for any CSS-in-JS library
・Development environment with Fast Refresh support
・API routes to build API endpoints with Serverless Functions
Fully extendable
感動したこと
Routing
pages配下にファイルを置くだけでそれがURL pathになる。
routingライブラリいらない。
Client-Side Navigation
Linkタグ使えば、
クライアントサイドナビゲーションが可能。ブラウザのページ遷移より速い。
リンク先のページのコードをバックグラウンドでプリフェッチ。
Image Optimization
next/image がデフォルトで画像最適化してくれるようになってる。
自動で、ブラウザがサポートしているモダンな画像フォーマットにしてくれる。最近だとWebPとか。
Pre-rendering
デフォルトでプリレンダリングしてくれる。あらかじめHTML作っておく。
パフォーマンスとSEO観点で良いこと。
ブラウザでJS無効にしてもページが表示される。
Two Forms of Pre-rendering
プリレンダリングに2つ形式がある。
Static Generation と Server-side Rendering
この二つの形式をページごとに使い分けることができる。
Static Generation
名前の通り静的なページで使うと良い。
ブログとかヘルプとかドキュメントとか。
データ取得してから表示したいページだったら、getStaticPropsを使う。
これを使うと。「ヘイ！ このページはいくつか依存しているデータがあるから、プリレンダーするときに解決しといて」とnext.jsに伝えることができる。
ここに書いたコードはサーバーサイド内で実行されるから、DBに投げるクエリを書いちゃっても大丈夫。
本番環境だと、ビルド時にしか実行されないから、頻繁に更新があったり、リクエストごとに変わったりするページには不向き。
代わりに、Server-side Rendering使うと良い。
Server-side Rendering
ビルド時ではなく、リクエストごとにデータを取得したい時に使う。その分遅くはなる。
getServerSideProps使ってその中に処理書けばok。
useEffectみたいな感じ？
SWR
データフェッチ用の React フック
めちゃ簡単に書けそう。
Client-side Renderingでよいなら、これを使うのを強くお勧めしている。
API Routes
API Routesをサポートしている。
ただし、getStaticPropsからAPI Routes呼び出すな。処理を直接書け。
フォームの登録処理APIとかはいい使用例。