Serverless Next.jsをCloud Functionsにデプロイする

Next.jsとFirebaseで個人開発をしています。その際にNext.jsのexamplesを見ると従来のserver modeでの例はありましたが、Next.js 8で追加されたserverlessモードの例はなくちょっと困ったので、記事に残しておきます。

Serverless Next.js

next.config.jsにtarget: 'serverless'を指定すると有効になる。

ページ単位でビルドされ.next/serverless/pages以下に出力される。

pages/index.js => .next/serverless/pages/index.js

例えばNode.jsのhttpモジュールを使った際のコードは次のようになる。（公式サイトの例より）

const http = require('http')
const page = require('./.next/serverless/about.js')
const server = new http.Server((req, res) => page.render(req, res))
server.listen(3000, () => console.log('Listening on http://localhost:3000'))

Cloud Functions

以上のことを抑えてCloud Functions形式のコードを書くと次のようになる。
ビルド後のパスを指定して各ファイルごとにexportするのがポイント。

const onRequest = require('firebase-functions').https.onRequest

const index = require('./next/serverless/pages/index')
const about = require('./next/serverless/pages/about')

exports.index = onRequest((req, res) => index.render(req, res))
exports.about = onRequest((req, res) => about.render(req, res))

参考