Implementasi Multiple Environment di Next.js
Halo sobat medium dimanapun berada kembali lagi dalam sesi sharing programmer, disini saya akan membawakan materi yang cukup berbeda dari sebelumnya kalau kemarin membawakan tentang flutter sekarang saya akan mencoba membawa ke dalam Next.js yaitu framework front end untuk web, saya akan membagikan tips, bagaimana cara membuat Multiple Environment di Next.js.
Disini saya akan menjelaskan kenapa kita harus menggunakan Multiple Environment di Next.js?
1. Permasalahan
Kebanyakan dari teman-teman saat melakukan inisiasi (init) project next.js hanya berfokus pada satu environment saja, yaitu di local, padahal dalam pembuatan project ada 3 environment yang biasa dipakai kalo mengikuti best practices-nya, yaitu development, staging, dan production, dan banyak juga dari kita yang biasa membuat 3 environment itu dalam repository yang berbeda-beda misalnya, env development dibuat 1 repository, dan juga env production dibuat repository sendiri, yang malah jadi membuat banyaknya code, dan sulit untuk di maintanance.
2. Tujuan
Kita akan coba implementasi Multiple Environment di Next.js agar bisa meminimalisir banyaknya repository yang di buat dan memudahkan kita dalam running/build aplikasi sesuai environment yang kita pilih hanya dalam 1 repository saja.
3. Step By Step
a. Teman-teman di pastikan sudah menginisiasi next js project terlebih dahulu
npx create-next-app nama-projectb. Coba tambahkan 2 script ini di dalam file package.json dan juga di dalam object script
"script": {
"dev:development": "next dev -p 3002",
"start:production": "next build && next start -p 3002",
}c. Buat 2 files di folder paling luar dengan nama .env.development dan .env.production lalu isi file dengan script tersebut
.env.production :
NEXT_PUBLIC_TEST_API=production-api.env.development :
NEXT_PUBLIC_TEST_API=development-apid. Setelah itu sesuaikan code ini di dalam file index.tsx
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
console.log('envinronment: ', process.env.NEXT_PUBLIC_TEST_API);
return (
<div className={styles.container}>
<Head>
<title>Multiple Environments NEXT JS</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<h2>Multiple Environment</h2>
<h3>Environment: {process.env.NEXT_PUBLIC_TEST_API}</h3>
</div>
</div>
)
}e. Setelah itu coba running di terminal dengan perintah
“npm run dev:development”, fungsi script ini agar kita dapat running project di environment development maka hasil runningnya akan seperti ini
f. Setelah itu coba running di terminal “npm run start:production”, fungsi perintah ini agar kita dapat running project di environment production maka hasilnya akan seperti ini:
Dari saya mungkin sekian semoga dapat membantu teman-teman. Bisa di follow juga akun medium saya, agar teman-teman mendapat update terbaru dari artikel-artikel saya. Di tunggu saja artikel selanjutnya, saya akan update kembali… Terima kasih.
