Je, unaunda Programu ya Wavuti? Mbinu Hii Huifanya Kuwa Haraka, Salama na Nadhifu zaidi

Kuboresha mtiririko wa kazi wa mradi ni muhimu ili kusafirisha haraka na bora. Katika makala haya, utachunguza jinsi ya kuweka mazingira bora ya maendeleo ya eneo lako kwa mradi wa Next.js kwa kutumia Neon Postgres na kuipeleka kwa Vercel .

Msisitizo ni juu ya mbinu bora na maoni-kwa hivyo, makala itashughulikia maendeleo ya ndani na utumiaji, matawi, na mazingira kwa kuchunguza programu ya CRUD inayoonyesha orodha ya maelezo ya mtumiaji kutoka kwa hifadhidata.

Kwa maelezo zaidi, tutashughulikia:

• Kuanzisha mradi wa Neon Postgres kwa maendeleo ya ndani
• Jinsi ya kupeleka mradi wa Next.js kwa Vercel kwa kutumia Vercel CLI
• Jinsi ya kutumia vitendakazi vya Vercel edge ili kuboresha utendakazi wakati wa utekelezaji kwa jibu la haraka kwa maombi
• Jinsi ya kulinda hifadhidata ya Neon kutoka kwa shambulio la sindano ya SQL.
• Matawi ya hifadhidata katika Neon.

Masharti

Mahitaji ya kufuata mwongozo huu ni kama ifuatavyo:

• Ustadi na Next.js .
• Akaunti ya Neon
• Akaunti ya Vercel

Kwa hiyo nje ya njia, wacha tufanye kazi kwenye usanidi wa mradi wa Neon na Vercel.

Jinsi ya kuanzisha mradi wa Neon Postgres

Neon ni Postgres isiyo na seva ambayo hutenganisha kompyuta na uhifadhi. Inatoa vipengele vya kisasa vya wasanidi programu kama vile kupima kiotomatiki, kuweka matawi na kurejesha kwa wakati, hivyo kuruhusu uendelezaji mkubwa na wa haraka zaidi.

Unda akaunti ya Neon bila malipo ikiwa bado unahitaji kufanya hivyo. Baada ya kumaliza, Neon hukuelekeza kwenye ukurasa wa kusanidi mradi, ambapo lazima utoe jina la mradi na hifadhidata, toleo la Postgres, na eneo (tunapendekeza uchague moja karibu na eneo lako) inayokusudiwa kwa mradi.

Neon hutoa zana ya CLI ya kuunganishwa na mazingira ya eneo lako, lakini makala haya yatatumia Neon kupitia kiolesura chake cha wavuti kwa shughuli fulani.

Mara tu unapounda mradi wako, nakili kamba ya muunganisho iliyokusanywa kutoka kwenye kiolesura cha Dashibodi ya Neon na ubandike kwenye faili .env.production ndani ya mradi wako wa Next.js.

Tukizungumzia mradi wa Next.js, makala haya yatatumia mradi wa sasa wa Next.js unaofanya kazi ulio na jedwali la data kutoka ShadcnUI .

Ili kupata mradi huu, unganisha hazina hii kwa mashine yako ya karibu kwa kutumia amri.

 git clone https://github.com/muyiwexy/dev_env_hackmamba.git

Mara tu unapotengeneza hazina, tengeneza faili .env.production ili kuweka vibadilishio vya mazingira katika saraka kuu ya mradi na ubandike kamba yako ya muunganisho. Inapaswa kuonekana kama hii:

 DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'

Ifuatayo, nenda kwa kihariri cha Neon SQL kwenye dashibodi ya Neon. Hapa, unaweza kubandika amri za SQL ili kutekeleza vitendo maalum vinavyohitajika kwa mradi wako. Nakili na ubandike amri hapa chini kwa mhariri ili kuunda jedwali la SQL na sehemu zinazohitajika:

 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 );

Kumbuka: Unaweza kupata amri hii katika faili ya /sql/user_data.sql ndani ya kiolezo cha Next.js kilichotolewa mapema.

