このレポジトリは、以下の人向けに作成した学習用レポジトリです。
- Next.jsを学びたい人
- React × TypeScriptを学びたい人
- Tailwind CSSを学びたい人
- 用意されたデザインを元にコーディングしたい人
「デモページ」をご覧いただくと分かる通り、内容はブログサイトになります。
静的ファイル生成、SPAのスキルを身につけたい方は、こちらの学習レポジトリがお役にたてば幸いです。
デモページ内のデータは全てダミーデータでローカルから読み込んでいます。
このレポジトリのコードを使ってブログサイトを運営したい場合は、
- Headless CMSを活用してデータを管理(microCMSなど)
- Headless CMSで管理しているデータを非同期通信などを使って取得する
- 取得したデータを利用する
といった感じで運用すると良いでしょう。
サイドバーに「カテゴリー」「アーカイブ」を用意していますが、「カテゴリーページ」「アーカイブページ」はあえて実装していません。
デザイン的にはトップページの記事一覧と同じような形になると思うので、ぜひトップページの実装を参考に「カテゴリーページ」「アーカイブページ」の実装にチャレンジしていただけたらと思います。
「目次機能」に関しては、後日実装する予定です。（いつ実装するかは未定）
もちろん、僕が実装する前に「目次機能の実装」にチャレンジしていただいても問題ありません。
- 開発系
- デザイン系
その他、開発で使っているライブラリなどの詳細は「package.json」をご覧いただけたらと思います。
以下リンク先のページで紹介している、LINE公式アカウントより質問をいただけたらと思います。
Next.jsやTypeScriptの概要をまずは学習したい方は、僕のサイトで公開している「Next.js&TypeScript体験シリーズ」を参考にしていただけたらと思います。
こちらでは「解説動画」「解説スライド」を使って、
- Next.jsとは何か？
- Next.jsでTypeScriptを使うにはどんな設定が必要か？
- Next.jsの学習をすると良く見かける「CSR, SSR, SSG, ISR」とは何か？
- 「Next.js × Material UI」でスタイルが整ったWebページを作る流れ
などを解説しています。
何から始めれば良いかわからない方は、以下リンク先のページを先にご覧いただけたらと思います。