ちょっとがんばってJamstackでWEBサイトを作ってみました。〜 その2 Next.js を選んだわけ
前回のノートでは、なぜWebサイトをJamstackで作るといいのか？について書きました。
はじめに
Jamstackによって、速くて安全なWebサイトを作ることができます。
サイトを訪れる人にとっては、快適にサイトを閲覧できるメリットがあり、ユーザーエクスペリエンスを向上させることで、Googleランキングの向上に重要な役割を果たします。
企業にとっては、ランキングが向上すれば、オーガニックトラフィックも向上し、最終的にはコンバージョン数や販売数の増加につながるわけです。
今回は、じゃあ、どんなフレームワークでWebサイトを作ろう？というお話です。
Jamstackのサイトを見てみると、333ものサイトジェネレーターがあります。その中でもTop3は
①Next.js
②Hugo
③Gatsby
という結果です。
どのフレームワークも早く安全なwebサイトを作れますし、基本的な特徴はだいたい似たようなものです。
例えば、 自動的に画像の最適化をしてくれることが挙げられます。
これによって、
・パフォーマンスの向上
👉 最新の画像形式を使用して、各デバイスに対して常に正しいサイズの画像を提供してくれます。
・ページロードの高速化
👉 画像はビューポートに入ったときにのみ読み込まれ、オプションでLazy loading も選択OK。（最初にぼかしのかかった画像が現れ、次第に鮮明になっていく画像ローディングの方法）
他にも色々ありますが、結論から言うと、私は、Next.jsというフレームワークを選びました。
GitHubでも一番多くの★いいねがついています。
Next.jsとは？
Next.jsは、JavaScriptライブラリであるReact*開発におけるフレームワークです。フレームワークとは、システム開発を楽に行えるように用意された、プログラムとかのひな形のこと。
*Reactとは、JavaScriptのライブラリの一つです。Facebook社が中心となって開発したもので、「React.js」「React.JS」と呼ばれることもあります。
Next.jsが他のフレームワークに比べてちょっと良いところはこんなところだと思っています。
▶︎ 高速リフレッシュ・・リフレッシュ（コードをデザインに反映させること）がサクサク行えます。時間の節約＋開発がスムーズ＝ストレスなし
▶︎ ビルドが早い・・例えばGatsbyなんかと比べると、まじ早いです
▶︎ 情報量が多い・・Next.jsに関するコミュニティが、ネット上にはたくさんあるので、いろんな情報を得られる。
Youtubeでは、たくさんのNext.jsのチュートリアルがあります。
日本語に翻訳された非公式ドキュメントもあります。
実際に触ってみて思ったのは、コンポーネントごとにコードを組んでいくので、今まで使ってきたPHPより、管理がしやすいということです。
次回は、実際にJamstackでwebサイトを作るための環境を整えていく過程を共有したいと思います💁♀️
この記事が気に入ったらサポートをしてみませんか？