Next.js - Variáveis de Ambiente

Next.js, tem suporte para publicar variáveis de ambiente no nó que podemos usar na conexão com o servidor, banco de dados etc. Para isso, precisamos criar o arquivo .env.local no diretório raiz. Também podemos criar .env.production.

Crie .env.local

Crie .env.local no diretório raiz com o seguinte conteúdo.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Crie env.js

Crie uma página chamada env.js com o seguinte conteúdo no diretório pages / posts onde usaremos as variáveis de ambiente usando process.env.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

Agora inicie o servidor.

O Next.JS detectará .env.local e mostrará a mensagem a seguir no console.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully