Setting up public secrets

How they work

People get confused on how public secrets works, it is easy: they are variables that get defined through .env content instead of hard coding.

Your server variables will never be defined on the frontend, your SSR framework won't allow it.

How to set them up

You can start using public secrets by specifying a public prefix in your config file:

import { config } from "fatima";
 
export default config({
  client: {
    publicPrefix: "NEXT_PUBLIC_",
  },
});

From now on, as soon as you hit fatima generate, all your .env variables prefixed with NEXT_PUBLIC_ will be available under publicEnv.

Calling publicEnv

So you generated your public secrets, here's how you would call them:

import { publicEnv } from "env";
 
export default function Home() {
  return <div>{publicEnv.MY_SECRET}</div>;
}