Next.js Discord

Discord Forum

Fetching data locally with environment variables in url

Answered
Dwarf Hotot posted this in #help-forum
Open in Discord
Dwarf HototOP
Hi guys,

I'm using NextJS 14.0.4.

I'm trying to fetch data from the local api to init a few things for components.
Actually everything works fine in development, but it fails during the build, because the server is obviously not running on port 3000 while building.

I'm kinda lost, do I need to turn my component into client ones?
In this case, I can't do a async call.

Here is the content of the component :
const res = await fetch(Config.API_ENDPOINT_URL + '/gameserver', {
    next: { revalidate: 10 },
  });
  const gameserver: GameServer = res.ok ? await res.json() : undefined;
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="flex flex-col h-screen justify-between">
          <Navbar gameserver={ gameserver } />
          <Home />
          <Footer discordLink={Config.DISCORD_LINK}/>
        </div>
      </body>
    </html>
  );


The /api/gameserver also makes an external fetch.

The Config.API_ENDPOINT_URL is initialized with process.env using Zod for validation.
So in development, API_ENDPOINT_URL=http://localhost:3000.

I'm new to NextJS, I may have missed something.

Any help appreciated.
Thanks
Answered by Ray
you shouldn't fetch own api in server component. Instead fetch the data directly in the server component
https://nextjs-faq.com/fetch-api-in-rsc
View full answer

59 Replies

Jesse
add syntax highlighting pls
put jsx after the three backticks
you would need to get the URL in the server component
to do this you can either get the referer header
by creating a headers instance and then running headers().get("host")
or in your middleware.ts you can create your own header which will be request.nextUrl
I would opt for the first option personally
@Dwarf Hotot
Answer
Dwarf HototOP
oh ok, that makes senses, thanks to both of you
Ray
and its better to fetch the data in <Navbar /> instead of layout.tsx
Jesse
really?
how come?
Ray
wdym?
Jesse
why would you not fetch in layout and do it in navbar instead
Dwarf HototOP
that's really helpful, thanks
Ray
so your page won't show until the promise resolved
I can wrap the navbar with suspense and moving the fetching to it
Jesse
fair enough, sorry it's because in my use case my navbar is a client component (I'm changing this)
Dwarf HototOP
I have a bit of refactoring to do then 🙂
Jesse
same lol
Dwarf HototOP
ahah, btw this nextjs-faq is a great ressource, it should be included in the official documentation
but for discord server :lolsob:
Dwarf HototOP
ok 🙂
another question then, in the case of performing a fetch from my local api, if the remote url is not reachable, will it work juste with a simple try/catch?
Dwarf HototOP
flow would be like :
- client -> fetch external
or
- local api -> fetch external
Ray
you can create a custom error.tsx page for it
Dwarf HototOP
ok great, that's what I thought
@Dwarf Hotot flow would be like : - client -> fetch external or - local api -> fetch external
Ray
depend on do you want to expose the external api to client?
Dwarf HototOP
I was thinking about reformatting / aggregating data from the external api, to make it more useable in my own api
@Dwarf Hotot I was thinking about reformatting / aggregating data from the external api, to make it more useable in my own api
Ray
do you need to access your api outside of next? eg, mobile or other device?
Dwarf HototOP
yes probably from a discord bot
Ray
oh ok
Dwarf HototOP
so, you confirm that would be the way to go?
Ray
wait which way lol
Dwarf HototOP
ahah
I'm more a React + Express guy
Ray
its up to you, you could create the api route for discord bot
Dwarf HototOP
so my way of thinking is : the react client fetches data from express
Ray
but don't fetch it inside the server component
Dwarf HototOP
ok
Ray
instead, create a reusable function for api route and server component
Dwarf HototOP
yes, this is what i'll do
Ray
or use trpc
trpc work well in this case
Dwarf HototOP
never used it
another thing to learn ^^
try create a project with this
you define the logic in the trpc router
and it is avaliable in api route and server component
Dwarf HototOP
sounds good, it embeds all the libraries I planned to use 😉
Ray
yea it is a popular stack
you can remove the QueryClientProvier if you don't plan to use client side fetching or mutation
Dwarf HototOP
alright, again many thanks, I know who to ask next time 🙂
Ray
you're welcome