8618ab85ad
Again, related to [12964](https://github.com/zeit/next.js/issues/12964) After checking all the other examples and the ongoing pull requests, I believe that with this PR being merged, all the examples should be free of redundant react imports. Let me know if you want me to edit anything that you don't like. Regards with-typescript with-atstroturf with-atlaskit with-styletron with-styled-components-rtl with-stylesheet with-stomp with-stitches-styled with-stitches with-slate with-sentry-simple with-sentry with-segment-analytics with-rematch with-relay-modern with-reflux with-redux-wrapper with-react-relay-network with-react-native with-react-multi-carousel with-react-jss with-react-helmet with-react-ga with-quill-js with-prefetching with-google-analytics-amp with-google-analytics with-framer-motion with-flow with-firebase-hosting with-firebase-cloud-messaging with-firebase-authentication with-expo with-dynamic-app-layout with-draft-js with-cxs with-cerebral with-ant-design-mobile with-algolia-react-instantsearch using-preact progressive-render |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .firebaserc | ||
| .gitignore | ||
| firebase.json | ||
| firebaseFunctions.js | ||
| package.json | ||
| README.md | ||
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
- Install Firebase Tools:
npm i -g firebase-tools - Create a project through the firebase web console
- Login to the Firebase CLI tool with
firebase login - Grab the projectID from
firebase projects:listor the web consoles URL:https://console.firebase.google.com/project/<projectID>
How to use
Using create-next-app
Execute create-next-app with npm or Yarn to bootstrap the example:
npm init 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 manually
Download the example:
curl https://codeload.github.com/zeit/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
Typescript
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.
Good to know
firebase.jsonoutlines the catchall rewrite rule for our Cloud Function.- The empty
public/.gitignorefile is to ensurepublic/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"}inpackage.jsonis required and the latest supported by firebase functions.
Customization
Next App is in src/ directory.
The crucial files for the setup:
.firebasercfirebase.jsonfirebaseFunctions.jssrc/next.config.js- In
package.json:firebase-*packages andenginesfield
Caveat
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.