Hello, initially, I want to set up simple translation with gpt 3.5 turbo in my nextjs 14 app. When I use NEXT_PUBLIC_OPENAI_API_KEY in app/page.tsx (client side) and .env.local NEXT_PUBLIC_OPENAI_API_KEY=secret key etc. it works good but when i try to move my openai api call on a server side (for security reasons) I get page.tsx:11 POST http://localhost:3000/api/translation 404 (Not Found). I don't know exactly why as everything seem so be well done.

Thank you very much for your help!

Below code:

1.
I changed .env.local OPENAI_API_KEY=secret key

2.

app/api/translation.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'POST') {
    const { input } = req.body;
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",

        messages: [
          {
            role: "system",
            content: "You are a helpful assistant."
          },
          {
            role: "user",
            content: `Translate these English words into French: ${input}`
          }
        ],
      }),
    });

   (...)

  }
}

3.

app/page.tsx

"use client";
import Navbar from './components/navbar'
import { useState } from 'react';

const HomePage = () => {
  const [input, setInput] = useState('');
  const [translation, setTranslation] = useState('');

  const handleTranslate = async () => {
    const response = await fetch('/api/translation', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        input: input,
      }),
    });

  

(...)

export default HomePage;