Use getServerSideProps
to load the content/posts before rendering any page content at all. This will be better for SEO because when the page is loaded, search engine crawlers will the actual page content (unlike useEffect
which loads data after the component is rendered)
Add posts link in Menu
<Menu.Item key="posts" icon={<DatabaseOutlined />}>
<Link href="/posts">
<a>Posts</a>
</Link>
</Menu.Item>
// pages/posts.js
import axios from "axios";
import { Card, Row, Col, Avatar } from "antd";
import Head from "next/head";
const { Meta } = Card;
const Posts = ({ posts }) => {
return (
<>
<Head>
<title>Recent blog posts</title>
<meta
name="description"
content="Blog posts about web development, programming, and more."
/>
</Head>
<div style={{ marginTop: "60px" }}></div>
<Row gutter={12}>
{posts.map((post) => (
<Col sm={24} lg={8} style={{ marginBottom: 12 }}>
<Card
hoverable
cover={
<Avatar
shape="square"
style={{ height: "200px" }}
src={
post.featuredImage?.url ||
"https://via.placeholder.com/1200x800.png?text=..."
}
alt={post.title}
/>
}
>
<Meta title={post.title} />
</Card>
</Col>
))}
</Row>
</>
);
};
export async function getServerSideProps() {
const { data } = await axios.get(`${process.env.API}/posts`);
// console.log("DATA LENGTH =====> ", data.length);
return {
props: {
posts: data,
},
};
}
export default Posts;