1    let posts:any[] = [];
2
3    try {
4        const data = await fetch('https://api.vercel.app/blog');
5        posts = await data.json();
6
7        // Dump the response and data to the console
8        //console.log('Data:', posts); // Logs the parsed JSON data
9        console.dir(posts, { depth: null}); //Expand all nested properties
10    } catch (error2) {
11        console.error('Error fetching data:', error2);
12    }
13    
14    return (
15        <>
16            <h2 className="w-full text-center text-xl">
17                Debugging Your API Calls - Next.js
18            </h2>
19            <ul>
20                {posts.map((post: any) => (
21                    <li key={post.id}>&middot; {post.title}</li>
22                ))}
23            </ul>
24        </>
25     )
26