Next.jsをFirebaseで動かしてみる（with-firebase-hosting）

Next.jsをFirebaseで動かしてみたい。まずはサンプルをデプロイしてみる。

next.js/examples/with-firebase-hosting at main · vercel/next.js

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

github.com

必要ツールのインストール

# Next.js雛形作成ツール
npm i -g create-next-app

# Firebaseログインツール
npm i -g firebase-tools
firebase login

もしCloud9を使っていて、firebase loginでエラーが起きたらこちらを参考に。

Cloud9からfirebase loginする時のエラー回避の方法

Cloud9から「firebase login」コマンドを叩いてログインしようとしてもリダイレクトが上手く行かずにこんな...

blog.f-arts.work

サンプル作成

create-next-app --example with-firebase-hosting with-firebase-hosting-app
cd with-firebase-hosting-app

.firebasercファイルの<project-name-here>を自身のFirebaseプロジェクト名に変更する。

ここでnpm run deployしたが、私の環境ではエラーが出た。下記にエラー対処を記載。

create-next-appのdeployで困ったエラー『ReferenceError: Unknown option: .configFile.』

create-next-appのサンプル『with-firebase-hosting』を使いたかったのだが、deploy...

blog.f-arts.work

無事deployできた。ちゃんとFunctionsが叩かれていて想定する動きになっている模様。