Now that we’ve got the project setup, we’re ready to get building.

Currently we’ve only got our home page. We’ll need a small handful of pages to help spread out the different things we’ll want people to acess:

• Home → Who am I, what should you know, and how do you contact me?
• Posts → Everything we write
• Projects → Previews of our projects with links to Github

Let’s setup a Navbar component with routes to the different pages we’ll be creating.

In /src/components/ we can create a new file named Navbar.js

// /src/components/Navbar.js

import { Flex } from '@chakra-ui/react';
import Link from 'next/link';

export default function Navbar() {
  return (
    <Flex bg="gray.600" color="white" w="full" sx={{ gap: "12px" }} align="center" pl={3} py={4}>
      <Link href="/">Home</Link>
      <Link href="/posts">Posts</Link>
      <Link href="/contact">Projects</Link>
    </Flex>
  )
};

<aside> 💡 You’ll notice we’re using the Flex component here and including some props like align and pl. These are called style-props or props that are translated to CSS and allows you access into Chakra’s internal theme

</aside>

Now that we have our links in place, we can create our next pages at:

• /pages/projects.js
• /pages/posts/index.js

Both pages should look as follows for now —