Next.js Discord

Discord Forum

Can someone explain please ?

Unanswered
tensefrogomar posted this in #help-forum
Open in Discord
Hello guys, i hope you're doing great.
I'm actually devlopping an application nextjs & expressjs.
Why I'm trying to understand is : (it's gone be long)
In my nexjts I have page Contact , that use a method in a file ApiClient to call the backend expressjs
When deploying my app , I want to know why i cannot use api_url=localhost for my .env nextjs ?
From what i understood Nextjs allow to execute some server components (my file ApiClient ) on the server
But i'm getting some error on my naviguator 'GET http://localhost:3001/categories net::ERR_CONNECTION_REFUSED'
Why is my call executed on my browser , instead of sending the request to the nextjs server component that is executed on the server ?

Sorry if i'm not clear at a 100% Let me know if there is anything

4 Replies

hi guys, thx for your reply,
mycontact page is a client component, but my ApiClient (where i make the axios call to the backend) is a server component
I'm hosting on a vps

the code is like
the page

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { apiClient } from '@/lib/api'

export function ClientNavbar() {
const router = useRouter()
...
useEffect(() => {
async function fetchCategories() {
try {
const response = await apiClient.getCategories()

the apiclient

import axios, { AxiosInstance } from 'axios'

class ApiClient {
private client: AxiosInstance

constructor() {
this.client = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_URL,
withCredentials: true,
timeout: 30000,
})


this.client.interceptors.request.use((config) => {
if (typeof window !== 'undefined') {
// Parse cookies to get auth-store
const cookieString = document.cookie
.split('; ')
.find((row) => row.startsWith('auth-store='));

if (cookieString) {
try {
const token = cookieString.split('=')[1];
console.log('🔍 ApiClient - Token from cookie:', token);
if (token) {
config.headers.Authorization = Bearer ${token};
}
} catch (error) {
console.error('Error parsing auth-store cookie:', error);
}
}
else {
}
}
return config;
})

}

async getCategories() {
const response = await this.client.get('/categories')
return response.data
}
...


I fixed it by puting NEXT_PUBLIC_API_URL = mywebsite.com/api
But I still want to now why it executes on the browser ?
The goal that i want is that my api will be invisible from the outside, only my nextjs server component will be able to call through a localhost adress
I don't know if i made myself clear ?