Next.js - Ortam Değişkenleri
Next.js, sunucuya, veritabanına vb. Bağlanırken kullanabileceğimiz düğümde ortam değişkenlerini yayınlama desteğine sahiptir. Bunun için kök dizinde .env.local dosyası oluşturmamız gerekir. Ayrıca .env.production yaratabiliriz.
.Env.local oluşturun
Aşağıdaki içeriğe sahip kök dizinde .env.local oluşturun.
DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs
Env.js oluştur
Process.env kullanarak ortam değişkenlerini kullanacağımız page / posts dizininde aşağıdaki içeriğe sahip env.js adlı bir sayfa oluşturun.
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
}
}
}
Şimdi sunucuyu başlatın.
Sonraki .JS, .env.local dosyasını algılar ve konsolda follwing mesajını gösterir.
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
Çıkışı Doğrula
Bir tarayıcıda localhost: 3000 / posts / env'i açın ve aşağıdaki çıktıyı göreceksiniz.