NextJs not returning the serversiderenderingprops for "/" url

Question

I've started working with Nextjs with the purpose of server-side-rendering so that I can feed dynamic values to metatags for each URL. [ reactjs doesn't work easily here ].

Now In Nextjs, I'm trying to load all the data from Firebase and show a few of them on the home page.

this is the error I'm getting if trying to use props in home(props).

'props' is declared but its value is never read.ts(6133)
Parameter 'props' implicitly has an 'any' type.ts(7006)
(parameter) props: any

The page Structure: Page Structure Image

Index.tsx file: this ll be rendered on this URL: localhost://3000

import React from "react"
import Head from "next/head"
import { useRouter } from 'next/router'
import styles from '@/styles/Home.module.css'
import { useState } from 'react'
import {colRef, collection,db,getDocs,query,orderBy} from '../firebase/clientApp'


 function Home() {
  // Not able to use props here, which get returned form serverside props.
  return (
    <>
      <Head>
        <title>title goes here</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <p>rendering home page</p>
      </main>
    </>
  )
}

export async function getServerSideProps(){
  // const [blogs,setBlogs]=useState([{}]);
  const dbCollection =  collection(db, 'blogs');
  const q=query(dbCollection,orderBy('Time','desc'));
  const datasnap = await getDocs(q);
  // console.log("data snap docs"+datasnap.docs);
  const data = datasnap.docs.map(doc => doc.data());
  // console.log(data);
  data.forEach(item=>{
  // console.log("item time "+item.Time+"\n")
  // console.log("item body: "+item.body+"\n")
        var curObj={
          Title:item.Title,
          body:item.body,
          id:item.id,
          excerpts:item.excerpts,
          clip:item.clip,
          posted_by:item.posted_by,
          Time:item.Time.toDate().toDateString(),
          imageSrc:item.imageSrc
        }
        // if(curObj.imageSrc===""){
        //   curObj.imageSrc=`${imageSrc}`
        // }
        // setBlogs(blogs=>[...blogs,curObj])
  })
    // console.log(data);
  return{
    props:{key:"props returned from serversideprops"}
  }
}


export default Home

I see this on specs: serversideProps can only be exported from a page. You can’t export it from non-page files.

but not sure if this is the mistake I'm doing.. or if we have any other solution for this.

thanks,

NextJs not returning the serversiderenderingprops for "/" url

0 Answers0