Next.js Discord

Discord Forum

Method not allowed nextjs api problem

Unanswered
Palomino posted this in #help-forum
Open in Discord
PalominoOP
API 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
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