How to use SSG with API Route

[mrvectopus]

Hello! 🥲

I connected the database and configured the API Route, it looks like this:

/pages/api/sponsors.ts

[{"donate":"slowly reward","group":"temporise inside","group_slug":"out deceivingly","id":"rec_cneaqp2k1n2tltosuvo0","message":"angelic woefully","name":"inquisitively gah","username":"over childhood","xata":{"createdAt":"2024-02-26T15:25:24.894Z","updatedAt":"2024-02-26T15:25:24.894Z","version":0}},{"donate":"supposing whether","group":"ugh crab","group_slug":"aha clearly","id":"rec_cneaqp2k1n2tltosuvog","message":"upwardly uh-huh","name":"register limp","username":"quizzically stockpile","xata":{"createdAt":"2024-02-26T15:25:24.894Z","updatedAt":"2024-02-26T15:25:24.894Z","version":0}}]

Now I need to show data {username} and {donate} from the database on the page index.mdx with server-side generation.

Like this:

<div>
<h2>Hello, {username}</h2>
<p>You have {donate} donates</p>
</div>

I found this method: https://nextra.site/docs/guide/ssg, but this code is not work when I change fetch url to my local API Route (http://localhost:3000/pages/api/sponsors).

Next, I found this method: https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side
I'm create a component with this code and change url to my /pages/api/sponsors, this is work, but this method is not a server-side.

I was try this method too: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props#using-getstaticprops-to-fetch-data-from-a-cms

I'm created in /pages a test.tsx page and add this code, this is work like SSG, but the page is blank, I mean page show only text, data from http://localhost:3000/api/sponsors without a Sidebar, Header and etc... it's not cool.

Please, help me how I can do it :(

[caffeine-addictt]

Can you provide a link to your repo or give some code snippets to show what you have tried that didn't work?

[mrvectopus]

I'm try to show on page a data from my API route with server side generation :(

[caffeine-addictt]

Perhaps I was not clear enough.

You changed your server code from

{
    ssg: {
        donate: data.donate
        username: data.username
      },
}

to

{
    ssg: {
        donate: data
        username: data.username
      },
}

Now when you call useData(), donate now is an object and no longer a render-able type.

const { username, donate } = useData()

username // Type: string
donate // Type: Object { username: string, donate: any }

So now when you try to render donate, you are trying to render an Object which is not supported by JSX.

export const Stars = () => {
  const { donate, username } = useData() // donate now is equal to { username: '', donate: ? }
  return (
      <span className="text-blue-600">This is donate {donate}, from {username}</span>
  );
};

[mrvectopus]

I'm change donate: data.donate to donate: data only for the test...
I need show this data {username}, {donate} from my API router:

[{"donate":"slowly reward","group":"temporise inside","group_slug":"out deceivingly","id":"rec_cneaqp2k1n2tltosuvo0","message":"angelic woefully","name":"inquisitively gah","username":"over childhood","xata":{"createdAt":"2024-02-26T15:25:24.894Z","updatedAt":"2024-02-26T15:25:24.894Z","version":0}},{"donate":"supposing whether","group":"ugh crab","group_slug":"aha clearly","id":"rec_cneaqp2k1n2tltosuvog","message":"upwardly uh-huh","name":"register limp","username":"quizzically stockpile","xata":{"createdAt":"2024-02-26T15:25:24.894Z","updatedAt":"2024-02-26T15:25:24.894Z","version":0}}]

"donate":"slowly reward"
"donate":"supposing whether"
"username":"over childhood"
"username":"quizzically stockpile"

and I'm add null because without null get this error:

ssg: {
        donate: data || null,
        username: data.username || null,
      },

Server Error
Error: Error serializing `.ssg.donate` returned from `getStaticProps` in "/welcome".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

[caffeine-addictt]

Oh, I didn't catch the array.

It should be

donate: data[0].donate ?? '',
username: data[0].donate ?? ''

[mrvectopus]

You are my hero!!!