Nextjs URLs

Published on 04.08.2025

Одним прекрасным днем на одном замечательном проекте https://deepeternity.com дела пошли так хорошо что он был готов переехать с локальной машины на QA. Стек проекта nextjs плюс всякое разное. Так от оказалось что что то как локальная машина строит урлы и как продакшн машина строит урлы это 2 больших разницы. Проблема и ее решение описано ниже.

Итак код :
const res = await fetch(/api/tags/${id});
Как видит код локальная машина :
/api/tags/1
Как видит его прод:
по разному 🙂 , все зависит клиентская или серверная компонента его дергает.

• В браузере (клиент-side)
  Когда вы пишете
  fetch('/api/tags/123')
  — это чистый браузерный fetch, и он автоматически дописывает в начало текущий origin (то есть http://localhost:3000 или ваш реальный домен).
• На сервере (Node.js)
  Если вы вызываете fetch('/api/tags/123') внутри
  • getServerSideProps/getStaticProps
  • API-роуты (pages/api/...)
  • серверного компонента App Router (по умолчанию в режиме runtime: 'nodejs')
    то используется нативный Node-fetch, который не знает об origin вашего приложения и не “догоняет” домен.

Решение

export async function apiFetch(path: string, init?: RequestInit) {
    const url = `${getBaseUrl()}${path}`;
    const res = await fetch(url, init);
    if (!res.ok) throw new Error(res.statusText);

    return res;
}

function getBaseUrl() {
    if (process.env.NODE_ENV === 'production') {
        const url =
            typeof window === 'undefined'
                ? process.env.NEXT_PUBLIC_BASE_URL  // NODE: возьмём переменную окружения
                : ''; // BROWSER: используем относительный путь

        return url;
    }
    return process.env.NEXT_PUBLIC_BASE_URL;
}

Author: admin

Posted in: