Next.js - Biến môi trường
Next.js, có hỗ trợ xuất bản các biến môi trường trong nút mà chúng ta có thể sử dụng để kết nối với máy chủ, cơ sở dữ liệu, v.v. Để làm được điều này, chúng ta cần tạo tệp .env.local trong thư mục gốc. Chúng tôi cũng có thể tạo .env.production.
Tạo .env.local
Tạo .env.local trong thư mục gốc với nội dung sau.
DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs
Tạo env.js
Tạo một trang có tên env.js với nội dung sau trong thư mục pages / posts, nơi chúng ta sẽ sử dụng các biến môi trường bằng 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
}
}
}
Bây giờ khởi động máy chủ.
Next.JS sẽ phát hiện .env.local và hiển thị thông báo follwing trên bảng điều khiển.
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
Xác minh đầu ra
Mở localhost: 3000 / posts / env trong trình duyệt và bạn sẽ thấy kết quả sau.