I've been encountering a 504 Gateway Timeout error in my production environment when making requests to my API. However, I don't experience this issue when running the application on my local machine.

Here's a snippet of the code I'm using for my API route:

import { NextApiRequest, NextApiResponse } from "next";
import Replicate from "replicate";

const replicate = new Replicate({
  auth: process.env.REPLICATE_API_TOKEN,
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { prompt } = req.body;

    const output = await replicate.run(
      "fofr/sdxl-emoji:dee76b5afde21b0f01ed7925f0665b7e879c50ee718c5f78a9d38e04d523cc5e",
      {
        input: {
          width: 1024,
          height: 1024,
          prompt: prompt,
          refine: "no_refiner",
          scheduler: "K_EULER",
          lora_scale: 0.6,
          num_outputs: 1,
          guidance_scale: 7.5,
          apply_watermark: false,
          high_noise_frac: 0.8,
          negative_prompt: "",
          prompt_strength: 0.8,
          num_inference_steps: 50,
        },
      }
    );

    res.status(201).json(output);
  } catch (error) {
    console.error(error);
    res
      .status(500)
      .json({ error: "An error occurred while running the model" });
  }
}

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "replicate.com",
      },
      {
        protocol: "https",
        hostname: "replicate.delivery",
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "https://replicate.com/api/:path*",
      },
    ];
  },
  serverless: {
    timeout: 30,
  },
};

export default nextConfig;

I've tried increasing the server timeout limit and adding error handling around the replicate.run call, but the issue persists.