Next.js

Next.jsとは？

Next.jsとは、Vercelによって作成されたオープンソースの Reactフロントエンド開発Webフレームワークです。

Next.jsの特徴

元々はリリース当初から提供されいているはSSRが特徴でしたが
SSG、ISRといった特徴が強化されています。

CSR (Client Side Rendering) とSSR（Server Side Rendering）

CSRを行うのにReactがありプラスアルファNext.jsを使ってSSRを行うことができるといったのが特徴でした。

CSR (Client Side Rendering)

SSRとはユーザーの操作に対しクライアントサイド（ブラウザ）でAPIなどからデータを取得しHTMLの生成からレンダリング処理を行うことを指します。

SSR（Server Side Rendering）

SSRとはユーザーが操作を行いブラウザからサーバーへリクエスを行いサーバーがAPIなどからデータを取得しHTMLの生成からレンダリング処理を行うことを指します。

SSG（Static Site Generation）とISR（Incremental Static Regeneration）

しかしCSRもSSRもユーザーのアクションに応じてその場でレンダリング処理を行うため、レスポンス速度を下げてしまうといった課題があります。

そこで速度低下の課題に対するソリューションとして登場してくるのがSSG、ISRとなります。

SSG（Static Site Generation）

SSGはビルドのタイミングで一括してAPIなどからデータを取得しHTMLの生成からレンダリング処理を行うことを指します。

ユーザーがアクションするタイミングではすでにHTMLは生成されているため非常に高速にレスポンスを返すことができます。

一方でビルドのタイミングでデータを生成する必要があるため
時間の経過に応じて変化するデータを反映させるためには改めてビルドする必要があります。

ISR（Incremental Static Regeneration）

ISRとはSSG の挙動に加えて、一定時間ごとにバックグラウンドでデータの再取得およびページの再レンダリングを行い、HTML を再生成することを指します。 そのため更新が必要になったタイミングで毎回ビルドを行うことなくデータを更新することができます。

Next.js公式サイト

Next.jsのインストール

インストール周りの記事についてまとめています。
今後も様々なパターンで利用するための設定について追加していきます。

Next.jsをパッケージからインストール

Next.jsをパッケージからインストールしTypescript環境を構築して動かすまでの手順をまとめています。

Next.jsへstyled-componentsを導入

styled-components の説明と Next.js のプロジェクトへ導入するまでの手順をまとめています。

Next.jsの使い方

Next.jsでタイトルやメタタグやOGPを動的に設置

Next.jsでタイトルやメタタグやOGPなどのHeadタグを動的に設置するサンプルについてまとめています。

terser-webpack-pluginの設定

terser-webpack-pluginを設定し本番ビルド時にコメントとconsole.logを削除するサンプルコードについてまとめています。

パスの alias（エイリアス）利用

Next.js開発時にファイルimportでパスの alias（エイリアス）利用する手順をまとめています。

Googleタグマネージャー を設置

Next.jsで作ったアプリケーションにGoogleタグマネージャー を設置するサンプルをまとめています。

Next.jsのマイグレーション

Next.js 6からNext.js 7

TypeScriptを使用したNext.js 6からNext.js 7へ移行した時行った対応をまとめています。

Next.jsのエラー対処

Next.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗

外部ドメインの画像を呼び出した際に発生したCSPエラー回避の対応

next.jsで外部ドメインの画像を呼び出した際に発生したCSPエラー回避の対応をまとめています。

その他

Next.jsの公式ドキュメント