Hey, we’ve tested your code in Next.js and it’s working as expected (see screenshot: https://im.gurl.eu.org/file/834b7b0f2843ec70da872.png).

If you’re still having issues, try these debug steps:

Ensure your API key is still valid (Basic plan has usage limits). You can test it using Postman to see if it’s working.
Try loading a GIF image first to see if you get a response, then add the video tag (video can be a bit more complex).

//This is main page where i make the post request//

"use client"
import React, { useState } from ‘react’;
import { useRouter } from ‘next/navigation’;

const MainHome = () => {
const router = useRouter();
const [text_prompt, setText] = useState(’’);
const [width, setWidth] = useState(1344);
const [height, setHeight] = useState(768);
const [motion, setMotion] = useState(5);
const [seed, setSeed] = useState(0);
const [upscale, setUpscale] = useState(true);
const [interpolate, setInterpolate] = useState(true);
const [id, setId] = useState(’’);

const fetchImage = async (ev) => {
    ev.preventDefault();
    try {
        const response = await fetch('https://runwayml.p.rapidapi.com/generate/text', {
            method: 'POST',
            headers: {
                'content-type': 'application/json',
                'X-RapidAPI-Key': 'afbd374dc7mshea061cb27cf118bp114905jsn2772060f10bd',
                'X-RapidAPI-Host': 'runwayml.p.rapidapi.com'
            },
            body: JSON.stringify({
                text_prompt,
                width,
                height,
                motion,
                seed,
                upscale,
                interpolate
            })
        });

        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }

        const data = await response.json();
        const uuid = data.uuid;
        console.log(data);
        console.log("UUID:", uuid);
        setId(uuid)
        router.push(`/generate/${uuid}`);
    } catch (error) {
        console.error('Error:', error);
    }
};

return (
    <div>
        <form onSubmit={fetchImage}>
            <input
                type='text'
                value={text_prompt}
                onChange={(ev) => setText(ev.target.value)}
                placeholder="Text Prompt"
            />
            <input
                type='number'
                value={width}
                onChange={(ev) => setWidth(Number(ev.target.value))}
                placeholder="Width"
            />
            <input
                type='number'
                value={height}
                onChange={(ev) => setHeight(Number(ev.target.value))}
                placeholder="Height"
            />
            <input
                type='number'
                value={motion}
                onChange={(ev) => setMotion(Number(ev.target.value))}
                placeholder="Motion"
            />
            <input
                type='number'
                value={seed}
                onChange={(ev) => setSeed(Number(ev.target.value))}
                placeholder="Seed"
            />
            <input
                type='checkbox'
                checked={upscale}
                onChange={(ev) => setUpscale(ev.target.checked)}
            />
            <label>Upscale</label>
            <input
                type='checkbox'
                checked={interpolate}
                onChange={(ev) => setInterpolate(ev.target.checked)}
            />
            <label>Interpolate</label>
            <button type="submit">Generate</button>
        </form>
    </div>
);

}

export default MainHome;

// This is the generate/[id] page where i do the GET request//

"use client"
import React, { useEffect, useState } from ‘react’;

const Generate = (params) => {

const {id} = params;

const [getdata, setgetdata] = useState({});
const [error, setError] = useState(null);

useEffect(() => {
    fetchData();
}, [id]);

const fetchData = () => {
    fetch(`https://runwayml.p.rapidapi.com/status?uuid=${id}`, {
        method: 'GET',
        headers: {
            'X-RapidAPI-Key': 'afbd374dc7mshea061cb27cf118bp114905jsn2772060f10bd',
            'X-RapidAPI-Host': 'runwayml.p.rapidapi.com'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
        setgetdata(data);
    })
    .catch(error => {
        console.error('Error:', error);
        setError('Failed to fetch data');
    });
};

return (
    <div>
        {error && <div>Error: {error}</div>}
					
            <div>
                <video controls>
                    <source src={getdata.url} type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
                <img src={getdata.gif_url} alt="Generated GIF" />
            </div>
        
    </div>
);

};
export default Generate;

Could you send us your Next.js code? We can take a look and help troubleshoot. Feel free to DM us or post it in the thread.