-1

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.

3
  • Have you checked for firewall rules blocking the connection? Commented Jun 24 at 16:51
  • I noticed that the apiUrl has two points in the origin https://new..io/, i suppose it should be one point https://new.io/ Commented Jun 24 at 18:12
  • new.**.io is our backend, we've moved it to check,**.io is our frontend Commented Jun 25 at 5:59

1 Answer 1

1

We've solved the problem, and it was actually on backend side. So front-end and backend folders are located in the same api, and my next.js server was going to local api server but in our local dns it wasn't allowed. We've added our domain to the local dns, and it stopped blocking the requests from next.js server.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.