Using Secrets in NextJs

Using secrets in NextJs is very easy.

First, you need to create a .env file in your project root.

In the .env file, you can add the following lines:

NEXT_PUBLIC_GITHUB_TOKEN=<your-github-token>

1. Add a file named .env and add environment variable like in the following example

   API_Key = ThIsShOuLdNoTbEpUbLiC
   NEXT_PUBLIC_APP_NAME = "Example App"

   NOTE: key names that begin with NEXT_PUBLIC_ are publicly visible / accessible.

   Example:

   const showVariable = () => {
     console.log('API_Key: ', process.env.API_Key);
     console.log('NEXT_PUBLIC_APP_NAME: ', process.env.NEXT_PUBLIC_APP_NAME);
   }
   
   const Home = () => {
     showVariable();
   
     return (
       <div>
         hello
       </div>
     );
   };
   
   export default Home;

   View the console and you'll note the that API_Key variable is undefined and the NEXT_PUBLIC_APP_NAME is Example App