Unaweza kuangalia sehemu ya Majedwali wakati wowote ili kuthibitisha kama jedwali jipya lililoundwa linapatikana. Kwa kuwa sasa una maelezo hayo, utatuma programu yako kwa Vercet. Unaweza kufanya hivyo kupitia kiolesura cha mtumiaji wa wavuti cha Vercel, lakini tutatumia Vercel CLI kwa mafunzo haya.

Inapeleka programu yako ya Next.js kwa Vercel

Bila kupoteza muda mwingi, nenda kwenye terminal yako na ubandike amri hapa chini:

 npm i -g vercel

Kumbuka: Kwa watumiaji wa Mac, wakati mwingine unaweza kupata hitilafu iliyokataliwa ya ufikiaji; kwa hivyo, kiambishi awali amri na neno kuu sudo .

Amri husakinisha CLI kimataifa, ikiruhusu ufikiaji rahisi wa CLI popote kwenye mashine yako ya karibu.

Kitu kinachofuata cha kufanya ni kuingia kwenye akaunti yako ya Vercel kwa kutumia CLI. Ili kufanikisha hilo, bandika amri hapa chini kwenye terminal yako:

 vercel login

Fuatilia kwa kuchagua mtoa huduma wako wa kujisajili wa Vercel kutoka kwenye orodha, kuthibitisha, na kutafuta ujumbe wa mafanikio kwenye ukurasa wa uthibitishaji.

Ifuatayo, utapeleka programu yako kwa Vercel kwa kutumia amri iliyo hapa chini:

 vercel

Utaratibu huu unahusisha hatua kadhaa ili kusanidi utumaji wako. Ili kuhakikisha usawa, fuata chaguo kwenye picha hapa chini.

Kumbuka: Baada ya kujenga, unaweza kuangalia uwekaji ili kuthibitisha kama programu yako inaendeshwa inavyotarajiwa

Ifuatayo, nakala hii itaonyesha jinsi ya kutumia kazi ya Vercel Edge kupata habari ya mtumiaji kutoka kwa hifadhidata ya Neon.

Kuunda kitendakazi cha makali ya Vercel

Kazi za Vercel Edge ni viboreshaji vya utendaji. Ni vitendaji vya JavaScript au TypeScript ambavyo vina ufanisi zaidi na kasi zaidi kuliko kompyuta ya kawaida isiyo na seva kwa sababu ya utendakazi wao mdogo wa wakati wa kutekeleza.

Rudi kwa mradi wako ulioungwa na uunde faili /api/route.ts ndani ya saraka /app . Ili kutekeleza chaguo hili la kukokotoa ukingoni, taja muda wa utekelezaji katika msingi wa msimbo kama ifuatavyo:

 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!" }); }

Kabla ya kuendelea, utasakinisha Neon serverless driver , Zod , na sqlstring kifurushi kwa kutumia amri:

 npm install @neondatabase/serverless zod sqlstring

Pia, lazima usakinishe aina za sqlstring kama utegemezi wa dev kwa kutumia amri hapa chini.

 npm i --save-dev @types/sqlstring -D

Unaweza kujaribu kama kuna muunganisho uliofaulu kwa hifadhidata yako kwa kubadilisha msimbo katika faili ya /api/route.ts na msimbo ulio hapa chini:

 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, } ); }

Unapaswa kupata jibu kama picha hapa chini unapofikia njia ya /api kwenye kivinjari.

Jambo la pili la kufanya ni kuongeza kamba ya unganisho la hifadhidata yako kwa anuwai ya mazingira ya Vercel. Kwa hivyo, kwa kutumia Vercel CLI, ongeza kamba hii kwa kutumia amri:

 vercel env add

Fuata madokezo ili kuongeza jina la kutofautisha (tunapendekeza utumie jina katika .env.production yako ) na thamani (thamani inapaswa kuwa mfuatano wenyewe). Ifuatayo, chagua mazingira ambapo ungependa kutumia utofautishaji kati ya uzalishaji, onyesho la kukagua na usanidi.

Kumbuka: Tutachunguza matawi baadaye, kwa hivyo kuunda miunganisho mingi sio lazima.

Kwa kuwa sasa umeongeza URL yako ya hifadhidata kwenye mradi wako, sambaza upya kwa kutumia amri:

 Vercel

Katika sehemu inayofuata, utaweza kutuma data kwa Neon kwa kutumia ombi la POST kutoka kwa njia yako ya API ya utendaji.

Inatuma data kwa Neon

Ni vigumu kuelewa dhana yoyote kati ya hizi bila kufanya kazi na data. Kwa hivyo, wacha tutume data ya dummy kwenye hifadhidata ya Neon. Sehemu hii itashughulikia sindano ya SQL na uzuiaji wa mashambulizi kwenye hifadhidata kwa kutumia Zod . Tutajadili pia matawi ya hifadhidata, ambayo hutupatia unyumbufu zaidi na kulinda uaminifu wa tawi lako la uzalishaji.

Wacha tuchunguze kitendaji hiki cha kidhibiti njia cha API kwa kuchakata ombi la HTTP POST kwa kubandika msimbo ulio hapa chini kwenye /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 } ); } }

Chaguo hili la Kukokotoa la Ukingo hutenganisha thamani za fomu kwa maelezo haya: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid kutokana na ombi la JSON. Ifuatayo, unathibitisha data ya fomu na Zod . Ili kufanya hivyo, bandika msimbo hapa chini kwenye /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(), });

Nambari iliyo hapo juu inafafanua mpangilio unaoelezea muundo na sheria za uthibitishaji wa kitu kinachowakilisha data ya fomu. Sasa, unaweza kufanikiwa kufanya swali INSERT kwenye hifadhidata.

Inapaswa kuonekana kama picha hapa chini unapoangalia hifadhidata yako.

Laini na haraka-kwa hiyo, unaweza kujaza hifadhidata yako ya Neon. Swali sasa ni, vipi ikiwa hii ni hifadhidata ya uzalishaji? Sio busara kutumia data ya majaribio katika mazingira ya uzalishaji. Neon imebadilika ili kuturuhusu kuunda matawi (sawa na jinsi matawi ya GitHub yanavyofanya kazi) kwa hifadhidata yako. Sasa, unaweza kujaribu na kutengeneza programu yako kwa haraka bila hitilafu zozote au hofu ya kuchafua hifadhidata ya uzalishaji.

Katika sehemu inayofuata, nakala hii itachunguza matawi ya hifadhidata na Neon .

Matawi ya hifadhidata katika Neon

Nenda kwenye sehemu ya Matawi kwenye kiweko cha Neon na uchague Unda tawi . Lazima utaje tawi lenye tawi kuu kama mzazi unapoliunda. Jambo moja lililovutia umakini wetu ni kwamba lilituruhusu kuweka data tunayotaka katika tawi kwa kipindi, na kuhakikisha kubadilika zaidi.

Baada ya kuunda tawi, utapokea kamba ya unganisho, kama vile ulivyofanya wakati wa kuunda mradi; hakikisha unaiweka mahali salama.

Kumbuka, tawi hili ni hifadhidata tofauti iliyo na data halisi kama tawi kuu.

Ili kutumia mfuatano huu mpya wa muunganisho wa hifadhidata, unda faili .env.local sawa na faili ya .env.production uliyounda na usanidi kitambulisho cha DATABASE_URL kwa mfuatano wa muunganisho kama thamani yake.

Next.js hutambua kiotomatiki faili ya mazingira ya kutumia wakati wa kutengeneza au kutengeneza.

Unapojaribu jedwali la tawi la hifadhidata na data mpya, unaweza kuilinganisha na tawi la uzalishaji.

Unaweza kufanya mabadiliko mengi kwa tawi unavyopenda, kama vile kubadilisha schema ya jedwali au kufuta data.

Hitimisho

Maendeleo yanaweza kuwa magumu, lakini kwa zana zinazotolewa na Neon Postgres, ujenzi wa utumizi mbaya na wa kuaminika ni haraka. Nakala hii ilitoa mwongozo wa kina juu ya kuweka mazingira ya maendeleo ya ndani kwa kutumia Neon na kuipeleka kwa Vercel. Tuliangazia vipengele muhimu kama vile usanidi wa maendeleo ya eneo lako, michakato ya kusambaza, kuweka matawi na kudhibiti mazingira tofauti. Endelea ukuzaji wa programu na usanidi huu; tungependa kusikia jinsi inavyoendelea.

Unaweza kuangalia mradi mzima kwenye GitHub .