Show categories and recent posts in sidebar

First create 2 hooks to fetch categories and posts.

// hooks/useCategory
import { useState, useEffect } from "react";
import axios from "axios";

const useCategory = () => {
  // state
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const getCategories = async () => {
      try {
        const { data } = await axios.get("/categories");
        setCategories(data);
      } catch (err) {
        console.log(err);
      }
    };
    // execute
    getCategories();
  }, []);

  return {
    categories,
  };
};

export default useCategory;

// hooks/usePost
import { useState, useEffect } from "react";
import axios from "axios";

const usePost = () => {
  // state
  const [latestPosts, setLatestPosts] = useState([]);

  useEffect(() => {
    const getPosts = async () => {
      try {
        const { data } = await axios.get("/posts/1");
        setPosts(data);
      } catch (err) {
        console.log(err);
      }
    };
    // execute
    getPosts();
  }, []);

  return {
    posts,
  };
};

export default usePost;

Now import them and use in single post view

// pages/post/[slug].js
import useCategory from "../../hooks/useCategory";
import usePost from "../../hooks/usePost";

const { categories } = useCategory();
const { latestPosts } = usePost();

{/* sidebar */}
<Col sm={24} lg={6}>
{/* categories */}

<Divider>Categories</Divider>
{categories.map((c) => (
  <Link href={`/category/${c.slug}`}>
    <a>
      <Button style={{ margin: 2 }} key={c._id}>
        {c.name}
      </Button>
    </a>
  </Link>
))}

{/* posts */}

<Divider>Recent Posts</Divider>
{latestPosts.map((p) => (
  <Link href={`/post/${p.slug}`}>
    <a>
      <h4 key={p._id}>{p.title}</h4>
    </a>
  </Link>
))}
</Col>