Reactを触ったことはある私なのですが、Next.jsは名前しか聞いたことがない。
大人の事情でNext.jsをインストールすることになりました。
Next.jsとは
ReactベースのJavaScriptのフレームワーク。サーバーサイドレンダリングができる。
Reactにはサーバー機能がないため、単体では動かせないが、Next.jsは単体でWebアプリを動かすことができる。
ざっくり特徴
一応書くけど、他のサイトが詳しいのでそちらを参照していただきたい。
-
SSR（Server Side Rendering）
レア度の話ではない。
ブラウザではなくサーバーでレンダリングして、クライアント側で描画する方式
ReactはSPAでパスによってブラウザが、表示するDOMを変える＝レンダリング。Next.jsはサーバーでどのDOMを返すかを判断する。 -
SSG（Static Site Generator）
サーバー側で事前にビルドして、HTMLを構築しておく方式。 -
ISR（Incremental Static Regeneration）
SSGと基本は一緒。SSGは事前にビルドしているため、表示される情報が更新されにくいという課題があるが、ISRはバックグラウンドで一定期間ごとに再ビルドをする仕組みなので、更新頻度が高いページには効果的。 -
ファイルベースルーティング機能
ルールに従ってファイルを配置→自動的にURLのパスが生成されアクセス可能になる機能。
デフォでPagesフォルダが生成されている。Pagesフォルダ内にファイルを配置するだけで、そのページへの遷移が可能になる。
その他にもちろんたくさんある。
上記の中でまだ実際にどういうものか分かっているものは少ないけど、ファイルベースルーティング機能は便利。Reactだと、ページ表示させるだけで色々書く必要があったね。。。
似たような名前ものにNuxt.jsやNode.jsがある。
Nuxt.jsはVue.jsでサーバーサイドレンダリングをするときに使う。
Node.jsは本来ブラウザで動くJavascriptをPCのターミナルで動かせるようにするソフトウェア。
関係ないけど、N〇〇.jsばかりで混乱する。jsはNに弱みでも握られているのでしょうか。
Next.jsをインストールする
npmでインストールする。Next.jsを始めたいディレクトリで下記コマンドを打つ。
npx create-next-app@latest
コマンドはちょいちょい変わる事があるので、最新のものは公式サイトを見てね。
Next.js公式
途中でプロジェクトの名前と、Typescript使う？ESLint使う？と聞かれるので、好きに選ぶ。
終わったらSuccess！と出てくるので、しばらく待つ。
最後に
間違ったことを書いていましたら、それとなくコメントしていただけるとありがたいです。