Next.jsで自己紹介サイトを作成
まえがき
何か一つ簡単なものでも形にして外にアウトップットしようと
常々思ってはいたのですが、なかなか実行はできていませんでした。
やはり外へ公開となると、一気にハードルが上がってしまい
二の足を踏んでしまう方もいるのではないでしょうか？
恥ずかしながら自分もその一人です^^;
ただ今回、たまたま案件でReactを触る機会があり、
React未経験だったこともありかなり苦労して学習したところでした。
背景もあって、せっかく勉強したReactの個人的な最初のアウトプットとして
出来る限りハードルを下げて短期間に小さく形になるもの
リリースできるものとして、自己紹介のWebサイトを題材してみました。
ちなみに自分のフロント回りのスキルはこんな程度
- CSS、Sass、HTMLが書ける
- TailWindを利用した簡単なデザイン、レイアウト
- Vue.js（2~3） を使用したフロントエンド開発経験が数年
- TypeScriptが書ける
目次
概要
スタートはReact&TypeScript&Viteを利用し
とにかくシンプルにシングルページでトップページ、自己紹介、
略歴、スキル、成果物(と言ってもほとんどないですが..^^;)
の構成でそれぞれセクションごとにコンポーネントを分けて作成しました。
定番の「トップページへ戻る」や「Intersection Observe API」を利用した効果
に関してはVueでコンポーネントを実装した経験があったため
学習がてらそれらを書き換えてみました。
最後にどーせなら特にホットなNext.js(13.4)を利用してみようと思い
公式サイトを見ながらVite上で作った物をNext.jsへ移行して
動く状態に持っていきました。
※丁度NextがPage RouterからApp Routerへの過渡期だったこともあり
情報が混在しており、混乱したりもしましたが、公式ドキュメントを見ながら
App Routerへ乗せることができました。
最後に公開方法はGithub Pagesを使おうと持っていたのですが
Publicリポジトリである必要があったりと、条件があったため
Next.jsと相性の良いVercelの公開サービスを利用することにしました。
こちらもGitHubと連携、CI/CDも非常に簡単でほとんど迷うことなく
リリースまでもっていくことができました。
※こちらがサイトです
www.techpiro.net
使用技術
まとめ
Nextを使ったアプリケーションとはいきませんが、
静的ページを比較的スムーズに公開することができました。
ステート、ロジック、SSR、バックエンドと連携といったことは一切していないので本当に、
さわり部分ではありますが、Reactを活用して何かを形にして公開する最初の一歩としては
ハードルはぐっと下がりますので、キャリアの棚卸がてら自己紹介サイトは
自分のような入門者の方もとてもおすすめです！
