Webhook revalidate gives 405 Method not allowed and form 404 when submitting after Internationalization implemented on the site

Developing with Prismic
,
4

It seems like the issues you're facing with the webhook and contact form are likely related to the internationalization setup you implemented. Here are some steps and considerations to help you troubleshoot and resolve these issues:

Potential Issues and Solutions

  1. Locale-Prefixed Routes:

    • Your middleware might be redirecting API routes to locale-prefixed routes, which could cause the 405 Method Not Allowed error if the locale-prefixed route only allows GET requests.
    • Ensure that your middleware is not affecting API routes. You can modify your middleware to skip API routes.
    // Example middleware modification to skip API routes
export function middleware(request) {
  const { pathname } = request.nextUrl;
  const isApiRoute = pathname.startsWith('/api');

  if (isApiRoute) {
    return NextResponse.next();
  }

  // Your existing locale handling logic
}

  2. Disabling Automatic Locale Detection:

    • If automatic locale detection is causing issues, you can disable it in your next.config.js.
    // next.config.js
module.exports = {
  i18n: {
    localeDetection: false,
  },
};

  3. Check Route Handlers:

    • Ensure that your route handlers are correctly set up to handle POST requests. The provided code snippet for the contact form seems to have a check for the request method, but it should be placed before parsing the request body.
    export const POST = async (req: NextRequest, res: NextResponse<Response>) => {
  if (req.method !== 'POST') {
    return new Response(JSON.stringify({ status: 'fail', error: 'Begone.' }), {
      status: 405,
      headers: {
        'content-type': 'application/json',
      },
    });
  }

  const request = await req.json();
  const { name, email, message, subject } = request as Fields;

  // Your existing validation and email sending logic
};

  4. Vercel Logs:

    • Since you mentioned seeing a 200 status in Vercel logs, it might be worth checking if there are any redirects or rewrites configured in your Vercel project that could be affecting the routes.

Additional Considerations

  • Localhost vs. Production:

    • Ensure that your environment variables (e.g., EMAIL_ADDRESS, EMAIL_PASSWORD) are correctly set up in both your local and production environments.

  • Error Handling:

    • Improve error handling in your route handlers to provide more detailed error messages, which can help in debugging.

Summary

  • Modify your middleware to skip API routes.
  • Consider disabling automatic locale detection if it's causing issues.
  • Ensure your route handlers are correctly set up to handle POST requests.
  • Check Vercel logs and configurations for any redirects or rewrites affecting the routes.

If you need further assistance, please provide more details about your middleware setup or any specific error messages you are seeing.

Best regards.

1 Like