React初心者がNext.jsでポートフォリオを作るまでの過程
React(Next.js)、microCMS、tailwind css、vercelを使って個人サイト（ポートフォリオ）を作成しました。
完成品
この構成はよく見るものですし、Zennで探したらいっぱい参考記事があるので作り方などの話はここではしません🙏
そこで、タイトルにもあるとおりReact初心者である私がポートフォリオを作るまでの学習ロードマップを書き記したいと思います。
わりと遠回りすることなく、学ぶべきところは学べたので多くのReact初心者の手助けになるはずです。
私のステータス
業務
Angular、typescript：2年
趣味
Flutter：半年
ロードマップ
学習ロードマップです
Reactチュートリアル
所要時間：2時間程度
チュートリアルを見ながら言われた通りのことをやりました。三目並べゲームを作るものです。
Reactの書き方(jsx記法)、状態管理、親子関係などを学べます。
Angularで育った私としてはjsx記法が理解しにくく手こずりました。Flutterの知識が少しあったのでそれと合わせてなんとか理解できました。
データのバインド {hoge}はAngularとほぼ同じでした。この辺りはAngular React Vueで似ていそうです。
Next.jsチュートリアル
所要時間：6時間程度、今でも必要に応じて見てる
ページを作成する方法やSSRなどのサーバーサイドの書き方を学びました。といってもNode.jsなのでJavaScriptしか書きません。
Next.js追加で学習
所要時間：1時間
Next.jsでTypeScriptやtailwind CSSの導入方法をググって↑のリポジトリに導入してみました。
TypeScriptで書きたかったのと、cssの勉強がてらtailwindを使ってみようと思ったのでどちらも導入できる方法を調べてみました。
リポジトリ作成
個人サイト公開（デプロイ）
vercelを使ってデプロイしました。
リポジトリ作成から公開までは1週間程度（実作業は15時間くらい？）でした。
デプロイするだけであればここまでで十分です。私の場合は独自ドメインも使いたかったので取得することにしました。
独自ドメイン取得
お名前ドットコムで独自ドメイン「noriyu.dev」を取得しました。費用は1円
vercelとお名前ドットコムの設定画面を行ったり来たりしてなんとかできました。
感想
ブログ機能にmicroCMSを使ったのは初心者にとってよかった点があります。
- ブログとその他の機能に分離して開発できる
- microCMSでブログを投稿するだけで自動的にデプロイできる
特にmicroCMSにはNext.jsでブログ機能を作るためのチュートリアルがあります。
この流れに沿っていくだけでブログを投稿したら自動でデプロイされるwebfookの設定までできるので簡単です。
ただし、外部サービスに依存しちゃうので将来的には変更するかもしれません。
候補は
- 同リポジトリに記事を作る
- Notionに記事を書いてNotion APIを使う
を考えています。Notion APIはまだベータ版なこともあって様子見です。
最後に
では日々アップデートを続けています。
リポジトリも公開しています。
issueを随時募集しているので、何か改善点があればさりげなくissue登録していただけると嬉しいです。
Discussion