Help us understand the problem. What is going on with this article?

Next.jsをSSRでFirebaseデプロイ

はじめに

next.jsをSSR(サーバーサイドレンダリング)でデプロイをしようと思い、
思いのほか、手間取ったので、ここでアウトプットしておきまーす!

next.jsをSSG(static generation)静的ビルドする場合はnext exportでoutディレクトリで良かったのですが、

SSRする場合は、cloud functionsをつかって、サイトアクセス時にHTMLを生成しないといけないようです!

デプロイまで

まずいつも通り

firebaseのコンソールでプロジェクトを作成しておいてください!

npx create-next-app your app
cd your app
//firebaseをグローバルインストールしていない方は
npm install -g firebase-tools
firebase login
firebase init 
//ここではhostingとfunctionsのみ選択そして既存のプロジェクトIDを選択

buildディレクトリ設定

module.exports = {
  distDir: "./.next",
};

今回はserver-side-renderingなのでbuildファイルは、.nextディレクトリになります!

firebase周りの設定

.firebaserc
{
  "projects": {
    "default": "your-projectId"
  }
}
firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextjsFunc"
      }
    ]
  },
  "functions": {
    "source": "./functions/",
    "predeploy": [
      "npm --prefix \"$PROJECT_DIR\" install",
      "npm --prefix \"$PROJECT_DIR\" run build"
    ],
    "runtime": "nodejs10"
  }
}

functionsのパスを設定
predeployでデプロイ前installとbuildをデフォルトで行うようにする

cloud functions関数作成

functions/index.js
const { https } = require("firebase-functions");
const { default: next } = require("next");

const isDev = process.env.NODE_ENV !== "production";
const nextjsDistDir = require("./next.config.js").distDir;

const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir,
  },
});
const nextjsHandle = nextjsServer.getRequestHandler();

exports.nextjsFunc = https.onRequest((req, res) => {
  return nextjsServer.prepare().then(() => nextjsHandle(req, res));
});

これで

firebase deploy --only functions,hosting

サーバーサイドレンダリングのデプロイが完了

nomu-008
トレーニング大好きの プログラミング始めたてのルーキーです! 言語はjavascriptとライブラリのreactを中心に勉強しております。 記事など至らない点が多くあると思いますが、ご指摘していただけると幸いです!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away