Screen Shot 2022-02-16 at 11.17.42 PM

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;