I am using the getServerSideProps in next js . everything is working properly but one issue that I consider is that the JSON data is also shown when I click the open page source .The code is
import { getAllPost } from '../helper/post'
export default function Home(props) {
return (
<div >
<Head>
<title>YourGuide – Real Essence Of Your City</title>
<meta name="description" content="Generated by create next app" />
<a rel="icon" href="/favicon.ico" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</Head>
<LandingPage />
<TopCites post={props.post}/>
</div>
)
}
export async function getServerSideProps(context) {
const post = await getAllPost();
return {
props: { post:post }, // will be passed to the page component as props
}
}
I used the props data in component of TopCities The code of the component is
export default function TopCites(props) {
const router = useRouter();
const top = [
{
city: "Lahore",
img: lahore
},
{
city: "Rawalpindi",
img: rawalpindi
},
{
city: "Karachi",
img: karachi
},
{
city: "Gilgit City",
img: gilgit
}
]
return (
<>
<div className=" my-4">
<div className="row ">
<div className="col-lg-5 col-md-5 col-sm-12 text-dark">
<h2 >Top Cities</h2>
<hr />
<div className="row ">
{
top.map(city => {
return <div key={city.city} className="col-6 px-2">
<div className=' removeDecor' onClick={() => { router.push(`/city/${city.city}`) }} role="button" >
<Image src={city.img} className={style.postImg } alt={lahore} />
<h5 className='centerText'>{city.city} </h5>
</div>
</div>
})
}
<hr />
</div>
</div>
<div className= {`col-lg-7 col-md-7 col-sm-12 container ${style.overflowData} text-dark `}>
{
props.post.length > 0 ? <h3>Most Recent Post</h3> : <div>
<h1>We are unable to show the articls now</h1>
<Image src={lahore} alt="lahore" width={500} height={300} />
</div>}
{
props.post.length > 0 ? props.post.map(post => {
return <Post key={post.postId} post={post} />
}) : ""
}
</div>
</div>
</div>
</>
)
}
Everything is working properly but the issue is that the JSON is shown in the view page source . I am unable to solve this problem. I want to hide the JSON data from the file. kindly tell me how to solve this problem.
