Next.js: Add firebase example

Created on 18 Jan 2017  ·  23Comments  ·  Source: vercel/next.js

Anyone have any luck running firebase. I kept receiving errors that the firebase app had already been initialized. Does this have something to do with SSR? Whenever a hard refresh was done it would throw this error. I loaded my firebase config in the pages/index.js file and then called firebase.initializeApp(config).

good first issue
Source
picture knipferrc

Most helpful comment

@impronunciable maybe we should add an example for firebase, since it's pretty well know 😄

picture timneutkens on 18 Jan 2017
👍9

All 23 comments

@knipferrc This example uses firebase, it may help you https://github.com/now-examples/next-news

impronunciable picture impronunciable on 18 Jan 2017

@impronunciable maybe we should add an example for firebase, since it's pretty well know 😄

timneutkens picture timneutkens on 18 Jan 2017
👍9

Yes I still think it would be quite helpful to centralize examples, now they're a bit spread around:

Or at least link them all from a single place.

sedubois picture sedubois on 18 Jan 2017
👍4 ❤2

Might be good to add a open source example apps section. I know you did a lot of work on relate.now.sh @sedubois, nextgram is the official example app, and next-news is a side project from @rauchg, which serves as a really good example of a production app 👍. I made next-episode which is also a small sample app.

timneutkens picture timneutkens on 19 Jan 2017

Oh yes and there's also the examples listed in this issue: https://github.com/zeit/next.js/issues/727

sedubois picture sedubois on 19 Jan 2017

@rauchg @nkzawa @arunoda what's your opinion on adding a open source projects sections?

timneutkens picture timneutkens on 19 Jan 2017

@timneutkens I think it's better if we keep them in a wiki or in a awesome-nextjs list.
BTW: There's already an awesome next.js list here: https://github.com/unicodeveloper/awesome-nextjs

May be we could link to that list from our README. (Better to do it the top of the README)

arunoda picture arunoda on 19 Jan 2017

@arunoda Ah, great idea. I didn't know someone made an awesome list already 💯 Will add it.

timneutkens picture timneutkens on 19 Jan 2017

I think in order to make nextjs become more attractive to those that are new to web development, it is a good idea to include some examples and short tutorials for how to connect and use a database. How can you create realtime apps with nextjs?

arashsa picture arashsa on 30 Jan 2017

@arashsa i feel like the problems with examples ist, that they have to be maintained and the more examples you have the more likely it is that they end up hanging around outdated in the main repository(e.g. as least mobx and redux aren't working atm). I feel like a wiki list is the better approach as you can simply remove and add links to good maintained examples and delegate maintaining work to the repo owners.

@knipferrc I'm currently working on a short firebase+next.js tutorial series: https://blog.mvp-space.com/next-js-meets-firebase-and-mobx-ii-f89a6bbe7521#.5uw4ar4x8 feel free to check it out(till now it's just authentication - on monday a data subscription part will be added).

sakulstra picture sakulstra on 3 Feb 2017
👍2

Just added pr #1476, curious what you all think about my approach. I'm a new to Firebase so I might be missing some things.

captDaylight picture captDaylight on 22 Mar 2017

I posted this in another issue, but posting here as well - I also have a firebase+next.js example, that uses firebase-admin on the server. It renders firebase data both on the server and the client. next-example

nyura123 picture nyura123 on 23 Mar 2017

How can I deploy to firebase?

rebelliard picture rebelliard on 28 Mar 2017

@rebelliard did you manage to deploy it to firebase? Do you init the firebase project in the .next folder, and choose the 'dist' folder as your build?

SamMatthewsIsACommonName picture SamMatthewsIsACommonName on 31 May 2017

I've been working on a solution to Next.js on HOSTED on Firebase for the last month or so. I had some issues stopping me from posting sooner. Here's my solution https://github.com/jthegedus/firebase-functions-next-example and an accompanying blog post (as part of my series) that explains how I got this all working. I had help from @geovanisouza92 and collaborated on partial solution late last month here serverless-firebase

jthegedus picture jthegedus on 25 Jul 2017
👍1

Are there more examples of Next.js + Firebase? Preferrably using Redux?

I've tried using Next.js with both react-redux-firebase and react-rebase but I think both require serious tinkering to get to work with Next.js.

The Next-News example feels a bit verbose in structure, a framework would be nice.

I found this tutorial that uses Next.js + Firebase + Mobx: https://blog.mvp-space.com/next-js-meets-firebase-and-mobx-b3ae90d5b879 (note: series of articles).

tomsoderlund picture tomsoderlund on 28 Aug 2017

@tomsoderlund As I found with the Next.js hosted with Firebase Hosting getting the examples to be small enough to be digestible and prove the point at the same time is hard. It's going to be difficult to make an example using Redux, Firebase and Next.js that isn't verbose in structure. The required knowledge to understand all aspects of what is happening in such an example would be quite high. Implementing them each yourself by composing what you find from each of the individual examples will give a complete understanding of how they work together and a structure you desire. Since I'm personally heading down the Firebase, GraphQL, Next.js & Apollo pathway I won't be implementing the libraries you mention in any examples.

This is an older example I could find using Redux with Firebase - https://medium.com/@prescottprue/firebase-with-redux-82d04f8675b9

jthegedus picture jthegedus on 28 Aug 2017

@jthegedus Thanks!

The article you mention doesn't use Next.js though. I've had no problems with react-redux-firebase nor react-rebase with create-react-app, but I get weird Firebase-related errors when using with Next.js.

P.S. Apollo looks exciting, thanks for the tip! Please share any examples you create with that.

tomsoderlund picture tomsoderlund on 28 Aug 2017

My Next.js with Firebase Hosting article might cover some of the problems you are having with Next.js.

jthegedus picture jthegedus on 28 Aug 2017
👍7

@jthegedus Thanks!

tomsoderlund picture tomsoderlund on 28 Aug 2017
👍1

I made an example project using both next.js, firebase, and redux. Thought it might help others get started. Any feedback is appreciated.

NickDelfino picture NickDelfino on 26 Oct 2017
👍7

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

lock[bot] picture lock[bot] on 10 May 2018

Stats from current PR


Default Server Mode



General

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| buildDuration | 15.3s | 16s | ⚠️ +615ms |
| nodeModulesSize | 48.3 MB | 48.3 MB | ✓ |


Client Bundles (main, webpack, commons)

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.js | 18.9 kB | 18.9 kB | ✓ |
| main-HASH.js gzip | 6.79 kB | 6.79 kB | ✓ |
| webpack-HASH.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| 4952ddcd88e7..2b8407376.js | 21.9 kB | 21.9 kB | ✓ |
| 4952ddcd88e7..7376.js gzip | 7.81 kB | 7.81 kB | ✓ |
| de003c3a9d30..6604acae7.js | 43.2 kB | 43.2 kB | ✓ |
| de003c3a9d30..cae7.js gzip | 15.5 kB | 15.5 kB | ✓ |
| framework.5b..dbaff70d3.js | 125 kB | 125 kB | ✓ |
| framework.5b..70d3.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 211 kB | 211 kB | ✓ |


Client Bundles (main, webpack, commons) Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.module.js | 17.2 kB | 17.2 kB | ✓ |
| main-HASH.module.js gzip | 6.52 kB | 6.52 kB | ✓ |
| webpack-HASH.module.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..42.module.js | 45.6 kB | 45.6 kB | ✓ |
| de003c3a9d30..dule.js gzip | 16.5 kB | 16.5 kB | ✓ |
| framework.5b..d3.module.js | 125 kB | 125 kB | ✓ |
| framework.5b..dule.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 190 kB | 190 kB | ✓ |


Client Pages

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.js | 1.81 kB | 1.81 kB | ✓ |
| _app.js gzip | 873 B | 873 B | ✓ |
| _error.js | 12 kB | 12 kB | ✓ |
| _error.js gzip | 4.73 kB | 4.73 kB | ✓ |
| hooks.js | 12.7 kB | 12.7 kB | ✓ |
| hooks.js gzip | 4.79 kB | 4.79 kB | ✓ |
| index.js | 318 B | 318 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js | 8.14 kB | 8.14 kB | ✓ |
| link.js gzip | 3.5 kB | 3.5 kB | ✓ |
| routerDirect.js | 408 B | 408 B | ✓ |
| routerDirect.js gzip | 281 B | 281 B | ✓ |
| withRouter.js | 419 B | 419 B | ✓ |
| withRouter.js gzip | 280 B | 280 B | ✓ |
| Overall change | 35.8 kB | 35.8 kB | ✓ |


Client Pages Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.module.js | 1.7 kB | 1.7 kB | ✓ |
| _app.module.js gzip | 832 B | 832 B | ✓ |
| _error.module.js | 23.3 kB | 23.3 kB | ✓ |
| _error.module.js gzip | 8.59 kB | 8.59 kB | ✓ |
| hooks.module.js | 1.52 kB | 1.52 kB | ✓ |
| hooks.module.js gzip | 793 B | 793 B | ✓ |
| index.module.js | 294 B | 294 B | ✓ |
| index.module.js gzip | 223 B | 223 B | ✓ |
| link.module.js | 8.53 kB | 8.53 kB | ✓ |
| link.module.js gzip | 3.68 kB | 3.68 kB | ✓ |
| routerDirect.module.js | 394 B | 394 B | ✓ |
| routerDirect..dule.js gzip | 281 B | 281 B | ✓ |
| withRouter.module.js | 404 B | 404 B | ✓ |
| withRouter.m..dule.js gzip | 278 B | 278 B | ✓ |
| Overall change | 36.1 kB | 36.1 kB | ✓ |


Client Build Manifests

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _buildManifest.js | 81 B | 81 B | ✓ |
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManifest.module.js | 81 B | 81 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 162 B | 162 B | ✓ |


Rendered Page Sizes

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| index.html | 3.62 kB | 3.62 kB | ✓ |
| index.html gzip | 945 B | 945 B | ✓ |
| link.html | 3.66 kB | 3.66 kB | ✓ |
| link.html gzip | 954 B | 954 B | ✓ |
| withRouter.html | 3.67 kB | 3.67 kB | ✓ |
| withRouter.html gzip | 942 B | 942 B | ✓ |
| Overall change | 10.9 kB | 10.9 kB | ✓ |




Serverless Mode



General

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| buildDuration | 16s | 15.9s | -163ms |
| nodeModulesSize | 48.3 MB | 48.3 MB | ✓ |


Client Bundles (main, webpack, commons)

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.js | 18.9 kB | 18.9 kB | ✓ |
| main-HASH.js gzip | 6.79 kB | 6.79 kB | ✓ |
| webpack-HASH.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| 4952ddcd88e7..2b8407376.js | 21.9 kB | 21.9 kB | ✓ |
| 4952ddcd88e7..7376.js gzip | 7.81 kB | 7.81 kB | ✓ |
| de003c3a9d30..6604acae7.js | 43.2 kB | 43.2 kB | ✓ |
| de003c3a9d30..cae7.js gzip | 15.5 kB | 15.5 kB | ✓ |
| framework.5b..dbaff70d3.js | 125 kB | 125 kB | ✓ |
| framework.5b..70d3.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 211 kB | 211 kB | ✓ |


Client Bundles (main, webpack, commons) Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.module.js | 17.2 kB | 17.2 kB | ✓ |
| main-HASH.module.js gzip | 6.52 kB | 6.52 kB | ✓ |
| webpack-HASH.module.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..42.module.js | 45.6 kB | 45.6 kB | ✓ |
| de003c3a9d30..dule.js gzip | 16.5 kB | 16.5 kB | ✓ |
| framework.5b..d3.module.js | 125 kB | 125 kB | ✓ |
| framework.5b..dule.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 190 kB | 190 kB | ✓ |


Client Pages

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.js | 1.81 kB | 1.81 kB | ✓ |
| _app.js gzip | 873 B | 873 B | ✓ |
| _error.js | 12 kB | 12 kB | ✓ |
| _error.js gzip | 4.73 kB | 4.73 kB | ✓ |
| hooks.js | 12.7 kB | 12.7 kB | ✓ |
| hooks.js gzip | 4.79 kB | 4.79 kB | ✓ |
| index.js | 318 B | 318 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js | 8.14 kB | 8.14 kB | ✓ |
| link.js gzip | 3.5 kB | 3.5 kB | ✓ |
| routerDirect.js | 408 B | 408 B | ✓ |
| routerDirect.js gzip | 281 B | 281 B | ✓ |
| withRouter.js | 419 B | 419 B | ✓ |
| withRouter.js gzip | 280 B | 280 B | ✓ |
| Overall change | 35.8 kB | 35.8 kB | ✓ |


Client Pages Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.module.js | 1.7 kB | 1.7 kB | ✓ |
| _app.module.js gzip | 832 B | 832 B | ✓ |
| _error.module.js | 23.3 kB | 23.3 kB | ✓ |
| _error.module.js gzip | 8.59 kB | 8.59 kB | ✓ |
| hooks.module.js | 1.52 kB | 1.52 kB | ✓ |
| hooks.module.js gzip | 793 B | 793 B | ✓ |
| index.module.js | 294 B | 294 B | ✓ |
| index.module.js gzip | 223 B | 223 B | ✓ |
| link.module.js | 8.53 kB | 8.53 kB | ✓ |
| link.module.js gzip | 3.68 kB | 3.68 kB | ✓ |
| routerDirect.module.js | 394 B | 394 B | ✓ |
| routerDirect..dule.js gzip | 281 B | 281 B | ✓ |
| withRouter.module.js | 404 B | 404 B | ✓ |
| withRouter.m..dule.js gzip | 278 B | 278 B | ✓ |
| Overall change | 36.1 kB | 36.1 kB | ✓ |


Client Build Manifests

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _buildManifest.js | 81 B | 81 B | ✓ |
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManifest.module.js | 81 B | 81 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 162 B | 162 B | ✓ |


Serverless bundles

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _error.js | 253 kB | 253 kB | ✓ |
| _error.js gzip | 67.9 kB | 67.9 kB | ✓ |
| hooks.html | 3.75 kB | 3.75 kB | ✓ |
| hooks.html gzip | 979 B | 979 B | ✓ |
| index.js | 254 kB | 254 kB | ✓ |
| index.js gzip | 68.2 kB | 68.2 kB | ✓ |
| link.js | 261 kB | 261 kB | ✓ |
| link.js gzip | 70.3 kB | 70.3 kB | ✓ |
| routerDirect.js | 255 kB | 255 kB | ✓ |
| routerDirect.js gzip | 68.3 kB | 68.3 kB | ✓ |
| withRouter.js | 254 kB | 254 kB | ✓ |
| withRouter.js gzip | 68.4 kB | 68.4 kB | ✓ |
| Overall change | 1.28 MB | 1.28 MB | ✓ |

Commit: d299811bfaea36088e037618c71fc6762df8b1c3

ijjk picture ijjk on 4 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

YarivGilad picture YarivGilad  ·  3Comments
pie6k picture pie6k  ·  3Comments
lixiaoyan picture lixiaoyan  ·  3Comments
formula349 picture formula349  ·  3Comments
sospedra picture sospedra  ·  3Comments