Next.js の感想
最近 Next.js を使ってサイトを作ってるのでそれレビューみたいなことでもしようかと書いたブログです。
Next.js とは
私は説明するのが下手なので、当然公式サイトを見た方がいいんですが、多分わざわざポップアップで読むのが面倒だという人もいるだろうし、そもそも英語がわからない人1がいると思うので簡単に（自分の偏見まじりで）説明します。
Next.js というのは JavaScript を使って作るウェブサーバみたいなもんです。はい。詳しく知りたい人はやっぱりググってください。
とりあえずコンポーネント化出来てうまくやればとても保守性が高くすることができるものだと思えばいいです。
あと、 SSR とか SSG とか言って、ロードをとても素早くする技術や、ページの遷移がとてもシームレスになったりととてもモダンな技術が詰まってますね。
また、開発環境もとてもいい2です。
感想
保守性
私は、自称「保守性を一番意識するプログラマー」ですが、そんな保守性保守性言ってる私でも、この Next.js はとても満足のいく保守性の強さ3があります。
コンポーネント
まあ、それは React.js の恩恵ですね。 React.js によって、要素をコンポーネント化して使い回すことができて、一箇所変更すれば全てのところで反映されるし、どのコンポーネントがどう言った役割を果たすのかがとてもよくわかります。
もう、本当に最高です。
CSS
Next.js では二種類の CSS があります。一つは、 import "/path/to/style.css" でインポートする CSS です。これは、 ReactDOM に className="test-class" と指定すれば、 style.css 内で .test-class と書かれているところが反映されます（当たり前ですね）。
そして、 Next.js にはもう一つの CSS があって、それはコンポーネントレベルCSS と呼ばれています。この CSSは
import styles from "path/to/Component.Module.css"
という方法でインポートします。 CSS ファイルの名前は必ず なんとか.Module.css でないとだめです。
で、これの何がいいのかというと、この中に書かれたセレクタは、従来のインポートされた CSS とかぶることはないんです。なので、この中でも .testClass というセレクタがあっても、上記の style.css の中の .testClass とは全く違うものとして扱われます。
どうしてこのようなことができるのかというと、コンポーネントレベルCSS は
className={styles.testClass}
というふうに指定するからです。実際にブラウザで見てみると、 class="testClass" とはなっていません。 class="Componenet_testClass_…" という風になるのです。 … にはランダム（？）な文字の羅列が入るのでかぶることはありません。
TypeScript
Next.js は TypeScript のサポートもされています。初めてのプロジェクトであれば
npx create-next-app sample-app --typescript
という風に –typescript を追加すれば TypeScript で開発することができます。
また、すでに既存のプロジェクトであれば、
yarn add --dev typescript @types/react @types/node
という風に TypeScript と型をインストールし、 index.js とかになってたファイルを index.tsx にすれば移行は完了です。驚くほどに簡単なんです！
また、全てを src ディレクトリに格納しても勝手に認識してくれます。一切設定の変更はいりません。
呆れてしまうほどの便利さ。もうこれだけで十分 Next.js に魅了されてしまいますね。
SASS
Next.js は SASS もサポートしています。 SASS の導入も簡単です。 SASS モジュールをインストールして、 CSS ファイルの拡張子を css から sass や scss に変更するだけでいいんです。
もう簡単すぎて惚れそうd(((
SSR, SSG
Next.js には SSR (Server Side Rendering) と SSG (Static Site Generation) がサポートされています。正直、自分でもよくわかっていないんですが、 SSR, SSG はサーバサイドでもうすでにレンダリングして、とても素早くクライアントにページを返す技術です。
細かな違いはこちらのサイトをみることをお勧めしますね。
まあ、この二つは Next.js が勝手に判断してくれるのであまり深く考えることはないと思いますが、知っておいた方がいいかもしれません。
とりあえず、 Next.js にはこういうページのロードをとても早くする技術があります。そして、どれだけ早くなるのかというと、 http://apps.probmkr.com:3001 にアクセスしてみてください。一瞬ですよね。
実はこれは私が今作っているサイトなんですが、このページは SSG が使われています（使われているはず）。
デベロッパーツールで見てみれば、大体 500ms でロードしています。参考として、「阿部寛のホームページ」のロード時間が、同じ環境で測定して 400ms でした。つまり、軽さはほぼ「阿部寛のホームページ」なんです！
これが Next.js の力です。
自動ルーティング、ダイナミックルーティング
Next.js は React.js とは違い、自動でルーティングをしてくれます。つまり、ディレクトリ構造でリクエストしたディレクトリを振り分けられるんです。（要するに Apache と同じような感じ。）
React.js では、いちいちルーティングの設定を書かなければいけませんでしたが、 Next.js ではディレクトリ構造で簡単にサイトを作れます。
また、 Next.js にはダイナミックルーティングという機能もあります。これは WordPress を使ったことある人ならわかると思いますが、パーマリンクと同じような機能です。
つまり、一つのファイルでリクエストしてきたディレクトリを振り分けることができるんです。この機能を使えば、ブログなども簡単に作ることもできるようになります。
一つのファイルでいろんなリクエストを処理できるんです！
ダイナミックルーティングについてはこちらの公式サイトをご覧ください。
公式ドキュメント、公式チュートリアル
Next.js は公式チュートリアルも充実しています。基本、この公式チュートリアルを一回通せば、 Next.js の大体を掴むことができます。私も、この公式チュートリアルから始めましたが、色々な機能に触れていてとても良かったです。
また、公式ドキュメントもとても良いと思いました。 Next.js の全ての機能について親切に説明してくれていて、例も載っています。
ただ、一つだけ残念だったのが、 Discord.js の公式リファレンスみたいな機能がなかったことです。 Discord.js の公式リファレンスには、このクラスにはこういうメンバーがあるよ、とかこの関数はこういう引数をとってこういう戻り値を返すよ、とかが詳しく書かれているページがなかったですね。
ただ、私がまだ見つけてないだけかもしれませんが。もしも見つけたのならばコメントで教えてくださいw
まとめ
とにかく、 Next.js はとてもいいフレームワークだと思います。プログラミングの技術を活かしながらとてもいいウェブサイトが作れるというのがとてもいいですね。
ただ、 JavaScript, コンポーネント, JSX など、初心者の人には理解することが難しいことがとても多いです。それだけ完璧なウェブサイトを作れるということなのですが。
なので、初心者の方でも頑張って HTML とプログラミングを勉強しましょう！ Next.js は学んでおいて絶対に損はないと思います。
すでにプログラミング経験者にはもう言わなくてもわかると思います。 Next.js がどれだけいいものなのか。
とにかくシームレスで軽いんです！
最後まで読んでいただき、誠にありがとうございました。