Udemy講座でNext.jsブログ作成にチャレンジ
X（旧Twitter）のFFが個人ブログを作成していた。
覗きに行ってみたらすごくいいデザインで感動した。ついでに記事としてブログ作成に至った経緯が書かれていた。
最初はデザイン系のポートフォリオに書けるから良くない？みたいな流れからプログラミングを独学で勉強してブログ完成に至ったそうだ。えーすごい！知識ほぼゼロからブログ完成までできるなんて！！
ブログ完成までの経緯の記事を読んでて、僕はふと思った。
「これ、僕も個人HP作ってみようかなぁ」
正直技術的な練習にちょうどいいな、と思った。今後仕事で使う技術は主にフロントエンドの技術。それなら個人HPの作成はその練習にはかなり適しているように思う。
それにサーバーの知識とか、コンポーネント分けの構成とか、Gitの使い方とか……色んな知識の獲得につながりそうだし、やって損をするということはないだろう。
――と、いうことでやってみることにしたけどまず何から手をつければいいのか全く分からない。
とりあえず仕事でNext.js というフレームワークを使うので、これを使って個人HP作ってみたいけど……と、迷ったらとりあえずUdemyで調べてみる。会社の福利厚生で全部無料で見れるので、金額を気にすることなくどんな講座でも見れるので、ここによさげな講座があればいいんだけど……
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
こちらの講座がよさげだったので受講してみることにした。
Next.jsの環境構築から、基礎的なコーディング、レンダリング手法などを学んで、最終的にはVercelを用いてデプロイまで行う。まさに個人HP作成に必要な知識を一気通貫で学べる講座になっていた。
3日くらいかけてこの講座を学習したわけだけど、最終的には
こんな感じのものが出来上がった。これはGithubにあげたプロジェクトをVercelでデプロイしたものだね。
コードの構成はこんな感じ。
よくわからんだろうけど「なんか頑張ったんだろうなぁ」くらいに思ってほしい。
特に苦労したのはGetStaticProps関連。なんかSSRってやり方をするにはこれを使わないといけないんだけど、引数の型関連でずっとエラーが出てた。
2-3時間調べて、ようやくわかったのは引数に「？」をつければOKということ。
引数が「undifined（未定義）」で渡される可能性があるんだけど、「？」をつけると未定義でもOK！！ってことになるらしい。
頑張って調べたのが1文字で解決できるのは、なんというか……僕はそんな簡単なことで躓いていたのか……って少し落ち込むよね。
まぁなんにしろ、これで個人HPの基盤は出来上がったので、ここから改めて作成しようと思う。
デザインとかなんも分からんけど……まぁなんとかなるやろ！最悪平成初期の趣ある感じにすればいいし！！
