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   Postgres dan menerapkannya ke   . Neon Vercel    aplikasi CRUD yang menampilkan daftar detail pengguna dari basis data. Penekanannya adalah pada praktik terbaik dan beropini—dengan demikian, artikel ini akan membahas pengembangan dan penerapan lokal, percabangan, dan lingkungan dengan memeriksa  Secara lebih rinci, kami akan membahas:  Menyiapkan proyek Neon Postgres untuk pengembangan lokal  Cara menyebarkan proyek Next.js ke Vercel menggunakan Vercel CLI  Cara menggunakan fungsi tepi Vercel untuk meningkatkan operasi runtime untuk respons yang lebih cepat terhadap permintaan  Cara melindungi basis data Neon dari serangan injeksi SQL.  Percabangan basis data di Neon.  Prasyarat  Persyaratan untuk mengikuti panduan ini adalah sebagai berikut:  Kemampuan dengan  Next.js.   Akun Neon  Akun  Vercel  Dengan itu, mari kita kerjakan pengaturan proyek untuk Neon dan Vercel.  Cara mengatur proyek Neon Postgres    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. Neon  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   dalam proyek Next.js Anda.  .env.production  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   ini ke mesin lokal Anda menggunakan perintah. repositori   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Setelah Anda mengkloning repositori, buat file   untuk menyimpan variabel lingkungan di direktori utama proyek dan tempelkan string koneksi Anda. Tampilannya akan seperti ini: .env.production   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   dalam templat Next.js yang disediakan sebelumnya.  /sql/user_data.sql  Anda dapat memeriksa bagian   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. Tabel  Menyebarkan aplikasi Next.js Anda ke Vercel  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.  Membuat fungsi tepi Vercel    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. Fungsi Vercel Edge  Kembali ke proyek kloning Anda dan buat file   di dalam direktori   . Untuk menjalankan fungsi ini di edge, tentukan runtime di basis kode sebagai berikut: /api/route.ts /app   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   ,   , dan paket   menggunakan perintah: driver Neon serverless Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  Anda juga harus menginstal tipe   sebagai dependensi dev menggunakan perintah di bawah ini. sqlstring   npm i --save-dev @types/sqlstring -D  Anda dapat menguji apakah ada koneksi yang berhasil ke database Anda dengan mengganti kode di file   dengan kode di bawah ini: /api/route.ts   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   di peramban.  /api  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   ) dan nilai (nilai harus berupa string itu sendiri). Selanjutnya, pilih lingkungan tempat Anda ingin menggunakan variabel antara produksi, pratinjau, dan pengembangan. .env.production  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.  Mengirim data ke Neon  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   . Kita juga akan membahas percabangan basis data, yang memberi kita lebih banyak fleksibilitas dan melindungi kredibilitas cabang produksi Anda. Zod  Mari jelajahi fungsi   ini untuk memproses permintaan HTTP POST dengan menempelkan kode di bawah ini ke    penanganan rute API /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:   dari JSON permintaan. Selanjutnya, Anda memvalidasi data formulir dengan   . Untuk melakukannya, tempel kode di bawah ini ke  member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid Zod /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   ke database. INSERT  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   (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. membuat cabang  Pada bagian berikutnya, artikel ini akan membahas   . percabangan basis data dengan Neon  Percabangan basis data di Neon  Buka bagian   di konsol Neon dan pilih   . 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.  Branches Create branch  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   yang mirip dengan file   yang Anda buat dan atur kredensial   dengan string koneksi sebagai nilainya. .env.local .env.production DATABASE_URL  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.  Kesimpulan  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

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Audio ini diproduksi dalam bahasa asli cerita!

Membangun Aplikasi Web? Metode Ini Membuatnya Lebih Cepat, Lebih Aman, dan Lebih Cerdas

About Author

KOMENTAR

HANG TAG

ARTIKEL INI DISAJIKAN PADA

Related Stories

The Priory Ruins

THE BEGINNING OF THE SEARCH FOR THE KEY AND THE COAT.

How to Fetch Large Data Files Through GitHub API

THE DAWN COMES, AND MY UNCLE APPEARS IN A NEW SILK HAT

The Priory Ruins

THE BEGINNING OF THE SEARCH FOR THE KEY AND THE COAT.

How to Fetch Large Data Files Through GitHub API

THE DAWN COMES, AND MY UNCLE APPEARS IN A NEW SILK HAT

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps