Next.js

（ほぼudemyサイトの模写となってます)
昨今、最もフロントエンドで取り入れらている言語である、Reactをベースに開発されたJavaScriptのフレームワークでもある「Next.js」について自分の学習も兼ねてまとめたいと思います。

現在React×Typescriptの運用保守をしている自分としては多分、Reactの進化系であろうNext.jsについて学習したいと思いました。

WEBアプリをより効率的に開発できる

Next.jsの一番の特徴としてURLルーティングと呼ばれるリクエストされたURLに対して呼び出す仕組みを決定する仕組みや、webアプリを効率的に開発する機能が備わっている。

サーバー機能の有無

Reactとの一番の違いはサーバー機能の有無である。
つまりNest.jsは単体でwebアプリを動作させることができるが、Reactはサーバーを用意しないといけないため手間がかかる。

そして先にも書いたようにURLルーティングをしてくれる
自分で生成したフォルダにファイルを配置すると自動でURLを生成してくれるという仕組み。

これだけ見るとReactを使用する理由はないように感じるがReactにはRudyやPysonのフレームワークを埋め込むことができるため既に構築済みのアプリに導入する場合だとReactの方が手間はかからない。

Next.jsの更なる特徴

画像・レンダリングの最適化

画像を最適化するメリットは、ページの読み込み速度が高速になること
具体的には画像の配置サイズに合わせて、オリジナル画像をトリミングから配信してくれる。

ゼロコンフィング機能

ゼロコンフィグとは、面倒な設定（コンフィグ）は不要（ゼロ）という機能で、Reactでは、webpackなどのパッケージをインストールし、一から設定する必要がある。一方Next.jsでは、最低限の設定を自動で行ってくれるため、開発対象となるプロジェクトに合わせたパッケージのインストールと、簡易的な設定を行うだけで動作します。