ブログ一覧に戻る
•5分で読める•by hana-boy

うまくいけば2時間くらいで、Nextjsで無料でブログをデプロイする方法1_Nextjsの準備

NextjsMicroCMSVercelv0

概要

元々バックエンドを担当しており、2025年現在はSREエンジニアをしているhana-boyです！
フロントエンドは、現場でVue.js、Nuxtを少し書いたり、インフラ環境を作ったことがあるくらいで、ページ丸々書いたことはないですが、自分のテックブログ欲しいなと思い、作ってみました。
自分自身は所々ハマっていましたが、うまくいけば2時間くらいで作れるんじゃないかと思っています。

注意事項

こちらはとりあえず作ることを考えていたり、わかりやすくするため、正確な表現ではない部分があるかもしれませんが、ご了承ください。
本職フロントエンドエンジニアの方からすると「適当なこといいやがって」ということあるかもしれません。
また、2025年6月時点で無料のサービスを使っていますが、将来的に有料化される場合もあるため、そちらもご了承ください。

Nextjsの環境作成、アカウント作成

Nextjsの環境作成

ローカル環境構築のために、Dockerfileとdocker-compose.ymlを用意します。
Dockerを利用していますが、もちろんWindowsやMacでNodejsの環境があれば、そちらでも可能です。

Docker自体のインストールについては以下を参照してください。
https://www.docker.com/ja-jp/get-started/

用意するコードは以下の通りです。
Dockerfile

FROM node:22-alpine3.20

WORKDIR /app

docker-compose.yml

services:
  app:
    build:
      context: .
      dockerfile: ./docker/node/Dockerfile
    tty: true
    volumes:
      - ./src:/app
    environment:
      - WATCHPACK_POLLING=true
    # command: sh -c "npm run dev"
    ports:
      - "13000:3000"

階層は、今後リソースが増えることも考慮して以下のようにしています。

.
├── README.md
├── docker-compose.yml
├── docker
│   └── node
│       └── Dockerfile

Vercelのアカウント作成

Vercelでは、Nextjsを無料でデプロイし、自動でドメインまで発行してくれます！(ありがたい！)
Nextjsデプロイのために、Vercelのアカウント登録が必要になりますので、以下からアカウント登録してください。
https://vercel.com/signup

商用利用などしないのであれば、無料プランで問題ないです。
余談ですが、広告での収益化やアフィリエイト等考えているのであれば、Google CloudのCloudRunなどおすすめです！
CloudRunであれば、Docker Imageだけ作成してやってインスタンスを0にしておけば、閲覧されない限りお金かからないので非常によいです。(すばらしい！)
CloudRun: https://cloud.google.com/run?hl=ja

MicroCMSのアカウント作成

以下を参照してMicroCMSのアカウントを作成します。
https://document.microcms.io/manual/signup

もちろん、StrapiやSanityのような他のヘッドレスCMSでもOKです！
ヘッドレスCMSを使うと、APIサーバーを作らずにコンテンツをAPIで配信してくれます。(感謝)

MicroCMSに登録できたら、APIキーの情報を確認してください。
APIキーはブログコンテンツの取得に必ず必要になります。

リンク

2へのリンク: コンテンツ作成中なので待ってね！

参考にしたサイト

Vercelデプロイ: https://zenn.dev/hayato94087/articles/b30efe589baa0e