index.js

import React, { useEffect } from "react";
import Header from "../components/Header";
import SiteMap from "../components/SiteMap";
import Link from "next/link";

const Index = ({ blogs }) => {
  console.log("This is a component");
  useEffect(() => {
    console.log("Index mounted");
  });
  return (
    <div>
      <Header>Blogs</Header>
      <ul>
        {blogs.map(b => (
          <li key={b.id}>
            <Link href="/blogs/[id]" as={`/blogs/${b.id}`}>
              <a>{b.name}</a>
            </Link>
          </li>
        ))}
      </ul>

      <hr />
      <SiteMap />
    </div>
  );
};

Index.getInitialProps = () => {
  console.log("Get initial props");
  return {
    blogs: [
      { id: 0, name: "Blog 1" },
      { id: 1, name: "Blog 2" },
      { id: 2, name: "Blog 3" },
      { id: 3, name: "Blog 4" },
      { id: 4, name: "Blog 5" }
    ]
  };
};

export default Index;