Next.js Discord

Discord Forum

Configuration file

Unanswered
Blue orchard bee posted this in #help-forum
Open in Discord
Blue orchard beeOP
Hello, so I'm building an app using next build and I wanted to use environment variables to specify API URL for example. My whole app is client side (I don't use any getServerSideProps or getStaticProps) - the only 'solution' I found is to use NEXT_PUBLIC_, however that would limit .env changes to build time only, but I want to have configurable app at all times without a need to rebuild app. What should I do now? Do I have to change my approach from CSR to SSR?
const api = axios.create({
  baseURL: process.env.API_URL,
  headers: {
    "Content-Type": "application/json",
  },
  withCredentials: true
});

export const useApi = (): Axios => api;

9 Replies

Blue orchard beeOP
bump
yeah, to read env variables from client side, you need to use NEXT_PUBLIC
and you need to rebuild your project every time you change the env
so the only way is to migrate your app into app router
give it a try it's awesome I promise
@James4u so the only way is to migrate your app into app router
Blue orchard beeOP
what is app router?
I'm currently at hacky solution which is a shell script that replaces compiled env variables 💀
On the nextjs documentation in the top left corner you will say 'Pages Router' if you click that you can switch to 'App Router' Its the new way of doing things and its much better in general than the pages router.
There are some workarounds like storing those values on server or cloud storage, then fetch it every time when your page is rendered first time.