Can't pull environment variables in TypeScript + Tailwind project

[Dnguye92]

I created a .env file in root with a hand full of NEXT_PUBLIC_ environment variables. Trying to log them from /pages/index.tsx but I'm not seeing any of them.

Any clue?

[saltyshiomix]

@Dnguye92

I think we should locate .env file in the renderer folder.

Could you try it?

[frans-slabbekoorn]

You can load the environment variables into process.env using the dotenv package
You should load them in the main process (background.js) like this:

import { config } from 'dotenv';
import isDev from 'electron-is-dev';

config({
    path: isDev ? '.env.development' : '.env.production',
});

.env.development:

NODE_ENV="development"
CUSTOM_VAR=123
NEXT_PUBLIC_CUSTOM_VAR=456

When prefixed with NEXT_PUBLIC_ you can access them in the renderer/next.js process

[saltyshiomix]

If any troubles or updates, feel free to reopen the issue 🙏

[jt-l]

You can load the environment variables into process.env using the dotenv package You should load them in the main process (background.js) like this:

import { config } from 'dotenv';
import isDev from 'electron-is-dev';

config({
    path: isDev ? '.env.development' : '.env.production',
});

.env.development:

NODE_ENV="development"
CUSTOM_VAR=123
NEXT_PUBLIC_CUSTOM_VAR=456

When prefixed with NEXT_PUBLIC_ you can access them in the renderer/next.js process

This does not appear to work for builds, e.g., 'nextron build' -- any thoughts?

[frans-slabbekoorn]

@jt-l I'm currently not using nextron, when I get back to it i will take a look at this. Sorry!