はじめに
今回は、今注目のフロントエンドフレームワークのNext.jsについて解説します。
ざっと概要を掴みたい方はぜひ読んでみてください！
YouTube動画
文字だけでなく、動画での解説もしています。
興味のある方はこちらも見ていただけると嬉しいです。
【YouTube動画】注目のフロントエンドフレームワーク Next.js は何ができるか、ご紹介します！！
Next.jsとは？
SSR/SSG用のReactフレームワークです。
React単体ではないSSR/SSGなどの機能や、最近はISRも追加されています。
公式チュートリアルがとても充実していますので、興味を持った方は是非やってみましょう！
SSR、SSG、ISRとは？
SSRとはServer Side Renderingの略で、リクエスト毎にサーバ側でHTMLを構築して表示します。
普通にReactで開発したサイトだとSEOに弱いので、Next.jsではSSRが実装されています。
しかし、サーバ側で毎回レンダリングするので遅いということで、SSG(Static Side Generation)が登場しました。
SSGでは予めHTMLを作っておいて、リクエストがあった場合はそのまま返します。
SSGはデータの追加頻度が少ないときによく使われ、AmazonやTwitterのように更新頻度が多いと使えません。
ISR(Incremental Static Regeneration)はビルド時にHTMLを作るためSSGと似ています。
SSGとの違いは各ページに有効期限を設定することで、有効期限が切れた後にアクセスされたタイミングで再ビルドを行う点になります。
Next.jsで追加された要素(SSR、SSG、ISRのために必要な要素)
ヘッダ：ヘッダをページごとに動的に生成
動的ルート：Reactルータにより動的なルートを表現
サーバサイドとの通信：ブラウザで表示するより前にデータを取得
Next.jsの用意しているタグ
Head：headを書くことでヘッダを設定できます
Image：デフォルトでロードを非同期にしてくれます
Amp：簡単にAMPに対応できるようにページを変えられます
Link：SPAとしてリンクします
ルーティング
pagesフォルダにファイルを置くとルートが作られます。
動的なルートに関しては、[]でIDをくくったファイル名にするとできます。
SSR、SSG、ISR用の機能
getStaticProps：サーバサイドのデータをビルド時にとってきます。そのまま使うとSSGとなり、Revalidateと入れるとISRになります。Revalidateを指定すると、有効期限が過ぎたページを最新のものにビルドしなおしてくれます。
getServerSideProps：サーバーサイドのデータを、ユーザリクエスト時にとってきます。SSRに使うものですが、ユーザリクエストの度に取りに行くのでSSGに比べて少し遅くなります。
getStaticPaths：動的ルーティングが何個あるかわからない時に数を教えてくれます。Fallbackプロパティをtrueにすると、ビルド時に存在しなかったルートにアクセスがあった場合に、アクセス時点でルートが存在するか確認します。
SSR/SSG/ISRはどうやってデプロイする？
Next.jsを作っているVercelにアップロードすると使えます。
また、next-on-netlifyでNetlifyでも使えます。
おわりに
Next.jsはシンプルで使いやすいので、ぜひ使ってみてください！