Next.js + microCMSで情報まとめサイトを作ってみた!


Next.jsとmicroCMSで「懸賞・お得情報まとめサイト」を開発したので、技術記事として記録に残します。

前提として、私は趣味でたまにコードを書いてるだけの人間なのでプログラマーではありません。

Progate、ドットインストール、YouTubeやUdemyなどを活用し、完全に独学で学びました。

これから紹介するサイトも趣味程度に作ったもので、今は最低限の機能しか実装していません。

ですが今後少しずつ機能追加していく予定です。

以下では、作ったものや現在実装している機能などについて紹介していきます。

スポンサーリンク

つくったもの

懸賞・お得情報まとめサイト「OTOKU!」を作りました。

サイトを訪れた人に「ちょっと得した♪」と感じてもらえるような、懸賞やお得情報をまとめたサイトになっています。

(サイトについての詳細は以下記事を参考にどうぞ!)

使用した技術

開発にあたり使用した技術は以下の通りです。

  • 言語:React
  • フレームワーク:Next.js
  • スタイリング:Tailwind CSS
  • コンテンツ管理 :microCMS
  • ホスティングサービス:Vercel
  • デザイン:Figma

Next.jsはReactをベースに開発されたフロントエンドフレームワークです。

Next.jsを使うメリットは、

  • 動的ルーティングが簡単
  • 画像やレンダリングの最適化によりページ遷移が高速
  • VercelとGitHubを連携することで、簡単にサイト公開までできる

など様々ありますが、開発しやすく便利なので私はNext.jsを使うことが多いです。

コンテンツ管理にはmicroCMSを使ってます。

CMSと言えばワードプレスが有名ですが、microCMSはヘッドレスCMSのため、サイトの見た目(フロントエンド)部分はありません。

なのでAPIの取得含め、サイトの見た目などフロントエンド部分は全て自分で一から実装しました。

スタイリングはCSSフレームワークのTailwindCSS、デザイン作成にはFigmaを利用しています。

サイトの仕組みについて

このサイトは主に3つのコンテンツで構成されています。(APIもそれぞれ3つ作成しました。)

❶ピックアップ(懸賞・お得情報を更新)
❷カテゴリー
❸ノウハウ(ノウハウ情報を更新)

以下ではピックアップの仕組みについてざっくり紹介していきます。

※Next.jsとmicroCMSで何か作りたい場合、microCMSのチュートリアルが非常に参考になるのでおすすめです。

❶ピックアップ

トップページにあるピックアップには、懸賞・お得情報のみが一覧で表示されます。

情報が表示されるまでの流れはざっくり、

❶microCMSにコンテンツを投稿
❷APIでデータを取得
❸サイトに反映される&詳細ページが作成される

といった感じ。

❶microCMSにコンテンツを投稿

microCMSでAPIを作成し、コンテンツを投稿します。

❷APIでデータを取得

APIを叩いてデータを取得。

取得したデータをコンポーネントに渡し、それぞれ反映させています。

❸サイトに反映される&詳細ページが作成される

その結果、画像①のように、取得したピックアップデータがサイトに反映されます。

画像②の詳細ページは、Next.jsの動的ルーティングにて生成されています。

動的ルーティングは、[id]のような、[ ]に囲まれたファイルを作成し、

APIでデータを取得し、そのデータをもとにURL一覧が作成され、(ビルド時に)静的ページが生成されるといった流れです。

ページにアクセスがあった場合はキャッシュが返されるだけなので、ページ遷移は高速です。

また、Next.jsのISRを使ってキャッシュデータを更新させるようにしてるので、新たなページが追加された場合や記事の内容を変更した場合でも、ビルドせずそれらをサイトに反映さることができています。

現在実装している機能・今後追加したい機能

現在実装している機能

通常の画面表示部分とは別に、実装した機能はこちらです。

❶SEO対策:next-seo
❷SNSシェア機能:react-share
❸グーグルフォント:
@next/font

❶SEO対策:next-seo

SEO対策は、ライブラリのnext-seoを導入しました。

titleタグやmetaタグの管理、OGP出力などが簡単に設定できて便利です。

また、このサイトでは懸賞・お得ページは内容が薄くなりがちなのでnoindexを指定しています。

❷SNSシェア機能:react-share

懸賞・お得情報やノウハウページにはSNSシェア機能を設定していますが、こちらはライブラリのreact-shareで実現しています。

用意されているコンポーネントを使えばいいだけなので、導入はかなり簡単。

以下コードのみで、TwitterとFacebookのシェア機能を実装できました。

❸グーグルフォント:@next/font

Next13のアップデートで導入された新機能です。

グーグルフォントは利用時に外部ネットワークにリクエストすると読み込み速度遅くなりますが、next/fontを使うとNext.js側でいい感じに最適化してくれます。

ローカルにフォントを入れた場合でも、リードタイムが早くなるとzennの記事にあったので導入してみました。

実装は以下コードのみで完了。

ハマった点としては、初回読み込み時だけ指定fontが反映されなかったこと。

デフォルトが「font-display: optional」になっていたので、「font-display: swap」を追加したらダウンロード後すぐ反映されるようになりました。

公式ドキュメントにしっかり記載されてましたが、ちゃんと読めていなかったのが原因です…(^_^;)

今後追加したい機能

今後追加したいと考えてる機能はこちらです。

  • 画面ダークモードON/OFF機能
  • PC表示時にサイドバー表示
  • ノウハウ記事ランキング機能
  • コメント追加機能
  • 懸賞期間終了後、コンテンツ自動削除機能
  • アカウント作成機能
  • 懸賞に応募したか否かチェックできる機能

ダークモードはNext.jsのlayoutとTailwindCSSを使えば比較的簡単に実装できそう。

記事のランキング表示はGoogleAnalyticsと連携しなければならず少しめんどくさそうですが、実現方法についてはmicroCMSが記事を用意してくれてるので、こちらを参考に実装しようと思ってます。

アカウント作成や認証機能、データ管理などについてはFirebaseを使えば実現できると考えてます。

Firebaseは過去に1度触ったことがありますが、ほとんど忘れてしまったので学び直しが必要になりそうです…。



おわりに

以上、懸賞・お得情報まとめサイトの「OTOKU!」について、技術記事として簡単にまとめてみました。

お得情報を更新するのはもちろん、これから少しづつ機能追加してアップデートしていく予定です。

ぜひ「OTOKU!」を通して、お得体験を楽しんでいってください!

\こちらの記事もよく読まれています/

ブログ村ランキングに参加中です。クリック応援頂けると更新の励みになります!

↓いつもクリック応援ありがとうございます😸

にほんブログ村 ライフスタイルブログ セミリタイア生活へ

コメント