title: Next.js authentication : 404 error for authentication
body: <p>I've an <strong>404 error</strong> for <strong>authentication</strong>.
  I used <strong>Strapi</strong> api for backend.
  heres errors console messages :</p>
  <blockquote>
  <p>api.js?4749:30 POST http://localhost:3000/undefinedapi/auth/signin 404
  (Not Found) Uncaught (in promise) SyntaxError: Unexpected token &lt; in
  JSON at position 0</p>
  </blockquote>
  <p>Here's my code.</p>
  <p><em><strong>.env</strong></em></p>
  <pre><code>REACT_APP_API_URL='http://localhost:1337/'
  </code></pre>
  <p>Why result of <strong>REACT_APP_API_URL</strong> is <em>undefined</em> and not <em>http://localhost:1337/</em>?</p>
  <p><em><strong>api.js</strong></em></p>
  <pre><code>export function getStrapiURL(path = &quot;&quot;) {
        return `${process.env.REACT_APP_API_URL}${path}`;
  }
  
  export async function loginAPI(path, creds) {
     let token = '';
  
     const config = {
       method: 'POST',
       headers: {
         &quot;Content-Type&quot;: &quot;application/json&quot;
       },
       body: JSON.stringify(creds)
  };
  
  const requestUrl = getStrapiURL(path);
      console.log(process.env.REACT_APP_API_URL,'---&gt;',requestUrl);
      const response = await fetch(requestUrl, config);
      token = await response.headers.get('authorization');
      console.log('response =&gt; ',response)
      const user = await response.json();
  
      if (user.data) {
        Cookies.set('token', token.split(' ')[1], { secure: true });
        Cookies.set('id', user.data.id, { secure: true });
      }
  }
  </code></pre>
  <p><em><strong>login.js</strong></em></p>
  <pre><code>import React, { createRef } from 'react'
  import { useHistory } from &quot;react-router-dom&quot;;
  
  import { loginAPI } from './api/api'
  import FullImageComponent from '../components/Container/FullImageComponent'
  import imgPhProfile from '../public/images/ph-profile.png'
  
  export default function login() {
    const history = useHistory()
    const emailEl = createRef()
    const passwordEl = createRef()
  
    const handleSubmit = e =&gt; {
      e.preventDefault()
      console.log('==&gt;',process.env.REACT_APP_API_URL);
      const creds = {
        user: {
          email: emailEl.current.value,
          password: passwordEl.current.value
        }
      }
      console.log('creds ==&gt;',creds.user);
  
      loginAPI('api/auth/signin', creds)
      //history.push('/');
    }
  
    return (&lt;&gt;
      &lt;FullImageComponent imgProfile={imgPhProfile}/&gt;
      &lt;section className=&quot;container d-flex flex-column align-items-center justify-content-center h-100 my-5 pt-5&quot;&gt;
          &lt;h1&gt;Connexion&lt;/h1&gt;
          &lt;form className=&quot;w-form&quot; onSubmit={**handleSubmit**}&gt;
            &lt;div className=&quot;mb-3&quot;&gt;
              &lt;label htmlFor=&quot;email&quot;
                     className=&quot;form-label&quot;&gt;&lt;/label&gt;
              &lt;input type=&quot;email&quot; 
                     ref={emailEl} 
                     className=&quot;form-control&quot; 
                     id=&quot;email&quot; 
                     placeholder=&quot;email&quot; /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;mb-3&quot;&gt;
              &lt;label htmlFor=&quot;password&quot; 
                     className=&quot;form-label&quot;&gt;&lt;/label&gt;
              &lt;input type=&quot;password&quot; 
                     ref={passwordEl} 
                     className=&quot;form-control&quot; 
                     id=&quot;password&quot; 
                     placeholder=&quot;password&quot; /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;mt-5 mb-3&quot;&gt;
              &lt;button type=&quot;submit&quot; 
                      className=&quot;&quot;&gt;Valider&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
      &lt;/section&gt;
    &lt;/&gt;)
  }
  </code></pre>
  <p><strong>EDIT:</strong></p>
  <p>I've modify the variable name in:</p>
  <pre><code>NEXT_PUBLIC_API_URL='http://localhost:1337/'
  </code></pre>
  <p>Now, here's the new errors console:</p>
  <blockquote>
  <p>POST http://localhost:1337/api/login 405 (Method Not Allowed) Uncaught
  (in promise) SyntaxError: Unexpected token M in JSON at position 0</p>
  </blockquote>