LiSMOtechの小谷です。今回はNext.jsについてみていきます。今回使用したNext.jsのバージョンは11.1.2です。

今回はNext.jsのチュートリアルを実施し、所感やReact.jsとの違いを書いていけたらなと思います。

また、こちらの記事もレンダリングモードについての記載があるので、こちらの記事 も参考にして頂ければと思います。

Next.jsとは？

Next.jsは、React.jsをベースにしたフレームワークです。

React.jsやその他の類似のJSフレームワークを触った方であれば、そこまで抵抗なくチュートリアルの内容は取り込めると思います。

環境構築

環境構築はすでにnode.jsが入っている方であれば、簡単に作ることができると思います。node.jsのインストールなどはこちらの記事 のnode.jsインストール部分などを参考にして頂ければと思います。

今回はnode.jsが入っている前提で、進めます。

Next.jsの公式にもある以下のコマンドを実行します。

npx create-next-app

途中でプロジェクト名だけ聞かれるので、入力しましょう。
Nuxt.jsをやった後だと「あ、ここで聞かれるのプロジェクト名だけなんだ」と思うかもしれません。笑

完了後、以下のコマンドでプロジェクトのフォルダに行きましょう。

cd プロジェクト名

移動後、以下のコマンドで開発環境を立ち上げます。

npm run dev

チュートリアルでよいと思った点

チュートリアルは簡単なブログアプリを作ってみるという内容でした。

このチュートリアルだけではなかなか実感し辛かったですが、React.jsやその他のJSフレームワークに比べて、表示速度に力を入れている印象を受けました。

主に以下の理由があるのかと思います。

• プレレンダリング

 Java Script ですべてのレンダリングを行うのではなく、あらかじめHTMLを生成しておくこと。

これを試すには、公式に書いてある記事通り、ブラウザでJava Scriptを無効にしても、画面が表示されることを見るとわかると思います。

• 自動コード分割

ページはそのページで必要なものだけロードすることになっています。これにより、一つのページがレンダリングされる時は、他のページのコードは提供されないようです。

• 専用のimage要素

Next.jsがデフォルトで画像最適化をサポートしています。ここはなかなか実感し辛いですが、必要以上に大きな画像を読み込まないようにしているようです。

あとは、フォルダの構成についてはページベースとなっており、わかりやすいものとなっていました。

チュートリアルで気になった点

チュートリアルをやっていて気になった点です。今のところの認識を書いて後で機会があれば調べたいです。

• 各ページでのSSR(サーバーサイドレンダリング)とSG(静的生成)の切り替え方法

チュートリアル内の記載では、ページごとでSSRかSGなのか切り替えることができるとあります。

実装するには、Next.jsから提供されるメソッドのgetStaticPropsとgetServerSidePropsで使い分けて、SSRとSGを切り替えていくようになっているようです。

そこで、ページ内でgetStaticPropsを使ったらSGで、getServerSidePropsを使ったらSSRということでよいのか？と気になりました。

ちなみに、このgetStaticPropsはサーバー側の処理なので、コンソールなどはターミナルの方に出ます。試せていないですが、getServerSidePropsもおそらく同じだと思います。

• <>とは？

チュートリアルの中であったのですが、HTML部分に<>というものが登場します。

以下のように使われていました。

<>

<>は僕はNext.jsで初めて見ました。templete タグみたいな感じで使っているので、そういう認識でよいのかな？と少し気になりましたね。

React.jsとの違い

今回チュートリアルをやってみて、そこから見えたReact.jsとの違いをあげていきます。

• プレレンダリング機能・自動コード分割による表示速度

上記にも書いた点ですが、これによりReact.jsと比べて表示速度が速くなっていると思います。

• ページ単位となっているフォルダ構造、ルーティング

ページを作成するときはpageフォルダに作成していき、それがそのままルーティングするときのパスとなるようになっています。

ここはNuxt.jsにも似ているところでNuxt.jsを触った方はイメージ付きやすいかもしれません。

• Head要素を設定しやすい

Next.jsが提供してくれるHeadがあり、これを使い各ページごとにメタデータを設定することが出来ます。

これによりSEOの対策もしやすいと思います。

• SSR(サーバーサイドレンダリング)できる

Next.jsによってできるレンダリングモードです。これをすることによってユーザーからの何らかのリクエストを受け取ることなく、ページを更新できます。

頻繁に更新されるデータを表示するページや毎回のリクエストごとに内容が変わるページなどで実装すると良いとされています。

ただ、SSRをするとなるとNode.jsを実行出来るWebサーバーが必要になり、環境を整える手間がかかるかもしれませんね。

まとめ

今回はチュートリアルを実施し、React.jsとの違いを見ていきました。

チュートリアルをやる前は、SSRをしたいが為のフレームワークかなと思っていましたが、色々とReact.jsと異なる点があり良いなと思いました。

チュートリアルはわかりやすい内容となっており、簡単な実装を通して学べるのでよいと思います！