Next.jsのBlog Starter Kitが初心者の学習に良いと思う
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が初心者の学習に良いと思う理由です。