Getting this error while making a post request ( API resolved without sending a response for /api/comments, this may result in stalled requests.)

Question

Hi i have started learning Next.js and currently unable to make a POST request on api.

I have a comments folder inside the api folder. And inside the comments i have written the code like this.

import { comments } from "../../../data/comments";

export default function handler(req,res) {
    
    if(req.method === 'GET'){
        res.status(200).json(comments)
    }
    else if(req.mehtod === 'POST') {
        const data = req.body.comment
        const newComment = {
            id: Date.now(),
            data
        }
        comments.push(newComment)
        console.log(comments);
        res.status(201).json(newComment)
    }
}

Here the import comments is just a simple Js file where i'm returning a Array.

In the frontend part part i have a Page where i have a input and a button and on the click of the button i'm calling the submitCommentHandler.

Inside the submitcommentHandler i have tried to reach the path by fetch and axios. But in both cases i'm getting a message

API resolved without sending a response for /api/comments, this may result in stalled requests.

import { useState } from "react"
import axios from "axios"

const Comments = () => {
    const [comments, setComments] = useState([])
    const [comment, setComment] = useState('')

    const clickHandler = async () => {
        // const response = await fetch("/api/comments")
        // const data = await response.json()
        axios.get('/api/comments')
          .then(response => {
            setComments(response.data);
          })
          .catch(error => {
              console.log(error);
          })
        
        
    }

    // const submitCommentHandler = async (e) => {
    //     e.preventDefault();
    //     console.log(comment);
    //     // axios.post("api/comments", {comment})
    //     //   .then(response => console.log(response))
    //     //   .catch(error => console.log(error))
    //     const response = await fetch('http://localhost:3000/api/comments', {
    //         method: 'POST',
    //         headers: {
    //             'Content-Type': 'application/json'
    //         },
    //         comment
    //     })
    // }
    const submitCommentHandler = async () => {
        const response = await fetch('/api/comments', {
            method: 'POST',
            body: JSON.stringify({comment}),
            headers: {
                'Content-Type': 'application/json',
            },
        })
        const data = await response.json()
        console.log(data);
    }

    return ( 
        <div className="container">
            <div className="submit-comments-container">
                <input value={comment} onChange={e => setComment(e.target.value)}></input>
                <button onClick={submitCommentHandler}>Submit Comment</button>
            </div>
            <div className="btn-container">
              <button onClick={clickHandler}>Show Comments</button>
            </div>
            <div className="comments-container">
                {
                    comments.map(comment => {
                        return (
                            <div className="comment-container" key={comment.id}>
                                <h1>{comment.id}</h1>{' '}
                                <h1>{comment.data}</h1>
                                <hr/>
                            </div>
                        )
                    })
                }
            </div>
        </div>
     );
}
 
export default Comments;

Answer 1

Your API seems to be okay, just correct the spelling of req.method === 'POST' in else if condition, and then run the application by npm command and then refresh the browser, probably then you will not receive the warning.