Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jackall3n/next-firestore
https://github.com/jackall3n/next-firestore
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/jackall3n/next-firestore
- Owner: jackall3n
- Created: 2022-05-30T16:12:28.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:46:47.000Z (about 1 year ago)
- Last Synced: 2024-12-27T20:04:02.338Z (11 days ago)
- Language: TypeScript
- Size: 45.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-firestore 🔥
## Blurb
A library dedicated to supporting Firebase + server-side rendering.
## Installation
```shell
npm install next-firestore
```
```shell
yarn add next-firestore
```
## Setup
### _app.js
```typescript jsx
import { getFirestore } from "@firebase/firestore";
import { FirestoreAppProvider } from "next-firestore";
const app = getFirestore()
function MyApp({ Component, pageProps }) {
return (
)
}
export default MyApp
```
## Usage
### Collection
```typescript jsx
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 (
There are {projects.length} projects!
)
}
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 (
)
}
```
### Document
```typescript jsx
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 (
{project.name}
)
}
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 (
)
}
```