with Firebase Hosting example
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
Make sure that firebase is set up and you have the projectID
How to use
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
.firebaserc and add your firebase project ID.
To run Firebase locally for testing:
npm run serve # or yarn serve
To deploy it to the cloud with Firebase:
npm run deploy # or yarn deploy
To use Typescript, simply follow Typescript setup as normal (package.json scripts are already set).
npm install --save-dev typescript @types/react @types/node
Then you can create components and pages in
firebaseFunctions.js must remain in
Good to know
firebase.jsonoutlines the catchall rewrite rule for our Cloud Function.
- The empty
public/.gitignorefile is to ensure
public/dir exists as it is required for Firebase Hosting. It is configured (by default) that dotfiles (
public/.*) are ignored from being 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.
Next App is in
The crucial files for the setup: