This tutorial walks through setting up a minimal template project for Next.js, ZEIT Now, and Firebase.
I've included lots of screenshots, so ev...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you for sharing such a wonderful tutorial!
It took me only a single afternoon to build a functioning dashboard for managing a volunteer delivery service using your detailed guide.
I know this is out of the scope of your post, but would you be able to point me in the right direction or share resources for achieving following:
spaces) sortable on change. I'm using Firebase'sorderBybut that only sorts on the initial load, so I have to refresh the page to sort changes. I suppose I would have to extrapolate the Firebase data into a React state and sort/display that. Unfortunately, I'm not fully comprehending how you retrieve the collection and storing it intoitemsbecause it's compounded with other variables using some sort of shorthand. So I guess my question is how to get the Firebase data into a component state?I understand it's a lot to ask, but I'm sure any hints would help out many people in the future as well.
Thanks again for a great tutorial!
Yay, glad it was useful!
This example uses firestore-pagination-hook, which was useful for viewing a firestore collection quickly for this example. I'm not sure how well it scales to more complex use cases.
There are some other React + Firebase libraries out there, which I haven't tried, but you may want to check out as alternatives. This one looks popular: github.com/CSFrequency/react-fireb...
Thank you for sharing additional references. I will look through them and see where they take me.
Very nice! One minor nitpick, you should mention somewhere in the tutorial that you should enable email authentication in the firebase project to be able to create an account.
On the
/spacespage I get:Uncaught Error in onSnapshot: FirebaseError: "Missing or insufficient permissions."This was a really nice way to leave feedback 😊
nice tutorial! why can't we go full power firebase i.e. use firebase hosting instead of zeit
IIRC firebase hosting doesn't support SSR out of the box. It can be mimicked with the use of functions, but Vercel probably does much more optimizations with their Next.js hosting.
Awesome! Many thanks!
At cd functions/src/index.ts 9th and 11th line is your storage bucket URL. I believe people should change that to theirs. Don't see a mention of it in the article.
Thanks again! 🙌 🙌 🙌
Thanks for the tutorial.
Made an example of how to use firebase auth with nextjs, based on the with-iron-session. Instead of getinitialprops that the example up uses, this uses getServerSideProps. Hopefully it's a bit easier to understand for a beginner. The setup described in the article still applies for the most part. github.com/hajola/nextjs-firebase-...
First, I want to thank you for your effort. That article and steps are very well explained.
localhost:3000/spaces doesn't output an error. It just redirects me to the root again.
And I also get this error when I open localhost:3000/account
ReferenceError: Headers is not defined
at Service. (C:/Users/bhnas/OneDrive/Desktop/nextjs-now-firebase/node_modules/
firebase/functions/dist/index.node.cjs.js:524:25
Let me know if u want further details
what's the value of using firebase functions versus api routes in next.js?
Not an expert but I think it is also relevant that Zeit functions are not in the same datacenter and if you need to call firestore from a function it would add that latency. Additionally, you would miss out some functionality like Firestore and Auth Triggers
Good question!
I haven’t worked with next.js / zeit’s functions much yet - I hear the cold boot times are faster, but haven’t done a direct comparison with firebase.
Since I’m using firebase auth & firestore already, it’s kinda nice to have functions in the same console. Just anecdotally, it seems like function logs update faster using Firebase, and the console feels more mature than Zeit’s.
Going with cloud functions / firebase over next.js's functions would be ideal if you are heavily invested in firebase already but still want to use next. Firebase is nice because they have one of the most generous / useful free-tier's for authentication. They also tend to require a little bit less boilerplate than AWS.
I probably looked at 20 boilerplates, and tried at least 2 others, before finding yours. Thankful that I did, because yours is 1,000 times better than the rest. Great documentation, great architecture. Thank you so much.
Why not host on firebase? Why lock into two different platforms?
now loginis now changed tovercel login. Though I suggest to aliasnow=vercelbecause of the speed.This was really great, thank you!