#Fetching data locally with environment variables in url

60 messages · Page 1 of 1 (latest)

vale pivot
#

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

cursive gale
#

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 host 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

#

@vale pivot

lavish mango
vale pivot
#

oh ok, that makes senses, thanks to both of you

cursive gale
lavish mango
#

and its better to fetch the data in <Navbar /> instead of layout.tsx

cursive gale
#

really?

#

how come?

cursive gale
# lavish mango you shouldn't fetch own api in server component. Instead fetch the data directly...

first thing he talks about here https://youtu.be/RBM03RihZVs?si=-bwma9CHUYj8a1jt

YouTube
Vercel
10 common mistakes with the Next.js App Router

After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router.

This video will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router model.

0:00 – Introduction
0:13 – Calling Route Handl...

▶ Play video
lavish mango
#

wdym?

cursive gale
#

why would you not fetch in layout and do it in navbar instead

vale pivot
#

that's really helpful, thanks

lavish mango
#

so your page won't show until the promise resolved

#

I can wrap the navbar with suspense and moving the fetching to it

cursive gale
#

fair enough, sorry it's because in my use case my navbar is a client component (I'm changing this)

vale pivot
#

I have a bit of refactoring to do then 🙂

cursive gale
#

same lol

vale pivot
#

ahah, btw this nextjs-faq is a great ressource, it should be included in the official documentation

lavish mango
#

but for this discord server lolsob

vale pivot
#

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?

lavish mango
vale pivot
#

flow would be like :

  • client -> fetch external
    or
  • local api -> fetch external
lavish mango
#

you can create a custom error.tsx page for it

vale pivot
#

ok great, that's what I thought

lavish mango
vale pivot
#

I was thinking about reformatting / aggregating data from the external api, to make it more useable in my own api

lavish mango
vale pivot
#

yes probably from a discord bot

lavish mango
#

oh ok

vale pivot
#

so, you confirm that would be the way to go?

lavish mango
#

wait which way lol

vale pivot
#

ahah

#

I'm more a React + Express guy

lavish mango
#

its up to you, you could create the api route for discord bot

vale pivot
#

so my way of thinking is : the react client fetches data from express

lavish mango
#

but don't fetch it inside the server component

vale pivot
#

ok

lavish mango
#

instead, create a reusable function for api route and server component

#

or use trpc

vale pivot
#

yes, this is what i'll do

lavish mango
#

trpc work well in this case

vale pivot
#

never used it

#

another thing to learn ^^

lavish mango
#

try create a project with this

#

you define the logic in the trpc router

#

and it is avaliable in api route and server component

vale pivot
#

sounds good, it embeds all the libraries I planned to use 😉

lavish mango
#

yea it is a popular stack

#

you can remove the QueryClientProvier if you don't plan to use client side fetching or mutation

vale pivot
#

alright, again many thanks, I know who to ask next time 🙂

lavish mango
#

you're welcome