Next.js - Umgebungsvariablen

Next.js unterstützt das Veröffentlichen von Umgebungsvariablen im Knoten, die wir zum Herstellen einer Verbindung mit Server, Datenbank usw. verwenden können. Dazu müssen wir die Datei .env.local im Stammverzeichnis erstellen. Wir können auch .env.production erstellen.

Erstellen Sie .env.local

Erstellen Sie .env.local im Stammverzeichnis mit den folgenden Inhalten.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Erstellen Sie env.js

Erstellen Sie eine Seite mit dem Namen env.js mit den folgenden Inhalten im Verzeichnis pages / posts, auf der wir die Umgebungsvariablen mit process.env verwenden.

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
      }
   }
}

Starten Sie nun den Server.

Next.JS erkennt .env.local und zeigt die folgende Meldung auf der Konsole an.

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

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 / posts / env in einem Browser und Sie sehen die folgende Ausgabe.