こんにちは。
ALH開発エンジニアのY.Nです。

最近フロントエンドの開発案件でReact + TypeScript + Next.jsという環境で開発しています。

React、typescriptはある程度耳なじみがあったのですがNext.jsは全く触ったことがなく四苦八苦の日々でした。

が！慣れてくるとNext.jsの魅力にだんだんと気づいてきたので、備忘録もかねて初学者なりに特徴や強み、環境構築から簡単なwebページの作成までまとめてみました。

javascriptもままならなかった自分目線で書いているので容易く理解できるものとなっているはずです。

Next.jsってなに？

ReactベースのJavaScriptフレームワーク。比較的新しい部類。
jsのFWといえばreactを思い浮かべる人が多いと思いますが、
reactはDOM操作（見た目を作る）が主目的であり、厳密には「ライブラリ」です、FWではありません。（FWとライブラリの境界はやや曖昧ですが...）
そして、reactをベースに様々な「機能」を提供してくれるのが
「アプリケーションフレームワーク」であるNext.jsです。

とは言ったものの私もよく分かっていません...
生成されたHTMLを効率的に操作してくれるのが「ライブラリ」であるreact
HTMLの生成自体を効率的に行ってくれるのが「FW」であるNext.js
とりあえずはこんな感じの浅い理解でいいのかなと思ってます。

Next.jsの特徴・強み

上で様々な機能と言いましたが、具体的にどんな機能があるのか紹介します。

画像最適化

Next.jsのImageコンポーネントは画像をレンダリングする前に、表示するサイズなどを考慮し、ファイルサイズや形式を最適化します。
加えて、遅延ロード（画面に表示している領域から離れている画像にはダウンロードせず,
表示領域が近づくとダウンロードを始める）により、さらにWebページを高速化します。
参考：Next.jsの画像最適化を検証してみる

Server Side Rendering (SSR) / Static Site Generation (SSG)

これがNext.jsを導入する最も大きな点になると思います。
が、ここら辺は難しくて理解が曖昧なのでざっくりとした説明に留めます。
まずReactなどが得意としている最近流行りのSPAは、「ひとつのページをサーバーから取得して差分のみ書き換えていく」というものです。
これによりページ遷移など画面の移り変わりを高速に行うことができ、ぬるぬるとした快適なWebページになります。

しかし、初回レンダリング時にはページを読み込む必要があるため重たくなるという現象は避けられませんし、レンダリング処理がクライアント側の端末性能にも大きく依存してしまいます。

これを解消するのがSSRの役割です。レンダリングをサーバーで行うことにより初回読み込みのもっさりを緩和し、性能の低い端末でもぬるぬるとしたwebページを担保できます。
さらに、比較的動きの少ないページに関しては静的なHTMLを生成し、使いまわすこと（SSG）によってさらに高速なwebページを実現できます。

と、ここまで自分なりに説明してみましたがそれぞれの詳しい解説に関しては以下が参考になります。とりあえずサクサクしたwebページになるよう色々がんばってくれてるんですね...

API Routes

Next.jsでAPIまで作れちゃうよ！というものです。
個人的にはこれが一番便利だと感じました。

通常DBと通信するためのAPIなどはバックエンド用の言語(Expressなど)で構築し、サーバを立てなくてはなりませんが、Next.jsではディレクトリのpages/api配下に作成されたファイルはAPIとしての振る舞いをします。（詳しくは実装解説記事を投稿する予定です）

フロントもバックもNext.jsで！という方針はなかなか取られることはないと思いますが、これの便利なところはフロントとバックの依存を最小限にして実装を進められるようになることです。

例えばバックのAPIをJavaで作っていたとしてもreqとresの認識だけすり合わせておけば、仮のモックAPIをサクッとNext.jsで実装して開発を進め、JavaのAPIが完成したらあとは接続先を変えるだけ！ということが可能です。めちゃ便利ですね。

あと、当たりまえかもしれませんが、これでちゃっかりCORSエラーも回避できます。
（通常フロントからバックエンドのサーバに接続する際、サーバは異なるオリジン (ドメイン、プロトコル、ポート番号)からのリクエストはキックします。これを許可するにはサーバー側で対象のURLを許可する記述が必要になります。
が、間にNext.jsのAPIを挟んだ場合、バックのAPIに直接接続するのはフロントではなくNextApiのサーバーとなるためCORSによる制約を受けません。いいのかは分からないが便利...）
参考：Next.jsのAPI Routesでどんなことができるのかを理解する

Fast Refresh

ソースコードに変更があった場合にその箇所のみが再描画されるという機能です。
いちいちブラウザのリロードしなくていいのでサクサクコーディングができます。同様の機能はreactにもありますが、別途ライブラリの導入が必要です。

まとめ

画像最適化やSSG/SSRはwebページの高速化に貢献する機能ですね。
webページを高速化するメリットはユーザーの満足度向上だけではありません。
最近重視されているSEOにも影響を及ぼします。（検索結果の上位に表示されるようにする取り組み）
参考：Next.js は本当にSEOに強いのか調べてみた

またAPI RoutesやFast Refreshは開発効率の向上に貢献する機能ですね。
このようにNext.jsにはとても便利な機能が備わっているんです！

最後に

と、以上が自分がすごいなあと思ったNext.jsの特徴です。
Next.jsがかなり便利なFWということが伝わっていれば幸いです。
しかし、正直私は元々Reactどころかフロントエンド自体全く詳しくありませんでした。
いきなりReact × Next.js × TypeScriptという環境に触れたので、比較対象がなく正確に今までに比べてここがすごい！と感じることができないのが歯がゆい点です。
SSG/SSRの辺りも理解が浅くちゃんと使いこなせている気がしませんが、特に設定などせずともうまくやってくれるのもNext.jsの強みということで...

実装してみよう！

言葉だけで色々言ってもあまりイメージが沸かないと思うので、次回からは実装しながら詳しく解説していきます！ちょっくら触ってみるか、となった人へ少しでも助けになれば幸いです。では、読んでいただきありがとうございました。次回も是非よろしくお願いします。

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓　採用サイトはこちら　↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓　ALHについてはこちら　↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓　もっとALHについて知りたい？　↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