😍
【個人開発】ProfileサイトをNextJsで作り直した！！！
作り直そうと思ったきっかけ
- ポップ感がない
- デザインがダサい
- 色がダサい
- React使いたい
- ChakraUI使いたい
作り直す前のサイトのスクリーンショット
技術選定
-
NextJS
- app routerを使ってみたかった
-
ChakraUI
- cssがめちゃくちゃ苦手でもサクサク実装できてた楽しい
完成したサイト
こだわりポイント
- ヘッダー、フッターのグラデーションはお気に入り。
- Gopherの画像の配置でフッターに足がかかっているところがお気に入り。
- 全体的に丸い印象になるように調整した。
- 前のプロフィールサイトでいまいちだった、ポップ感がないところは解消できたかなと思っている。
- 少し、レスポンシブにもこだわった
難しかったポイント
- 割と詰まるところはなく、レイアウトの実装に集中できた
- use Clientやサーバーコンポーネント、クライアントコンポーネントなどの違いの部分は難しかった
デプロイ時に少し詰まった
- デプロイ直前にコンポーネントのファイル名を変えてしまって、GitHub上のコンポーネントのファイル名とインポートする際のファイル名が異なっていてビルドできずにエラーになった。
- gitから削除して、バックアップから復元するという手間がかかった。
まとめ
- かなり開発体験としては良かった
- 丸一日かかったが、完成したので満足。
- ６、７月は、クリーンアーキテクチャにテスト駆動開発に、フロントエンド開発にかなり趣味開発が充実していた。
- ８月以降は、また、サーバサイドに戻り、gRPCとかGraphQLとかを実装していきたい。(何を作るかは未定)
Discussion