I am a newcomer to NextJS 13 and I am facing an issue with my files in the app. Despite my efforts to look for solutions online and study tutorials to keep up with the latest updates, I have not been successful in resolving the problem.
The endpoint I am trying to access is located at src/app/contact-route/route.js with the following code:
export async function postHandler(req, res) {
try {
const { data } = req.body;
console.log("DATA FROM BCK", data);
res.status(200).json({ message: 'Data received successfully!' });
} catch (error) {
res.status(500).json({ error: 'failed to load data' });
}
}
export default async function handler(req, res) {
if (req.method === "POST") {
return postHandler(req, res);
} else {
res.status(405).json({ message: 'This method is not allowed' });
}
}
Additionally, my contact page file, src/app/contact/page.js, consists of the following code:
// Contact page JavaScript code goes here
When attempting to make a POST request to the endpoint src/app/contact-route/route.js, I encounter these errors:
⨯ Detected default export in '/Users/path-to-file/src/app/contact-route/route.js'. Export a named export for each HTTP method instead.
⨯ No HTTP methods exported in '/Users/path-to-file/src/app/contact-route/route.js'. Export a named export for each HTTP method.
and
POST http://localhost:3000/app/contact-route 404 (Not Found)
SyntaxError: Unexpected token '<', "<!DOCTYPE ..." is not valid JSON
If anyone can assist me in resolving this issue, I would greatly appreciate it. Thank you!