Next.jsでブログを作りました

(この記事は自分のブログにて公開した記事をQiitaにも投稿してみようかなーと言う軽い気持ちで投稿した物です。こいつ面白いなと思っていただけたらtwitterか僕のブログに遊びきていただけると嬉しいです。
ブログはこちら、Twitterはこちら)

Next.js で JAMStack ブログを作ってみました。

使った技術としては

• React Hooks
• Next.js

デプロイ先は Vercel で、Google Analytics も導入してみました。

ここからは作る際に参考にしたサイトや、詰まったところ、工夫したところをつらつら書いていきたいなと思います！！

実際に作ってみる

まず作る際に参考にしたサイトはこちらです。

「HTML / CSS / JavaScript / Node / React をある程度知っていて Git が使える方」を想定しているようなので、ある程度の知識を持っている方は是非やってみて下さい。

Next.jsとは

Next.jsとは、面倒な設定なしで高いDXとUXを提供することができるReactのフレームワークです。

具体的に言うと

• パフォーマンスとSEOのためにSSGやSSRをすることができる。
• webpackやBabelの設定を自動で行ってくれる。
• 直感的なファイルベースのルーティングシステム
• 画像を自動で最適化してくれるImageコンポーネント

など。控えめに言って、最高です。

ブログを作る手順

1. プロジェクトの作成
2. ページの作成
3. デプロイの準備
4. デプロイ

プロジェクトの作成に関しては公式チュートリアルを参考にするのが1番手っ取り早いと思います。
ページの作成に関しては、僕には説明できるほどの知識はまだないので、先ほど1番最初に紹介したサイトを参考にしながら自分好みにスタイリングしながら楽しんでみて下さい。

デプロイに関しても同様に2つのサイトを見ながらやってみて下さい。ただ注意点として、公式チュートリアルのままデプロイするとページの言語がデフォルトの英語に設定されてしまっているので、Google翻訳がでしゃばって変なことになったりもするので、_document.jsファイルを作成して、設定を上書きして下さい。この作業も最初に紹介したサイトに詳しい方法は書いてあります。

詰まったところ

カテゴリー別投稿機能を作成したところ、参考にしていたサイトの通りに作っただけだと、全記事一覧ページにカテゴリー別の投稿が反映されない問題が発生しました。

そこでスプレッド構文を使ってカテゴリー別でとってきた記事の情報が入った配列を一つに結合させ、それを表示する。と言う手法で解決しました。

工夫したところ

少しでもサイトの表示速度を上げるために画像のフォーマットをjpegからWebPに変え、Imageコンポーネントを使用することで、PageSpeed Insightsでの点数を大きくあげることに成功しました。

WebPとは、Googleが開発した次世代画像フォーマットのことです。webに最適化されているらしくjpgやpngよりも軽いので、サイトスピードの改善に繋がりました。
実際にやってみたところ、元の画像のサイズが64KBだったのに対し、5KBまで軽くなりました。

サイト速度の向上を目指すのであれば、絶対にやっておくべきだと思います。

改善したいこと

現状lifeカテゴリーだけ挙動がおかしいところがあるので、直していきたいです。

あとは今のところスタイリングが適当で、見づらいところがあるなーと個人的に思うのでそこもボチボチ改善していきたいですね。

感想

やってみた感想としては、慣れれば WordPress でサイトを作るより圧倒的に楽ができるなと感じました。

プログラミング学習を始めてからずっと JavaScript メインに勉強してきたので、WordPress 化するために慣れない PHP を書くよりも JavaScript メインで開発できてとても楽しかったです！！

記事の更新もマークダウンで出来るので、結構楽だなと思います。

サーバのことを気にせずに脳死で高速なサイトを作れますし、ある程度Reactの学習をした方などにはぜひ一度やってみて欲しいです！

正直おバカ高校生にもできたので、真面目に勉強している方なら簡単だと思いますw

それでは頑張ってみて下さい！！ここまで読んでくださり、ありがとうございました！！！