link previews not showing | Next.js | Page 1

uneven pebble Dec 27, 2023, 12:55 AM

#

Are Link Previews broken? I cannot figure out why they no longer appear.

Vercel Open Graph tool is also not able to discover metadata.

keen mesaBOT Dec 27, 2023, 12:55 AM

#

Hi @uneven pebble. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it seems there have been issues reported with metadata and Open Graph (OG) tags not being recognized or working as expected in Next.js applications deployed on Vercel.

In one issue (https://github.com/vercel/next.js/issues/46968), a user reported that SEO metadata tags were not working, and as a result, previews were not being generated correctly on platforms like Twitter and Facebook.

Another issue (https://github.com/vercel/next.js/issues/47411) suggests that the generateMetadata function in Next.js might be broken when the application is deployed on Vercel. The user reported that Facebook was not rendering OG images served from HTTPS, which is a long-standing bug on Facebook's side.

A similar problem was reported in another issue (https://github.com/vercel/next.js/issues/46875), where the user added Metadata OG in the page.tsx but the content was not showing up on any of the OG Checkers.

These issues suggest that there might be a problem with how Next.js and Vercel handle metadata and OG tags, which could be why your link previews are not showing up.

However, without more specific information about your setup and the exact problem you're facing, it's hard to provide a more definitive answer. I would recommend checking the issues linked above for potential solutions or workarounds, and consider opening a new issue on the Next.js GitHub page if your problem persists.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@uneven pebble kapa.ai is still learning and improving, please let us know how it did by reacting below

keen mesaBOT Dec 27, 2023, 6:06 PM

#

Let me check the knowledge base for you. One moment! :books:

#

The issue with your code is that you're trying to assign a function to a constant that you've declared as a number. The : number part of your code is a TypeScript type annotation that specifies that test should be a number. However, you're trying to assign a function to test, which is causing the error.

If you want to declare a function that takes a number and returns a number, you should do it like this:

const test: (zahl: number) => number = (zahl) => {
  return 5 * zahl;
}

In this code, `(zahl: number) => number` is the type annotation for the function. It specifies that the function takes a number argument and returns a number.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@marsh minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

The error in your code is due to incorrect TypeScript syntax. You're trying to declare a function transformPercentage that takes a number and returns a number, but the syntax is incorrect.

Here's the corrected version of your code:

const transformPercentage: (probability: number) => string = (probability) => {
  let percentage = Math.round(probability * 100).toString();
  let hi: string = "peter"
  return hi;
};

In this corrected version, `(probability: number) => string` is the type annotation for the function. It specifies that the function takes a number argument and returns a string. The function body then correctly returns a string `hi`.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@marsh minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

The function fetchFact is using the Fetch API to make a request to the /api/facts endpoint. The fetch function returns a Promise that resolves to the Response to that request, whether it is successful or not.

The res.json() is a method that reads the response body to completion and returns a Promise that resolves with the result of parsing the body text as JSON. This means it's transforming the response body into a JavaScript object.

So, in your code:

fetch(`/api/facts`)
  .then((res) => res.json())
  .then((data: FactData) => {
    console.log(data);
    setFact(data.fact);
  });

The `res.json()` is transforming the response from the `/api/facts` endpoint into a JSON object. This object is then passed to the next `then` block as `data`, where it's logged to the console and the `fact` property of the `data` object is passed to the `setFact` function.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@marsh minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

uneven pebble Dec 27, 2023, 11:41 PM

#

I’ve tested by hardcoding metadata into the page. Didn’t render.

Added metadata to _app.js. Didn’t render.

Added metadata to _document.js. Finally rendered.

What is wrong? @keen mesa

keen mesaBOT Dec 27, 2023, 11:41 PM

#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information provided in the extracts, it seems there might be an issue with how Next.js handles metadata in different files.

In one Github issue (https://github.com/vercel/next.js/issues/35172), a user reported that metadata tags in _app.js and _document.js were being recognized, but not those in individual pages. The user also mentioned that Next.js requires the viewport to be set in _app.js and does not allow it to be set in _document.js or individual pages.

This suggests that Next.js might have specific rules about where certain metadata tags can be placed. If these rules are not followed, the metadata tags might not be recognized or rendered correctly.

However, without more specific information about your setup and the exact problem you're facing, it's hard to provide a more definitive answer. I would recommend checking the issues linked above for potential solutions or workarounds, and consider opening a new issue on the Next.js GitHub page if your problem persists.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@uneven pebble kapa.ai is still learning and improving, please let us know how it did by reacting below

uneven pebble Dec 28, 2023, 12:07 AM

#

Could it have to do with the scripts?

"scripts": {
"dev": "next dev",
"build": "next build",
"postbuild": "next-sitemap",
"start": "next start",
"export": "npm run build && next export -o _static"
}, @keen mesa

keen mesaBOT Dec 28, 2023, 12:07 AM

#

Let me check the knowledge base for you. One moment! :books:

#link previews not showing

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

In this code, (zahl: number) => number is the type annotation for the function. It specifies that the function takes a number argument and returns a number.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

In this corrected version, (probability: number) => string is the type annotation for the function. It specifies that the function takes a number argument and returns a string. The function body then correctly returns a string hi.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

The res.json() is transforming the response from the /api/facts endpoint into a JSON object. This object is then passed to the next then block as data, where it's logged to the console and the fact property of the data object is passed to the setFact function.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

In this code, `(zahl: number) => number` is the type annotation for the function. It specifies that the function takes a number argument and returns a number.

In this corrected version, `(probability: number) => string` is the type annotation for the function. It specifies that the function takes a number argument and returns a string. The function body then correctly returns a string `hi`.

The `res.json()` is transforming the response from the `/api/facts` endpoint into a JSON object. This object is then passed to the next `then` block as `data`, where it's logged to the console and the `fact` property of the `data` object is passed to the `setFact` function.