FetchError: invalid json response body , reason: Unexpected token < in JSON at position 0

i am trying to show up the single blog page in my next project.

i get the error at getStaticProps

i tried make the data that is coming from the api an array but it doesn't work also , i don't know where the issue of this code everything looks fine

i don't know if the error from the api or something else.

import { useRouter } from 'next/router';
import Link from 'next/link';
import BlogsStyle from '../../../styles/Blogs.module.css';
import { Image } from "react-bootstrap";



const Blog = ({ blog }) => {

    const router = useRouter()
    const {id} = router.query
    
    return (
        <div>  
            
        <div className={BlogsStyle.blogItem}>
            <div className={BlogsStyle.blogImg}>
                    <Image className={BlogsStyle.blogImgSrc} src={blog.image_url} alt="image blog" onError={(e)=>{e.target.onerror = null; e.target.src="../../public/images/default_blog.png"}}  fluid />
            </div>
            <div className=" blog__item--text">
                <div className="info">
                    <div className="date">{blog.publish_date}</div>
                        <h6>{blog.title.ar}</h6>
                    <p>{strip(blog.content.ar).substring(0,100)}</p>
                </div>

                
            </div>
        </div>
        </div>
    )
}

export const getStaticPaths = async () => {
    const res = await fetch('https://masahefapi.slsal.co/pgarticles/articles/0/10');
    const data = await res.json();
    console.log(data);

    const paths = await data.map(blog =>{
        return {
            params: { id: blog.id.toString() }
        }
    })

    return {
        paths,
        fallback: false
        }
    }

    export const getStaticProps = async({ params }) => {
        const id = context.params.id;
        const res = await fetch(`https://masahefapi.slsal.co/pgarticles/articles/0/10/${params.id}`);
        const data = await res.json();
        console.log(data);
    
    
    
        return {
            props: {
                blog: data
            }
        }
    }

export default Blog