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

Question

我正在尝试在我的下一个项目中显示单个博客页面。

我在 getStaticProps 处收到错误

我尝试将来自 api 的数据设为数组，但它也不起作用，我不知道这段代码的问题在哪里，一切看起来都很好

我不知道是 api 错误还是其他错误。

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