Set up firebase
- install Firebase Tools:
npm i -g firebase-tools
- create a project through the firebase web console
- grab the projects ID from the web consoles URL:
https://console.firebase.google.com/project/<projectId>
- update the
.firebaserc
default project ID to the newly created project - login to the Firebase CLI tool with
firebase login
Install Project
npm install
npm run dev
npm run serve
npm run deploy
npm run clean
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.
- The empty
placeholder.html
file is so Firebase Hosting does not error on an emptypublic/
folder and still hosts at the Firebase project URL. firebase.json
outlines the catchall rewrite rule for our Cloud Function.- Specifying
"engines": {"node": "8"}
in thepackage.json
is required for firebase functions to be deployed on Node 8 rather than Node 6 (Firebase Blog Announcement) . This is matched insrc/functions/.babelrc
so that babel output somewhat compacter and moderner code.
Next App and Next Server development are separated into two different folders:
- app -
src/app/
- server -
src/functions/
If you wish to modify any configuration of the Next App, you should only modify the contents of src/app
.
For instance, the .babelrc
in src/functions
is used only to compile the Firebase Cloud Functions code, which is our the Next Server code. If you wish to customize the .babelrc
for the Next App compilation, then you should create one at src/app/.babelrc
and follow the customization guide.
If using _app.js
you may receive the following error on your deployed Cloud Function:
{ Error: Cannot find module '@babel/runtime/regenerator'...
Despite next.js having @babel/runtime
as a dependency, you must install it as a dependency directly in this project.