Next.js - पर्यावरण चर

Next.js, नोड में पर्यावरण चर प्रकाशित करने के लिए समर्थन है, जिसे हम सर्वर, डेटाबेस आदि से कनेक्ट करने में उपयोग कर सकते हैं। इसके लिए, हमें रूट निर्देशिका में .env.local फ़ाइल बनाने की आवश्यकता है। हम .env.production भी बना सकते हैं।

बनाएँ .env.local

निम्नलिखित सामग्री के साथ रूट निर्देशिका में .env.local बनाएँ।

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Env.js बनाएं

पेज / पोस्ट निर्देशिका में निम्नलिखित सामग्री वाली env.js नाम का एक पेज बनाएँ, जहाँ हम प्रक्रिया का उपयोग करके पर्यावरण चर का उपयोग करेंगे।

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

अब सर्वर शुरू करें।

Next.JS कंसोल पर fenwing संदेश .env.local का पता लगाएगा और दिखाएगा।

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

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउज़र में 3000 / पोस्ट / एनवी और आपको निम्न आउटपुट दिखाई देगा।