Deploy Next.js to Firebase for SSR and API Route

Next.js template with TypeScript installed

In the previous article, I introduced the template of Next.js with TypeScript installed.
This time, I will introduce how to deploy the application created with this template to Firebase.

I also created a template with Firebase settings installed, so if you want to deploy to Firebase, create a project from here.
https://github.com/redimpulz/nextjs-typescript-starter-with-firebase

About deploying Firebase in Next.js

https://qiita.com/1amageek/items/0d01dca2148df345224a

As explained in detail in the above article, for projects that do server-side processing such as SSR and API Route ,

• Firebase Hosting: Delivery of static content
• Cloud Functions: Server-side processing

You can deploy serverless by using these two services.

nextjs-typescript-starter-with-firebase

This template is based on nextjs-typescript-starter and has settings to deploy to Firebase.

How to use

yarn deploy

Since the deploy command is described in the npm script, npm run deployit can be deployed with.

Explanation

.firebaserc

{
  "projects": {
    "default": "<project-name-here>"
  }
}

Please rewrite the project name to your own

firebase.json

{
    "hosting": {
        "public": "public",
        "ignore": ["firebase.json", "** /. *", "** / node_modules / **"],
        "rewrites": [{ "source": "**", "function": "nextApp" }]
    },
    "functions": {
        "source": ".",
        "predeploy": ["npm install", "npm run build"],
        "runtime": "nodejs10"
    }
}

• Firebase Hosting reflects the contents of the public directory
• I try to pass Firebase Hosting requests to Cloud Functions
• Next.js supports Node.js version 10.13 or later, so runtime":"nodejs10"specify

functions/index.js

const { https } = require('firebase-functions');
const { default: next } = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, conf: { distDir: '.next' } });
const handle = app.getRequestHandler();

exports.nextApp = https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl);
  return app.prepare().then(() => handle(req, res));
});

• It is a function that is the entry point of Cloud Funtions, and the request is passed to the Next.js application.

Other notes

To use Node.js version 10 or later with Cloud Functions, you need to have a pay-as-you-go Blaze plan

Summary

I introduced how to make Next.js compatible with SSR / API Route and deploy it to Firebase.
In the case of Next.js, I think that deploying to Vercel is the easiest, but I think that some people want to deploy to Firebase, so please refer to it as a good reference!