Firestore model (recommended) Collection: articles Document id: index (string or numeric converted to string) Document fields: { “index”: 1, // numeric index (also used as doc id: “1”) “title”: “How to Build with Next.js”, “slug”: “how-to-build-with-nextjs”, “author”: “Rohit Kumar”, “body”: “<p>Article markdown or HTML content…</p>”, “excerpt”: “Short summary for listing”, “tags”: [“nextjs”, “react”, “firebase”], “coverImage”:… Continue reading Creating an Indexed Article System with Next.js and Firebase
Author: Rohit Adithiya
How to Use Subcollections in Firebase Firestore and Create Multiple Child Items
When working with Firebase Firestore, you’ll often need to store related data in a structured way. For example, an Order document might contain multiple Items, or a Post might have many Comments. Firestore provides a powerful way to handle this scenario using subcollections. In this article, we’ll cover: 🔹 What subcollections are in Firestore 🔹… Continue reading How to Use Subcollections in Firebase Firestore and Create Multiple Child Items
Csv import the users in the firebase.
To import bulk user data into Firebase Authentication via a CSV file, you can’t directly upload CSV files through the Firebase Console — instead, you’ll need to: Convert CSV to JSON format expected by Firebase. Use the Firebase Admin SDK (Node.js recommended) or Firebase CLI to import users. Step-by-step Guide: Bulk Import Users from CSV… Continue reading Csv import the users in the firebase.
Populating Relations in Hooks in next js payload CMS
Sometimes, you may need to populate related data in hooks before saving or fetching a document. Example: Before Change Hook import { Payload } from ‘payload’; const populateProfile = async ({ req, data }) => { const profile = await req.payload.findByID({ collection: ‘profiles’, id: data.profile, }); return { …data, profileData: profile }; }; Using Access… Continue reading Populating Relations in Hooks in next js payload CMS
Querying Related Data in the payload
When fetching data via Payload’s REST or GraphQL API, related fields can be populated using depth in the query. REST API Example: GET /api/users?depth=2 This ensures related fields are expanded up to two levels deep. GraphQL Example: query { Users { docs { name profile { bio avatar } } } }
Handling Multiple Relations in payload CMS
You can specify multiple relations within a single field by setting relationTo as an array: { name: ‘relatedItems’, type: ‘relationship’, relationTo: [‘products’, ‘categories’], hasMany: true, } This allows referencing multiple collections (products and categories) in a single field.
Defining Relations in Collections
Relations in Payload CMS allow one collection to reference another, creating links between different sets of data. The most common types of relationships include: One-to-One (A single reference to another document) One-to-Many (A field can reference multiple documents) Many-to-Many (Multiple documents can reference multiple other documents) To define a relation, use the relationship field type… Continue reading Defining Relations in Collections
Implementing Server-Side Rendering (SSR) with Payload CMS in Next.js
To fetch Payload CMS data at build time (SSG) and at request time (SSR) in Next.js. Steps: Set Up a Payload CMS Collection payload.config.ts: ts Copy Edit const Articles: CollectionConfig = { slug: ‘articles’, fields: [ { name: ‘title’, type: ‘text’, required: true, }, { name: ‘content’, type: ‘richText’, }, ], }; export default Articles;… Continue reading Implementing Server-Side Rendering (SSR) with Payload CMS in Next.js
Setting Up Image Upload in Payload CMS & Displaying in Next.js
To upload images in Payload CMS and display them in Next.js. Steps: Add an Image Field to Payload CMS Edit payload.config.ts: ts Copy Edit const Media: CollectionConfig = { slug: ‘media’, upload: true, fields: [], }; export default Media; Upload an Image in Payload CMS Dashboard Go to Collections > Media Upload an image and… Continue reading Setting Up Image Upload in Payload CMS & Displaying in Next.js
Integrating Payload CMS with Next.js API Routes
To create a custom API route in Next.js to interact with Payload CMS. Steps: Create an API Route in Next.js ts Copy Edit import { NextApiRequest, NextApiResponse } from ‘next’; import payload from ‘payload’; export default async function handler(req: NextApiRequest, res: NextApiResponse) { await payload.init({ secret: process.env.PAYLOAD_SECRET }); if (req.method === ‘GET’) { const posts… Continue reading Integrating Payload CMS with Next.js API Routes