In my project, I have a file named .env.local that contains three variables:
NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=pk_test_<get-your-own>
MAGIC_SECRET_KEY=sk_test_<get-your-own>
TOKEN_SECRET=some-secret
These variables are printed out in the file pages/login.ts:
import UserAuthenticationPage from 'client/features/user-authentication/user-authentication-container';
import redirectIfLoggedIn from 'client/hocs/redirect-if-logged-in';
import { NextPage } from 'next';
(UserAuthenticationPage as NextPage).getInitialProps = async () => {
console.log('env in login.ts getInitialProps', process.env);
return {
namespacesRequired: ['common', 'user-authentication'],
};
};
console.log('env in login.ts client side', process.env);
export default redirectIfLoggedIn('/')(UserAuthenticationPage);
The above code results in the following output:
env in login.ts getInitialProps {
__NEXT_PROCESSED_ENV: 'true',
NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY: 'pk_test_BD092E437FE31429',
MAGIC_SECRET_KEY: 'sk_test_C02E14264C276A40',
TOKEN_SECRET: 'my-secret-token-thingy'
}
On the server side, and:
env in login.ts client side {}
On the client side. Additionally, when running next dev, I also see the message
Loaded env from /Users/dev/my-nextjs-project/.env.localI am wondering why the public environment variables are not being exposed to the browser?