Next.js + Contentful + Vercel でブログを作りました

blog

表題の通りです。

Next.js + Contentful + Vercel でブログを作りました。

目的

衝動的に作りましたが、いくつか目的があります。

  • お仕事で触っているフロントエンドのフレームワークがNext.jsなのでチュートリアルぐらいはやっておきたいなって思っていた

  • ブログがほしいと漠然と思っていた

    • とはいえはてなブログで作ってもすぐ飽きそうだし、WordPress触る気もそんなに起きなかった

  • 訳あって暇だった（落ち着いたら記事にしたい）

できたもの

このブログ。Contentfulの管理画面から記事の投稿や編集を行うと、Vercel上で動いているNext.jsのappがbuildされ、静的コンテンツが作られてそれらが配信されます(SSG)。コンテンツの管理はContentfulにおまかせしており、ブログの更新はContentfulの管理画面で行っていきます。表示を変えたくなったらNext.js側の実装を変えていきます。

やったこと

  • Next.jsのチュートリアル

    • ほぼこれがメイン。

    • 基本のやつとTypeScript化のやつ（SEOのやつは今度進めていきたい。）

    • 英語だけど一つ一つの分量は多くないからそこまで苦にならずに進められた。

    • チュートリアルを進めていくとどんどんポイントが加算されていくの楽しい。

    • クライアントサイドで環境変数を呼び出すときはNEXT_PUBLIC_命名規則がある。

      • 後述するContentfulを呼び出すときにハマっていました。

    • Next.jsを使うメリットのひとつとしてSSR/SSGがある。これらの主な目的はパフォーマンス向上とそれにともなうSEOの向上。TTFB(Time To First Byte)という最初の1バイトが届くまでの時間という概念を知る。

  • Vercelの設定

    • ホスティングサービス。 Netlify みたいなやつ。

      • RailsのチュートリアルをすすめるとHerokuにつながるように、Next.jsのチュートリアルを進めると流れるままに Vercel を使わされる。特にこだわりはないので便乗。

    • Netlifyと同じく、PRを作るとプレビューが作られるの体験いいですね。

      • DPS: Develop, Preview, and Shipって呼んでいるらしい。

    • 今でこそマージしたらデプロイが当たり前みたいな雰囲気あるけど毎回感動しちゃう。

    • 初めて使ったけどとても使いやすかった。

  • Contentful

    • Headless CMS (Contents Management System)

      • フロントエンドを持たないCMS

      • Headless はフロントエンドがないことを表している。

        • フロントエンドレスじゃあかんのか？って気持ちがある。

    • UIポチポチしてどんな構造を持ちたいか設定する。

      • ユニーク制約とかnot null制約とかを設定できる

      • テーブル設計する感覚で作れる

    • 当然Next.js側でやり取りするためのライブラリがある

      • ラッパーしているだけなのでこんなAPIないかな〜って思ったら公式ドキュメントを見ればいい

    • コンテンツを更新するタイミングでbuildをさせることができる

      • VercelでbuildするためだけのWebhookを作ることが可能で、Contentfulの設定でWebhookを呼び出すことができる

      • 結果、SSGできてパフォーマンスを良くすることができる

      • なお、webhookを呼ぶタイミングについて一つ注意があります。Autosaveは外しましょう。

      • first-blog-001

      • なぜなら編集中にwebhookを無限に呼び出してしまうため、一瞬でVercelの無料枠を消費しまうからです （つらい）

      • first-blog-002

ふりかえり

チュートリアルでしたが、Next.jsに対する親近感をだいぶ抱きました。よかったです。 あとブログを持つことができたので、これからいろいろと発信していきたいです。

← Back to home