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>