U-DAYSのテキストロゴ

検索アイコン

Next.jsとContentfulでテックブログを作成する方法

ReactNext.jsContentful
Next.js + Contentful でテックブログを作成する方法

ブログを開設した経緯

現状、発信しているコンテンツが会社の開発者ブログくらいしかないので、そろそろ個人としても発信できる環境を整備しようかなと思い、開設に至りました。

なぜ自作ブログなのか

発信する環境として、最近だと Qiita や Zenn などがありますが、なぜそのあたりを使わないかというと、せっかく個人として発信するのだから自分のドメインで配信したいという自己満からです。 また、単純にブログを作るのが好きなので作ってみました。過去にもブログを作っては壊してを繰り返しています。

このブログで扱っている技術やサービス

タイトルにもあるように、このブログでは React のフレームワークの Next.js と Headless CMS の Contentful 、ホスティティングサービスの Vercel を利用しています。

Next.js とは

"The React Framework for Production"
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

つまるところ、高機能でDXが最高な React 製フレームワークということです。実際、独自での設定がほとんど必要なく、そのまま本番で公開することができるのでかなり快適です。 それでいて、SSG や ISR ができるので、ハイパフォーマンスで公開できます。 SSG や ISR についての詳細は下記のページが参考になると思います。

公式サイト: https://nextjs.org/

Contentful とは

"The content platform for the modern tech stack"
Cloud-native. API-first. Endlessly extensible. We help you manage, integrate and deliver content across every digital channel.

つまり、クラウドで管理されたAPIファーストのコンテンツ管理サービスです。ブログ記事やユーザー情報などのコンテンツを API で提供できるようにしたものと考えて良いと思います。 実際に、この記事やページ内に設置されているプロフィール、記事に付けられたタグなども Contentful 上で設定して、 API 経由で Next.js で受け取っています。 サーバレスで構築できるのでフロントエンドが好きなエンジニアとしてはとてもありがたいです。

公式サイト: https://www.contentful.com

Vercel とは

Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

公式ページではこの文章に後述されているのですが、これも Next.js と同じく DX の向上を掲げているホスティングサービスになります。 GitHub と連携して、 Push すると即座に Preview 環境がデプロイされたり、 Merge すると Production にデプロイされたりと、特別な設定なくインフラ環境を整えることができます。 恩恵を受けるほど活用はしていませんが、スケーラビリティも高いと書かれています。

公式サイト: https://vercel.com/docs

このブログの今後について

今後は、このブログを通して様々な発信をしていきたいと考えています。 過去にも何度かブログを作って数記事書いては壊すというのを繰り返していたのですが、今回は本格的に運用していけたらいいなと思っています。