Mengoptimalkan alur kerja pengembangan suatu proyek penting untuk mempercepat dan meningkatkan kualitas pengiriman. Dalam artikel ini, Anda akan mempelajari cara menyiapkan lingkungan pengembangan lokal yang optimal untuk proyek Next.js menggunakan Neon Postgres dan menerapkannya ke Vercel .
Penekanannya adalah pada praktik terbaik dan beropini—dengan demikian, artikel ini akan membahas pengembangan dan penerapan lokal, percabangan, dan lingkungan dengan memeriksa aplikasi CRUD yang menampilkan daftar detail pengguna dari basis data.
Secara lebih rinci, kami akan membahas:
Persyaratan untuk mengikuti panduan ini adalah sebagai berikut:
Dengan itu, mari kita kerjakan pengaturan proyek untuk Neon dan Vercel.
Neon adalah Postgres tanpa server yang memisahkan komputasi dan penyimpanan. Ia menawarkan fitur-fitur pengembang modern seperti penskalaan otomatis, percabangan, dan pemulihan titik waktu, yang memungkinkan pengembangan yang lebih cepat dan terukur.
Buat akun Neon gratis jika Anda masih perlu melakukannya. Setelah selesai, Neon akan mengarahkan Anda ke halaman pengaturan proyek, tempat Anda harus memberikan nama proyek dan basis data, versi Postgres, dan wilayah (kami sarankan memilih yang dekat dengan lokasi Anda) yang ditujukan untuk proyek tersebut.
Neon menyediakan alat CLI untuk integrasi dengan lingkungan lokal Anda, tetapi artikel ini akan menggunakan Neon melalui antarmuka webnya untuk operasi tertentu.
Setelah Anda membuat proyek, salin string koneksi gabungan dari antarmuka Neon Dashboard dan tempel ke dalam file .env.production
dalam proyek Next.js Anda.
Berbicara tentang proyek Next.js, artikel ini akan menggunakan proyek Next.js saat ini yang berisi tabel data dari ShadcnUI .
Untuk mendapatkan proyek ini, klon repositori ini ke mesin lokal Anda menggunakan perintah.
git clone https://github.com/muyiwexy/dev_env_hackmamba.git
Setelah Anda mengkloning repositori, buat file .env.production
untuk menyimpan variabel lingkungan di direktori utama proyek dan tempelkan string koneksi Anda. Tampilannya akan seperti ini:
DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'
Selanjutnya, lanjutkan ke editor Neon SQL di dasbor Neon. Di sini, Anda dapat menempelkan perintah SQL untuk melakukan tindakan tertentu yang diperlukan untuk proyek Anda. Salin dan tempel perintah di bawah ini ke editor untuk membuat tabel SQL dengan beberapa kolom yang diperlukan:
CREATE TABLE user_details ( member_number VARCHAR(10) PRIMARY KEY, created_at VARCHAR, name VARCHAR(100), email VARCHAR(255), phone_number VARCHAR(15), gender VARCHAR(10), zone VARCHAR(50), service_unit VARCHAR(100), conference_shirt VARCHAR(5), fee_payment VARCHAR(20), paid BOOLEAN );
Catatan: Anda dapat menemukan perintah ini di file
/sql/user_data.sql
dalam templat Next.js yang disediakan sebelumnya.
Anda dapat memeriksa bagian Tabel kapan saja untuk mengonfirmasi apakah tabel yang baru dibuat tersedia. Setelah Anda memiliki informasi tersebut, Anda akan menerapkan aplikasi Anda ke Vercet. Anda dapat melakukannya melalui antarmuka pengguna web Vercel, tetapi kami akan menggunakan Vercel CLI untuk tutorial ini.
Tanpa membuang banyak waktu, buka terminal Anda dan tempel perintah di bawah ini:
npm i -g vercel
Catatan: Untuk pengguna Mac, Anda terkadang mungkin mendapatkan kesalahan akses ditolak; jadi, tambahkan awalan perintah dengan kata kunci
sudo
.
Perintah ini menginstal CLI secara global, memungkinkan akses mudah ke CLI di mana saja di komputer lokal Anda.
Hal berikutnya yang harus dilakukan adalah masuk ke akun Vercel Anda menggunakan CLI. Untuk melakukannya, tempel perintah di bawah ini di terminal Anda:
vercel login
Tindak lanjuti dengan memilih penyedia pendaftaran Vercel Anda dari daftar, lakukan autentikasi, dan cari pesan sukses di halaman konfirmasi.
Berikutnya, Anda akan menyebarkan program Anda ke Vercel menggunakan perintah di bawah ini:
vercel
Proses ini melibatkan beberapa langkah untuk menyiapkan penerapan Anda. Untuk memastikan keseragaman, ikuti pilihan pada gambar di bawah ini.
Catatan: Setelah membangun, Anda dapat memeriksa penerapan untuk mengonfirmasi apakah aplikasi Anda berjalan seperti yang diharapkan
Selanjutnya, artikel ini akan menunjukkan cara menggunakan fungsi Vercel Edge untuk mengambil informasi pengguna dari database Neon.
Fungsi Vercel Edge merupakan peningkat kinerja. Fungsi ini merupakan fungsi JavaScript atau TypeScript yang lebih efisien dan cepat daripada komputasi tanpa server tradisional karena operasi runtime-nya yang lebih ramping.
Kembali ke proyek kloning Anda dan buat file /api/route.ts
di dalam direktori /app
. Untuk menjalankan fungsi ini di edge, tentukan runtime di basis kode sebagai berikut:
import { NextRequest, NextResponse } from "next/server"; export const runtime = "edge"; export async function GET(req: NextRequest, res: NextResponse) { return NextResponse.json({ message: "Hello from the Edge!" }); }
Sebelum melanjutkan, Anda akan menginstal driver Neon serverless , Zod , dan paket sqlstring menggunakan perintah:
npm install @neondatabase/serverless zod sqlstring
Anda juga harus menginstal tipe sqlstring sebagai dependensi dev menggunakan perintah di bawah ini.
npm i --save-dev @types/sqlstring -D
Anda dapat menguji apakah ada koneksi yang berhasil ke database Anda dengan mengganti kode di file /api/route.ts
dengan kode di bawah ini:
import { NextRequest, NextResponse } from "next/server"; import { Pool } from "@neondatabase/serverless"; export const runtime = "edge"; export async function GET(req: NextRequest) { const pool = new Pool({ connectionString: process.env.DATABASE_URL, }); const sql = ` SELECT NOW(); `; const { rows } = await pool.query(sql); const now = rows[0]; await pool.end(); return NextResponse.json( { now }, { status: 200, } ); }
Anda akan mendapatkan respons seperti gambar di bawah ini saat mengakses rute /api
di peramban.
Hal berikutnya yang harus dilakukan adalah menambahkan string koneksi basis data Anda ke variabel lingkungan Vercel. Jadi, dengan menggunakan Vercel CLI, tambahkan string ini menggunakan perintah:
vercel env add
Ikuti petunjuk untuk menambahkan nama variabel (kami sarankan Anda menggunakan nama dalam .env.production
) dan nilai (nilai harus berupa string itu sendiri). Selanjutnya, pilih lingkungan tempat Anda ingin menggunakan variabel antara produksi, pratinjau, dan pengembangan.
Catatan: Kita akan membahas percabangan nanti, jadi pembuatan beberapa string koneksi tidak diperlukan.
Sekarang setelah Anda menambahkan URL basis data ke proyek Anda, terapkan ulang menggunakan perintah:
Vercel
Di bagian berikutnya, Anda akan mengirim beberapa data ke Neon menggunakan permintaan POST dari rute API fungsi Anda.
Sulit untuk memahami konsep-konsep ini tanpa bekerja dengan data. Jadi, mari kita kirim beberapa data tiruan ke basis data Neon. Bagian ini akan membahas injeksi SQL dan pencegahan serangan pada basis data menggunakan Zod . Kita juga akan membahas percabangan basis data, yang memberi kita lebih banyak fleksibilitas dan melindungi kredibilitas cabang produksi Anda.
Mari jelajahi fungsi penanganan rute API ini untuk memproses permintaan HTTP POST dengan menempelkan kode di bawah ini ke /api/route.ts
.
export async function POST(req: any) { try { const data = await req.json(); const { member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, } = schema.parse(data); const sql = sqlstring.format( ` INSERT INTO user_details ( member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid ) VALUES (?,?,?,?,?,?,?,?,?,?,?) `, [ member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, ] ); console.log("sql", sql); await pool.query(sql); await pool.end(); return NextResponse.json(data); } catch (error) { console.error("Error processing request:", error); return NextResponse.json( { message: "Failed to save user details" }, { status: 500 } ); } }
Fungsi Edge ini mendestrukturkan nilai formulir dengan detail berikut: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid
dari JSON permintaan. Selanjutnya, Anda memvalidasi data formulir dengan Zod . Untuk melakukannya, tempel kode di bawah ini ke /api/route.ts
const schema = zod.object({ member_number: zod.string().min(5).max(12), created_at: zod.string(), name: zod.string().min(1, "Name is required").max(100, "Name is too long"), email: zod .string() .email("Invalid email format") .min(5, "Email is too short") .max(100, "Email is too long"), phone_number: zod .string() .min(7, "Phone number is too short") .max(15, "Phone number is too long"), gender: zod .string() .min(1, "Gender is required") .max(6, "Gender is too long"), zone: zod.string().min(1, "Zone is required").max(50, "Zone is too long"), service_unit: zod .string() .min(1, "Service Unit is required") .max(50, "Service Unit is too long"), conference_shirt: zod .string() .min(1, "Conference shirt size is required") .max(5, "Conference shirt size is too long"), fee_payment: zod .string() .min(1, "Fee Payment info is required") .max(50, "Fee Payment info is too long"), paid: zod.boolean(), });
Kode di atas mendefinisikan skema yang menjelaskan struktur dan aturan validasi untuk objek yang mewakili data formulir. Sekarang, Anda dapat berhasil membuat kueri INSERT
ke database.
Seharusnya terlihat seperti gambar di bawah ini saat Anda memeriksa basis data Anda.
Lancar dan cepat—dengan itu, Anda dapat mengisi basis data Neon Anda. Pertanyaannya sekarang adalah, bagaimana jika ini adalah basis data produksi? Tidaklah bijaksana untuk menggunakan data uji dalam lingkungan produksi. Neon telah berevolusi untuk memungkinkan kita membuat cabang (mirip dengan cara kerja cabang GitHub) untuk basis data Anda. Sekarang, Anda dapat dengan cepat menguji dan mengembangkan aplikasi Anda tanpa kekurangan atau rasa takut mengontaminasi basis data produksi.
Pada bagian berikutnya, artikel ini akan membahas percabangan basis data dengan Neon .
Buka bagian Branches di konsol Neon dan pilih Create branch . Anda harus memberi nama cabang dengan cabang utama sebagai induk saat membuatnya. Satu hal yang menarik perhatian kami adalah bahwa hal itu memungkinkan kami untuk memasukkan data yang kami inginkan di cabang berdasarkan periode, memastikan fleksibilitas yang lebih baik.
Setelah membuat cabang, Anda akan menerima string koneksi, sama seperti yang Anda lakukan saat membuat proyek; pastikan untuk menyimpannya di lokasi yang aman.
Ingat, cabang ini adalah basis data terpisah dengan data aktual sebagai cabang utama.
Untuk menggunakan string koneksi basis data baru ini, buat file .env.local
yang mirip dengan file .env.production
yang Anda buat dan atur kredensial DATABASE_URL
dengan string koneksi sebagai nilainya.
Next.js secara otomatis mendeteksi file lingkungan apa yang akan digunakan selama pengembangan atau produksi.
Saat Anda menguji tabel cabang basis data dengan data baru, Anda dapat membandingkannya dengan cabang produksi.
Anda dapat membuat perubahan sebanyak-banyaknya pada cabang sesuai keinginan, seperti mengubah skema tabel atau menghapus data.
Pengembangan bisa jadi rumit, tetapi dengan alat yang disediakan oleh Neon Postgres, membangun aplikasi yang dapat diskalakan dan andal menjadi lebih cepat. Artikel ini menyediakan panduan terperinci tentang cara menyiapkan lingkungan pengembangan lokal menggunakan Neon dan menerapkannya ke Vercel. Kami membahas aspek-aspek penting seperti pengaturan pengembangan lokal, proses penerapan, percabangan, dan pengelolaan berbagai lingkungan. Lanjutkan pengembangan aplikasi dengan pengaturan ini; kami ingin mendengar bagaimana hasilnya.
Anda dapat memeriksa keseluruhan proyek di GitHub .