bump

1. create .env.local file
2. to the file, add key with the name REACT_{KEY NAME}={KEY VALUE}
3. when you need to use the key, write this code:
const apikey = process.env.REACT{KEY NAME};

4. make sure you dont send your .env.local file to github or any other version control system. the key will be used when you ship your app to production, but wont be visible to anyone using the app

REACT? i thought its NEXT_PUBLIC or something..
but will it still be secure even if its a client component

this hook is intended to be used on the client so if you want to expose an environment variable to the client it should be prefixed with NEXT_PUBLIC_. anyone can see it in the bundle so make sure the key you use is supposed to be public

idk, the last time I used .env.local, it was with a react app, then I switched to nextjs

well it's an API key it should be hidden but I need to access it in order to use the hook

FYI
OP wants to hit this endpoint

const endpoint = `//ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${token}&format=json&limit=1`;

created a custom hook useLastFMand fetch with useSWR
https://github.com/alii/use-last-fm/blob/master/src/index.ts

----
Solution IMO:
You'll have to go the detour of creating a routehandler (endpoint) e.g. app/myLastFM/route.ts
Inside that endpoint (route.ts) you can securely read in your API key.
Move the communication with lastFM API into this newly created endpoint

After that adjust your useLastFM & useSWR to fetch your newly created endpoint /api/myLastFM .

// Edit
Solution 2:
If you are willing to do everything server side:
Create Server component and do everything there using a normal fetch
(But i think you don't want that reading this thread)

in order to use the hook you have to send the api key to the client

so @American Crow’s solution 2 is best

you could also use an api route if you wanted

instead of server components

that would hide the api key

thank you guys for all the good ideas I'll try them out once I'm home :)

no clue how to do this since my index page is client component since it uses other hooks and stuff

well i tried making my fork of the library and making it read process.env.LASTFM_KEY but i cant figure out how to install it

make an empty server component the new index page (page.tsx). Rename your current client index page to ClientComponent (or a fitting name). Open the new page.tsx (now an empty server component) and import the client component

oh

After that do the fetch in the server component
const data = await fetch('http://audoscroblerwhateverthefuck')
and pass data down into the client component

that makes sense to be fair

thank you ill try that

yeah you cant use this library and have the api key hidden

because the hook will only run on a client component

and for you to run the hook on the client you have to expose the api key to the client