Next.jsとCloudflareでポートフォリオサイトを作った

今回はモダンな技術でポートフォリオサイトを作ったので紹介します。

使用した技術は

• Next.js
• Cloudflare Pages
• shadcn/ui
• heroicons

です。

作成したサイトの概要

選定理由の前に、まず作ったサイトを紹介します。

是非アクセスして見ていただけると嬉しいです。

https://portfolio.neoserv.app/

全体はこんな感じです。メインページはシンプルになっていて、右上にボタンと下にターミナルがあるだけなシンプルなデザインにしています。

ここのターミナルでは実際に文字を打つことが出来ます。

現在では、

• ls -l
• cd [path]
• help

のコマンドを使用できるようにしています。

それらのコマンドを打つと、ChatGPTの返答の時みたいに一文字ずつ表示が返ってくるような形式で値が出力されます。

最初はいきなり文字列が出力されるような形にしていましたが、なにか味気なくて一文字ずつ出力すように変えたらワクワク感があって非常に楽しく感じるようになりました。
個人的に一番好きなポイントなのでぜひ試してみてほしいです。

そして、ターミナルでcdコマンドを使用したり、右上のボタンを押すことで他のページに飛ぶことが出来ます。
自分についての細かい詳細はここにまとめています。

技術の選定理由

Cloudflare Pages

Cloudflare Pagesを選んだ理由は、無料でサイトを公開できる点と、一定のアクセスに耐えられることです。
使ってみて非常に使いやすく、購入したドメインをカスタムドメインとして利用でき、Gitのmainブランチにpushするだけで自動更新される機能も便利です。
Cloudflare Web Analyticsも簡単に導入できるらしいので使ってみたいと思っています。

使ってみてとても優れたサービスだったので、個人でも使っていきたいし、これからもっと使われるようになるのかなと思いました。

Next.js

Next.jsは、いろいろな案件とか調べてるとNext.jsやReactを募集していることが多かったから、自分もかけるようになりたいと思い、使ってみました。
有名なライブラリということもあり情報がたくさんあってつまづいてもすぐ立ち直れる感じがしました。

shadcn/ui

shadcn/uiは、Radix UIとTailwind CSSを使って書かれたUIコンポーネントをまとめたもので、インポートするだけで充実したコンポーネントを使うことができるものです。
今回は右上のハンバーガーメニューのボタンを押したときに表示されるドロップダウンメニューに使用しました。
通常なら作るのにメニューを開いているかの判断変数やかなりのcssが必要になるがインポートだけで簡単に使えて非常に便利でした。

https://ui.shadcn.com/

heroicons

heroiconsは、tailwindで使いやすいアイコンを使えるライブラリです。
一行で次の豊富なアイコンをつ開けて非常に便利です。

https://heroicons.com/

最後に

モダンな技術で作ってみて、開発が非常にスムーズに進むなと感じました。

昔ながらの技術も安定していて良いが、個人開発ではモダンな技術だと速度が爆速になって飽きる前に個人開発が終われる気がします。

状況によって使った方が良い技術スタックは変わりますが、個人開発という面においては、個人的にこの技術スタックは非常におすすめです。

前から作ろう作ろうと思っていたポートフォリオサイトを簡単ではありますが、形にできてよかったです。
また、自己紹介ページはまだ完成ではないので、時間が空いたときにサイトを更新させたいと考えています。

Xもやっているので、ぜひフォローしていただけると幸いです。