RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

Next.js + tailwindcss + microCMS + Vercelで写真のポートフォリオサイト作ってみた

年末の技術の勉強もかねて簡単な写真のサイト作ってみました。

photo.mismith.me

作った理由

  • 個人の写真まとめサイトとして500pxを使っていたが、純粋に写真だけ一覧できるようなサイトが欲しかった(500pxはSNSなのでいろいろと余計なものが表示される)
  • Next.jsやtailwindcss、Vercelなどを使いたかった(今年まったく技術追ってなかったので...)
  • 実はWordPressで写真サイト作ってたけど、レンタルサーバー解約してコスト抑えて運用したい

Next.js + microCMS

フロントはNext.jsで、写真の更新にmicroCMSを使うことにしました。基本的なことはmicroCMSのブログを参考にスキーマ等を変更して作ってます。日本製CMSでドキュメントが日本語で詰まることないですし、ブログ記事も豊富ですごく嬉しいです。管理画面も使いやすい。

microcms.io

next/imageが便利

写真を並べてるサイトなので、ただ並べただけでは当然Lighthouseで怒られました。しかし、v10で追加されたnext/imageを使うことで全て解決してくれました。

以下の参考サイトに書かれてるとおり、外部サイト(microCMS)から画像を参照するのでnext.config.jsを作成し、以下を書いています。

module.exports = {
  images: {
    domains: ['images.microcms-assets.io'],
  },
}

zenn.dev

tailwindcss

スタイリングはtailwindcssを使ってみました。tailwindcssはユーティリティファーストなCSSフレームワークです。今回はtailwindcssを使うことでCSSは全く書かずにスタイリングしました。

Next.jsでtailwindcssを使う

公式の手順に沿ってやれば問題なく導入できました

tailwindcss.com

チートシート

チートシートを参考にclassNameをひたすら当てていきました。チートシートありがたい!

nerdcave.com

Components

こういうスタイリングしたいけど、どうやったらいいんだろうって時に、類似のコンポーネントを探すと役立ちました。

tailwindcomponents.com

hover

マウスオーバー時は className="text-gray-400 hover:text-gray-600" と書く。focusなども一緒。

tailwindcss.com

ブレイクポイント

デフォルトで用意されてるブレイクポイントを使うには className="md:w-32 lg:w-48" と書けばOK

tailwindcss.com

独自のUtilityを追加

チートシートにない独自のUtilityは導入時に生成された tailwind.config.js のpluginsで追加できました。

tailwindcss.com

アイコン

アイコンも用意されてます。便利。SVGかJSXをコピーして貼り付けるだけ。

heroicons.com

今回は使ってないですが、パターンもあるそう。

www.heropatterns.com

Vercel

Vercelではホスティングをして独自ドメインの設定をしました。

ホスティング

VercelでのホスティングやmicroCMSで更新した場合のデプロイの連携は冒頭で紹介した記事の最後の方を参考にしてます。

microcms.io

独自ドメイン

VercelのプロジェクトページにあるSettings > Domainsでドメインを追加、デフォルトのドメインはリダイレクトするように設定して、取得したDNS Recordsをドメイン側で設定したらできました。

Google Analytics

以下の記事を参考にしました。単に計測できたらいいのでイベントのところ以外を

panda-program.com

また、_document を初めてみたので、Next公式のこちらも

nextjs.org

さいごに

Next.js + tailwindcss + microCMS + Vercelで冒頭で書いていた用件を満たすことができました。Nextやtailwindcssがめんどうなところをカバーしてくれるので、簡単に公開までできました。

Next.jsもtailwindcssも便利ですが、まだ使いはじめなので、これからもっと知識つけて他のサイトに活かしたり、この写真サイトをブラッシュアップしていこうと思っています。

いい写真撮れたら更新するので、ぜひ見てください。