TypeError: Failed to fetch 🤯
Unanswered
Lazyllama posted this in #help-forum
I'm genuinely about to lose it.
https://gist.github.com/Lazylllama/699e31685bc895c1d165bb0e2c4c5749
https://gist.github.com/Lazylllama/0c88df209641b202812db68b0203cde3
Using template: https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template
localhost:3000/characters is working with all data showing. When I'm on localhost:3000/ and use the href in the navbar it throws this stupid error for every person then gives me error.js after redirecting me to localhost:3000/characters. This is my first time using NextJS, actually react at all so excuse my spaghetti code and if you want to you can give me tips. Also tag me if something is unclearhttps://gist.github.com/Lazylllama/699e31685bc895c1d165bb0e2c4c5749
https://gist.github.com/Lazylllama/0c88df209641b202812db68b0203cde3
Using template: https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template
16 Replies
Thrianta
The first file you linked should not be a client component. The way I can tell is by it not using/importing any client side logic (state management, useEffect/watchers). Also, since you are doing a "secret" api fetch, it should be a server component so that the api key is never exposed to the client. Also, client components can't be async. I.e. every component in a "use client" file must not be async.
@Thrianta The first file you linked should not be a client component. The way I can tell is by it not using/importing any client side logic (state management, useEffect/watchers). Also, since you are doing a "secret" api fetch, it should be a server component so that the api key is never exposed to the client. Also, client components can't be async. I.e. every component in a "use client" file must not be async.
I don't even know how I got this to work as it is right now. I'll redo some things and see how that works out. Thanks.
Thrianta
Cool. As long as you removed
"use client" from steam-data.tsx I can't complainThrianta
And you say this
getSteamData works in other places? Why not log out the response when !reponse.ok to get some more information? If you provide me with a valid steam64id I could try to fetch it myselfWhen i manually go to
localhost:3000/characters by entering the URL everything worksBut when I use the navbar, it doesn't redirect and throws the error on the page I'm on.
Thrianta
Also try replacing any
<a/> tags with import Link from "next/link" component. It might make a differencenav-item.tsx