The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL. Each individual page bundle is served in a new call to the Cloud Function which performs the initial server render.

If you are having issues, feel free to tag @jthegedus in the issue you create on the next.js repo

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-firebase-hosting with-firebase-hosting-app
# or
yarn create next-app --example with-firebase-hosting with-firebase-hosting-app

Update .firebaserc: adding your firebase project ID

Download the example:

curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase-hosting
cd with-firebase-hosting

Update .firebaserc: adding your firebase project ID

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

# to run Firebase locally for testing:
npm run serve

# to deploy it to the cloud with Firebase:
npm run deploy

To use Typescript, simply follow Typescript setup as normal (package.json scripts are already set).

i.e: npm install --save-dev typescript @types/react @types/node

Then you can create components and pages in .tsx or .ts

Only src/next.config.js and firebaseFunctions.js must remain in *.js format.

• firebase.json outlines the catchall rewrite rule for our Cloud Function.
• The empty public/.gitignore file is to ensure public/ dir exists as it is required for Firebase Hosting. It is configured (by default) that dotfiles (public/.*) are ignored from bein publicly served.
• The Cloud Function is named nextjsFunc (changeable in firebaseFunctions.js and firebase.json).
• public/* files are statically served through Firebase hosting, not through NextJs server.
• Specifying "engines": {"node": "10"} in package.json is required and the latest supported by firebase functions.

Next App is in src/ directory.

The crucial files for the setup:

• .firebaserc
• firebase.json
• firebaseFunctions.js
• src/next.config.js
• In package.json: firebase-* packages and engines field

Because firebase functions require "engines": {"node": "10"} (or 8) to be specified (in package.json), if you are using yarn (instead of npm), you will need to add flag --ignore-engines.

• geovanisouza92/serverless-firebase repo
• jthegedus/firebase-functions-next-example repo
• this medium article
• Crash Course: Node.js apps on Firebase Hosting
• Official documentation.