How to fetch api in NextJs

Here we will discuss how to fetch API data on nextjs

    const fetchBlogs = async () => {
        try {
            const response = await fetch('http://127.0.0.1:3003/api/blogs');
            if (!response.ok) {
                throw new Error('Failed to fetch blogs');
            }
            const blogsData: Blog[] = await response.json();
            setBlogs({ blogs: blogsData });
        } catch (error) {
            console.error('Error fetching blogs:', error);
        }
    };