Next.jsのBlog Starter Kitが初心者の学習に良いと思う

Cover Image for Next.jsのBlog Starter Kitが初心者の学習に良いと思う
monotalk
monotalk

このブログは、Blog Starter Kit をベースに作成していますが、自身も含めて初心者のNext.jsの学習には、ちょうど良いかなと思っています。 ちょうど良いと感じる理由をまとめておきます。


サイト公開にあたり、GitHubの操作、NetlifyやVercelなどのホスティングサービスの操作を学べる

サイト公開するために、ホスティングをする必要があり、その過程でGitHubの基本的な操作と、NetlifyやVercelなどのホスティングサービスの操作を学ぶことができます。Gitリポジトリは、BitBucketやGitLabなどを業務で利用しているのではあれば、そちらを使っても良いと思います。


良い感じにブログの機能が足りない。1つずつ実装することで、Next.jsをひととおり学べる

Blog Starter Kitには最低限の機能しかなく、個人的には、以下のような機能が不足していると感じます。1つ1つ実装していくことで、Next.js、React、TypeScriptはひととおり学べそうに思います。

ナビゲーション

  • ナビゲーションバー: サイト内のページ間を移動するためのナビゲーションバーを追加します。
  • ページング: 記事一覧ページにページング機能を追加します。

SEOと解析

  • Google Analyticsの導入: サイトのトラフィックを分析するためにGoogle Analyticsを導入します。
  • Google Search Consoleの導入: サイトの検索パフォーマンスを監視するためにGoogle Search Consoleを導入します。
  • Sitemap.xmlの生成: サイトマップを生成し、検索エンジンにサイト構造を伝えます。
  • robots.txtの生成: 検索エンジンにクロールの指示を与えるためのrobots.txtを生成します。
  • ファビコンの変更: デフォルトのNext.jsのファビコンを独自のものに変更します。
  • RSSフィードの生成: 記事の更新情報を配信するためのRSSフィードを生成します。

ユーザーインタラクション

  • コメント機能: 記事に対してコメントを投稿できる機能を追加します。
  • ソーシャルシェアボタン: 記事をSNSでシェアできるボタンを追加します。
  • 問い合わせフォーム: ユーザーが問い合わせを送信できるフォームを追加します。

コンテンツ管理

  • カテゴリー: 記事をカテゴリーで分類できるようにします。
  • タグ: 記事にタグを付けて分類できるようにします。
  • 人気記事の一覧の生成: 人気記事を一覧表示する機能を追加します。
  • タグクラウド: タグの使用頻度を視覚的に表示するタグクラウドを追加します。
  • コンテンツレコメンド: 関連記事を表示するコンテンツレコメンド機能を追加します。

パフォーマンスと最適化

  • 画像最適化: 画像のサイズを最適化してページの読み込み速度を向上させます。
  • LightHouseのスコア改善: Google LightHouseのスコアを改善するための最適化を行います。

収益化

  • Google Adsenseの導入: サイトに広告を表示して収益を得るためにGoogle Adsenseを導入します。

PWA対応

  • PWA対応(ホーム画面にアイコンを追加): PWA対応としてホーム画面にアイコンを追加します。
  • PWA対応(Web Pushの実装): PWA対応としてWeb Push通知を実装します。

思いついたものを列挙してみましたが、他にもあるかもしれません。


外部公開することで、集まるデータとそれへの興味と理解

ブログサイトを外部公開し、Web解析関連の設定をすることで、Google Search ConsoleやGoogle AnalyticsなどのWeb解析ツールへデータが収集されます。このあたりのデータを見て、コンテンツの改善をしていくと理解が深まり、その結果、業務としてこのあたりのデータを見ているWebマーケティング担当者や、PdMと会話ができるようになります。

書き出してみると3つしかありませんでした。。 以上が、Blog Starter Kitが初心者の学習に良いと思う理由です。