Method not allowed nextjs api problem
Unanswered
Palomino posted this in #help-forum
PalominoOP
API CODE -
else code
import prisma from '../lib/prisma';
import { NextApiRequest, NextApiResponse } from 'next';
export default async function POST(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'POST') {
const { name, feedback } = req.body || {};
if (!name || !feedback) {
return res.status(400).json({ error: 'Name and feedback are required' });
}
try {
const newFeedback = await prisma.atsiliepimai.create({
data: {
name,
feedback,
},
});
res.status(200).json(newFeedback);
} catch (error) {
console.error('Prisma error:', error);
if (error instanceof Error) {
return res.status(500).json({ error: error.message });
}
res.status(500).json({ error: 'An unexpected error occurred' });
}
} else {
res.setHeader('Allow', ['POST']);
res.status(405).json({ error: 'Method not allowed' });
}
}else code
'use client';
import { useState } from 'react';
const Form = () => {
const [formData, setFormData] = useState({
name: '',
feedback: '',
});
const [status, setStatus] = useState('');
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = async (e) => {
e.preventDefault();
setStatus('Submitting...');
try {
const response = await fetch('/api', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData),
});
if (response.ok) {
setStatus('Thank you for your feedback!');
setFormData({ name: '', feedback: '' });
} else {
const error = await response;
setStatus(error.error || 'Something went wrong. Please try again.');
}
} catch (error) {
console.error(error);
setStatus('Error submitting feedback.');
}
};
return (
<div>
<h1>Reputation Form</h1>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
/>
</div>
<div>
<label htmlFor="feedback">Feedback:</label>
<textarea
id="feedback"
name="feedback"
value={formData.feedback}
onChange={handleChange}
required
/>
</div>
<button type="submit" className="bg-white">Submit</button>
</form>
<p className="text-white">{status}</p>
</div>
);
};
export default Form;5 Replies
PalominoOP
PalominoOP
up
is the api in app dir or pages dir?
as right now it doesnt like it will work for either
as right now it doesnt like it will work for either
PalominoOP
app/api/ruote.ts
@Palomino app/api/ruote.ts
cool cool, you should have a look at the docs and make your
route.ts use the new conventions: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#request-body