Next.js＋Firebase Hostingでブログ構築

Next.js＋Firebase Hostingでブログ構築しました。今後はこちらに投稿します。。

ブログ
ソース

参考にさせていただいた情報

Next.jsでのブログ立ち上げ

ssgでnext/imageを使うとビルドエラー
→imgを使うか、ここを参考にする

Next.jsでページ共通の処理をする

React-playerがHydration errorを出す
→react-playerをdynamic importする

import dynamic from 'next/dynamic'
const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });

Firebase Hostingにデプロイするときの注意点

・出力ディレクトリはoutを指定
・next.config.jsにtrailingSlash: trueを追加
・scriptsに"export": "next export"を追加

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },

・ビルド→エクスポート→デプロイという流れで行う。これを自動化するにはfirebase.jsonを修正すればいい。firebase.jsonのhostingの下に"predeploy": "npm run build && npm run export",を追加。

firebase.json

{
  "hosting": {
    "predeploy": "npm run build && npm run export",
    "site": "<app名>",
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

そして、

firebase deploy --only hosting:<app名>

でデプロイ