「道の駅徹底ガイド」という、全国の道の駅を探せるサイトを作りました。
https://www.michinoeki.app/
同名のiOS/Androidアプリを4年ほど運営していて、そこで投稿された写真やクチコミから道の駅を探せます。
構成
Next.js製で作っており、データはmicroCMS + Firestore、Vercelでホスティングしています。
詳細はこんな感じ。
基本的にはビルド時にHTMLを構築するStatic Site Generation（SSG）で作られており、検索画面など一部の画面は動的に動いています。
Next.jsのチュートリアルが神
Next.jsでは公式がチュートリアルを提供してくれています。
https://nextjs.org/learn/basics/create-nextjs-app
Webフレームワークの利用は初めてだったのでとても助かりました。
特にStatic Site Generation（SSG）やServer Side Rendering（SSR）など、なんとなく理解していた部分が丁寧に説明されており知識が補完されました。
簡単なブログを作ってVercelにホスティングする内容ですが、APIを叩いてデータをHTMLで表示するような基本的なサイトは作れるようになります。
神チュートリアルです。
Tailwindでそれっぽい見た目を簡単に
見た目がしょぼいとやる気が続かないので見た目は重要です。
今回はTailwind CSSを使ってレイアウトを組みました。
https://tailwindcss.com/docs
Tailwindでは例えば class="mt-6" とクラス指定して上にマージンを空けられます。自分で一行もCSS書かなかったです。
CSSにまったく自信ないのでとても助かりました。
さらにTailwind UIという、Tailwind CSSで作ったコンポーネント集も利用しました（有償だが一部無料）。
色々なテンプレが用意されていてコピペで使えます。ありがたいです。
ホスティングはVercelで
できたWebサイトはVercelでホスティングしています。
GitHubのリポジトリを選ぶだけで簡単にデプロイできるし、デプロイごとに個別URLも吐いてくれます。
過去のデプロイ時のページも確認することができ、これで無料はすごいですね。
ドメインはGoogle Domainsで取得して設定しました。Google DomainsとVercelのダッシュボードでポチポチして30分くらい。
結構昔はお名前.comで取ってDNSサービス当てて24時間くらい待った挙句設定失敗してたりしたので簡単になっててうれしいです。
ちなみに定期的に再ビルドしたかったので↓のようにGitHub Actionsで定期ビルドしています。
GitHub Actionsを使ってVercelにホストしてるサービスを定期的に再ビルドする
Next.jsは利用者のブログも多い
Next.jsは人気があり、色々な方がブログやZennで使い方を紹介してくれてます。
初学者の自分にはとても参考になりました。以下に一部を紹介します。
Next.js + microCMSとの連携
https://zenn.dev/hiro08gh/articles/a953f46a839ee7
Recoilによる状態管理
https://ics.media/entry/210224/
また、自分でも少しまとめました。
- Next.jsでパンくずリストを実装する
- Next.js + Recoil + useSWR でシンプルな検索機能を実装する
- Next.jsでGoogle Mapsを表示する（react-google-maps/api を利用）
- Next.jsでFirestoreからデータを取得して表示する
今回はJavaScriptで作ったのですが、書かれてるブログなどを見るとTypescriptで書いてる人が多いようでした。
まとめ
Next.js + Vercel でSSGでビルドしたことで高速なWebサイトを作ることができました。
Next.jsは使い方がわかりやすく、実装のしやすさはもちろん今後のメンテもしやすそうな印象です。
これからWebサイトを作る方のお役に立てばうれしいです。
