![](https://lismotech.co.jp/wp-content/uploads/2021/10/アイキャッチ.jpg)
LiSMOtechの小谷です。今回はNext.jsについてみていきます。今回使用したNext.jsのバージョンは11.1.2です。
今回はNext.jsのチュートリアルを実施し、所感やReact.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を無効にしても、画面が表示されることを見るとわかると思います。
ページはそのページで必要なものだけロードすることになっています。これにより、一つのページがレンダリングされる時は、他のページのコードは提供されないようです。
Next.jsがデフォルトで画像最適化をサポートしています。ここはなかなか実感し辛いですが、必要以上に大きな画像を読み込まないようにしているようです。
あとは、フォルダの構成についてはページベースとなっており、わかりやすいものとなっていました。
チュートリアルをやっていて気になった点です。今のところの認識を書いて後で機会があれば調べたいです。
チュートリアル内の記載では、ページごとでSSRかSGなのか切り替えることができるとあります。
実装するには、Next.jsから提供されるメソッドのgetStaticPropsとgetServerSidePropsで使い分けて、SSRとSGを切り替えていくようになっているようです。
そこで、ページ内でgetStaticPropsを使ったらSGで、getServerSidePropsを使ったらSSRということでよいのか?と気になりました。
ちなみに、このgetStaticPropsはサーバー側の処理なので、コンソールなどはターミナルの方に出ます。試せていないですが、getServerSidePropsもおそらく同じだと思います。
チュートリアルの中であったのですが、HTML部分に<>というものが登場します。
以下のように使われていました。
<>は僕はNext.jsで初めて見ました。templete タグみたいな感じで使っているので、そういう認識でよいのかな?と少し気になりましたね。
今回チュートリアルをやってみて、そこから見えたReact.jsとの違いをあげていきます。
上記にも書いた点ですが、これによりReact.jsと比べて表示速度が速くなっていると思います。
ページを作成するときはpageフォルダに作成していき、それがそのままルーティングするときのパスとなるようになっています。
ここはNuxt.jsにも似ているところでNuxt.jsを触った方はイメージ付きやすいかもしれません。
Next.jsが提供してくれるHeadがあり、これを使い各ページごとにメタデータを設定することが出来ます。
これによりSEOの対策もしやすいと思います。
Next.jsによってできるレンダリングモードです。これをすることによってユーザーからの何らかのリクエストを受け取ることなく、ページを更新できます。
頻繁に更新されるデータを表示するページや毎回のリクエストごとに内容が変わるページなどで実装すると良いとされています。
ただ、SSRをするとなるとNode.jsを実行出来るWebサーバーが必要になり、環境を整える手間がかかるかもしれませんね。
今回はチュートリアルを実施し、React.jsとの違いを見ていきました。
チュートリアルをやる前は、SSRをしたいが為のフレームワークかなと思っていましたが、色々とReact.jsと異なる点があり良いなと思いました。
チュートリアルはわかりやすい内容となっており、簡単な実装を通して学べるのでよいと思います!
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved