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

このブログは、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が初心者の学習に良いと思う理由です。