Next.js Discord

Discord Forum

Frontend URL is appended to backend calls

Unanswered
Burmese posted this in #help-forum
Open in Discord
BurmeseOP
I am so beyond confused.

When pushing to development, my axiosProvider is appending my frontend URL to the backend requests:

https://www.madster.app/home/evently-backend-production-2fab.up.railway.app

This is my frontend, and backend URL appended together.

It should be hitting:
Full API URL: evently-backend-production-2fab.up.railway.app/api/signup

My logs are showing the correct URL from my axiosProvider:

API Base URL: evently-backend-production-2fab.up.railway.app
Full API URL: evently-backend-production-2fab.up.railway.app/api/signup



Here is my axiosProvider:
'use client'

import axios, { AxiosInstance } from 'axios';
import React, { createContext, useContext, useMemo } from 'react';
import { useAuth } from '@/hooks/useAuth';

const AxiosContext = createContext<AxiosInstance | null>(null);

export const useAxios = (): AxiosInstance => {
  const context = useContext(AxiosContext);
  if (context === null) {
    throw new Error('useAxios must be used within an AxiosProvider');
  }
  return context;
};

export const AxiosProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { accessToken } = useAuth();

  const axiosInstance = useMemo(() => {
    const baseURL = process.env.NEXT_PUBLIC_API_URL;
    console.log('AxiosProvider BaseURL:', baseURL);
    const instance = axios.create({
      baseURL,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    instance.interceptors.request.use((config) => {
      console.log('Axios Request Full URL:', config.baseURL, config.url);
      if (accessToken) {
        config.headers['Authorization'] = `Bearer ${accessToken}`;
      }
      return config;
    });

    return instance;
  }, [accessToken]);

  return (
    <AxiosContext.Provider value={axiosInstance}>
      {children}
    </AxiosContext.Provider>
  );
};


Any ideas?

2 Replies

BurmeseOP
Here is the handleSubmit I am using on my signup page.tsx:

const axios = useAxios()

...

const handleSubmit = async () => {
    setError('')

    if (formData.password !== formData.verify_password) {
      setError('Passwords do not match')
      toast({
        title: "Error",
        description: "Passwords do not match! Lets try that again.",
        variant: "destructive",
      })
      return
    }

    try {
      console.log('API Base URL:', axios.defaults.baseURL);
      console.log('Full API URL:', `${axios.defaults.baseURL}/api/signup`);
      const response = await axios.post('/api/signup', {
        first_name: formData.first_name,
        last_name: formData.last_name,
        email: formData.email,
        phone_number: formData.phone_number,
        password: formData.password,
      })
      console.log('Response:', response)
      console.log('Signup successful:', response.data)
      toast({

        title: "Success!",
        description: "Your account has been created successfully!",
        variant: "default",
        duration: 5000,
      })
      router.push('/home/login')
    } catch (error) {
      console.error('Signup error:', error)
      toast({
        title: "Error",
        description: "Signup failed. Please try again",
        variant: "destructive",
        duration: 5000,
      })
      setError('Signup failed. Please try again.')
    }
  }
Even my next.config.mjs is properly set to use NEXT_PUBLIC_API_URL