@matthewevanblu said:
How to secure API key so it's not exposed in Next.js?
I am new and trying to fetch data from the API, but I see that both the header method and URL method allow the API key to be exposed. I am trying to figure out how to secure the API key in Next.js with typescript. I know this isn't exactly a TMDB issue but it is relevant. Hoping someone can give me some pointers on how I can fetch the data and display it without showing my api key in inspect element or the URL.

In order to not expose your API Key, I think it is better to use the Token feature.
I have never used it, so I will be of little help.
But I suggest you read this page in the docs.
https://developer.themoviedb.org/reference/authentication-create-session
https://developer.themoviedb.org/reference/authentication-how-do-i-generate-a-session-id

@matthewevanblu said:

I am new and trying to fetch data from the API, but I see that both the header method and URL method allow the API key to be exposed. I am trying to figure out how to secure the API key in Next.js with typescript. I know this isn't exactly a TMDB issue but it is relevant. Hoping someone can give me some pointers on how I can fetch the data and display it without showing my api key in inspect element or the URL.

Whenever you use APIs with secrets, it is advisable to keep them on the backend. Your backend then serves as something like a proxy between the "real API" and your front-end. With NextJS, this is very easy to accomplish as NextJS allows you to create server components. That means its code remains on the server and the client will not contain it. Thus, keep all code that accesses the TMDB Api on the backend and that way nobody is able to see. You are also able to limit the API calls that way if your own backend manages the amount of calls being made.