Can someone explain please ?
Unanswered
tensefrogomar posted this in #help-forum
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
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
@tensefrogomar 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
Sun bear
are you using a client component or mounting the component that is doing the fetch as a child of a client component?
can you post the code that does the fetching
@tensefrogomar 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
Greek Shepherd
Where are u actually hosting the nextjs app and express apps? On vercel?
And are u seeing the GET to /categories actually being made in ur browser devtools network tab? Or do u just see the error in the browser console
And are u seeing the GET to /categories actually being made in ur browser devtools network tab? Or do u just see the error in the browser console
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 =
}
} 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 ?
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 ?