I have next.js application and i need to get metadata from api. i've written basic fetch request in generateMetadata in page.tsx. In local or any other https domain everything is working fine but in our production domain i can't get data (in client side everything is fine, so request is sending and after waiting for 50s currently I am getting timeout error. I've tried a lot of approaches and trying to solve this for about 3 days now. I would love to listen to any suggestions! The backend is in php yii2 and we have our own server.
function logToFile(message: string) { console.log(message) }
export async function generateMetadata({ params, }: { params: Promise<{ slug: string, locale: string }> }): Promise<Metadata> { console.log('metadata start') const { slug, locale } = await params
const apiUrl = `${process.env.NEXT_PUBLIC_BASE_URL}${BLOG_DETAIL.replace('{slug}', slug)}`
logToFile(`🔍 Fetching metadata for slug: ${slug}`)
logToFile(`🌐 API URL: ${apiUrl}`)
logToFile(`🌍 Locale: ${locale}`)
logToFile(`🧾 Headers: ${JSON.stringify({ 'Accept-Language': locale || i18nConfig.defaultLocale })}`)
const controller = new AbortController()
const timeout = 1_000
const timeoutId = setTimeout(() => {
controller.abort()
logToFile('❌ Request timed out')
}, timeout)
try {
const res = await fetch(apiUrl, {
signal: controller.signal,
next: { revalidate: 600 },
headers: {
Accept: 'application/json, text/plain, */*',
'Accept-Encoding': 'gzip, deflate, br, zstd',
Origin: 'https://*****.**',
Referer: 'https:/*****.**',
'Accept-Language': locale || i18nConfig.defaultLocale,
},
})
logToFile(`✅ Response status: ${res.status}`)
if (!res.ok) {
logToFile(`❌ Non-OK response: ${res.status}`)
}
const data = await res.json()
logToFile(`✅ Parsed metadata: ${JSON.stringify(data)}`)
const { title, subtitle: description, photo } = data.data
return {
title,
description,
openGraph: {
title,
description,
images: [photo.thumbnail],
},
twitter: {
title,
description,
images: [photo.thumbnail],
},
}
} catch (error: any) {
clearTimeout(timeoutId)
logToFile(`❌ Fetch error: ${error?.message}`)
if (error?.cause) logToFile(`Cause: ${JSON.stringify(error.cause)}`)
if (error?.code) logToFile(`Error code: ${error.code}`)
if (error?.errno) logToFile(`Error errno: ${error.errno}`)
if (error?.stack) logToFile(`Stack: ${error.stack}`)
return {
title: 'Ошибка загрузки блога',
description: 'Не удалось получить данные этого блога',
}
}
}`
this is the log i am getting:
0|landing | metadata start 0|landing | 🔍 Fetching metadata for slug: team-performance-metrics-what-to-measure-and-why 0|landing | 🌐 API URL: https://new..io/api/blog/team-performance-metrics-what-to-measure-and-why 0|landing | 🌍 Locale: en 0|landing | 🧾 Headers: {"Accept-Language":"en"} 0|landing | ❌ Fetch error: fetch failed 0|landing | Cause: {"name":"ConnectTimeoutError","code":"UND_ERR_CONNECT_TIMEOUT","message":"Connect Timeout Error"} 0|landing | Stack: TypeError: fetch failed 0|landing | at node:internal/deps/undici/undici:12637:11 0|landing | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|landing | at async Module.c (/var/www/landing-nextjs/.next/server/app/[locale]/blog/[slug]/page.js:1:7702) 0|landing | ⚠️ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase 0|landing | metadata start 0|landing | 🔍 Fetching metadata for slug: team-performance-metrics-what-to-measure-and-why 0|landing | 🌐 API URL: https://new..io/api/blog/team-performance-metrics-what-to-measure-and-why 0|landing | 🌍 Locale: en 0|landing | 🧾 Headers: {"Accept-Language":"en"} 0|landing | ❌ Fetch error: fetch failed 0|landing | Cause: {"name":"ConnectTimeoutError","your textcode":"UND_ERR_CONNECT_TIMEOUT","message":"Connect Timeout Error"} 0|landing | Stack: TypeError: fetch failed 0|landing | at node:internal/deps/undici/undici:12637:11 0|landing | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|landing | at async Module.c (/var/www/landing-nextjs/.next/server/app/[locale]/blog/[slug]/page.js:1:7702)
I've tried to move front to sub domain and everything is working there as well.
apiUrlhas two points in the originhttps://new..io/, i suppose it should be one pointhttps://new.io/