next-firestore 🔥

Blurb

A library dedicated to supporting Firebase + server-side rendering.

Installation

npm install next-firestore

yarn add next-firestore

Setup

_app.js

import { getFirestore } from "@firebase/firestore";
import { FirestoreAppProvider } from "next-firestore";

const app = getFirestore()

function MyApp({ Component, pageProps }) {
  return (
    <FirestoreAppProvider app={app}>
      <Component {...pageProps} />
    </FirestoreAppProvider>
  )
}

export default MyApp

Usage

Collection

import admin from 'firebase-admin';
import { FirestoreProvider, useFirestoreApp } from 'next-firestore';

// Create fetchers for collections and documents
const fetchers = {
  projects: getCollection('projects')
}

function Page() {
  // Get client side data, and subscribe to live updates
  const [projects] = fetchers.projects.useData()

  return (
    <div>
      There are {projects.length} projects!
    </div>
  )
}

export default async function getServerSideProps(context) {
  // Get server side data
  const projects = await fetchers.projects.get(admin);

  return {
    props: {
      firebase: {
        ...projects
      }
    }
  }
}

export default (props) => {
  return (
    <FirestoreProvider value={props.firebase}>
      <Page />
    </FirestoreProvider>
  )
}

Document

import admin from 'firebase-admin';
import { FirestoreProvider, useFirestoreApp } from 'next-firestore';

const fetchers = {
  project: getDocument('projects')
}

function Page() {
  const { query } = useRouter();

  const [project] = fetchers.project.useData(query.id)

  return (
    <div>
      {project.name}
    </div>
  )
}

export default async function getServerSideProps(context) {
  const id = context.query.id;

  const project = await fetchers.project.get(id, admin);

  return {
    props: {
      firebase: {
        ...project,
      }
    }
  }
}

export default (props) => {
  return (
    <FirestoreProvider value={props.firebase}>
      <Page />
    </FirestoreProvider>
  )
}