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   Postgres na kuipeleka kwa   . Neon Vercel    programu ya CRUD inayoonyesha orodha ya maelezo ya mtumiaji kutoka kwa hifadhidata. Msisitizo ni juu ya mbinu bora na maoni-kwa hivyo, makala itashughulikia maendeleo ya ndani na utumiaji, matawi, na mazingira kwa kuchunguza  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    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. Neon  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   ndani ya mradi wako wa Next.js.  .env.production  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   hii kwa mashine yako ya karibu kwa kutumia amri. hazina   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Mara tu unapotengeneza hazina, tengeneza faili   ili kuweka vibadilishio vya mazingira katika saraka kuu ya mradi na ubandike kamba yako ya muunganisho. Inapaswa kuonekana kama hii: .env.production   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   ndani ya kiolezo cha Next.js kilichotolewa mapema.  /sql/user_data.sql  Unaweza kuangalia sehemu ya   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. Majedwali  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    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. Kazi za Vercel Edge  Rudi kwa mradi wako ulioungwa na uunde faili   ndani ya saraka   . Ili kutekeleza chaguo hili la kukokotoa ukingoni, taja muda wa utekelezaji katika msingi wa msimbo kama ifuatavyo: /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!" }); }  Kabla ya kuendelea, utasakinisha   ,   , na   kifurushi kwa kutumia amri: Neon serverless driver Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  Pia, lazima usakinishe aina za   kama utegemezi wa dev kwa kutumia amri hapa chini. sqlstring   npm i --save-dev @types/sqlstring -D  Unaweza kujaribu kama kuna muunganisho uliofaulu kwa hifadhidata yako kwa kubadilisha msimbo katika faili ya   na msimbo ulio hapa chini: /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, } ); }  Unapaswa kupata jibu kama picha hapa chini unapofikia njia ya   kwenye kivinjari.  /api  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   yako ) na thamani (thamani inapaswa kuwa mfuatano wenyewe). Ifuatayo, chagua mazingira ambapo ungependa kutumia utofautishaji kati ya uzalishaji, onyesho la kukagua na usanidi. .env.production  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   . Tutajadili pia matawi ya hifadhidata, ambayo hutupatia unyumbufu zaidi na kulinda uaminifu wa tawi lako la uzalishaji. Zod  Wacha tuchunguze kitendaji hiki   kwa kuchakata ombi la HTTP POST kwa kubandika msimbo ulio hapa chini kwenye    cha kidhibiti njia cha 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 } ); } }  Chaguo hili la Kukokotoa la Ukingo hutenganisha thamani za fomu kwa maelezo haya:   kutokana na ombi la JSON. Ifuatayo, unathibitisha data ya fomu na   . Ili kufanya hivyo, bandika msimbo hapa chini kwenye  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(), });  Nambari iliyo hapo juu inafafanua mpangilio unaoelezea muundo na sheria za uthibitishaji wa kitu kinachowakilisha data ya fomu. Sasa, unaweza kufanikiwa kufanya swali   kwenye hifadhidata. INSERT  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   (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. kuunda matawi  Katika sehemu inayofuata, nakala hii itachunguza   . matawi ya hifadhidata na Neon  Matawi ya hifadhidata katika Neon  Nenda kwenye sehemu ya   kwenye kiweko cha Neon na uchague   . 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.  Matawi Unda tawi  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   sawa na faili ya   uliyounda na usanidi kitambulisho cha   kwa mfuatano wa muunganisho kama thamani yake. .env.local .env.production DATABASE_URL  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

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

Read My Stories

Sauti hii imetolewa katika lugha asilia ya hadithi!

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

About Author

MAONI

HANG TAGS

MAKALA HII ILIWASILISHWA NDANI

Related Stories

Details of the Aerial Voyage.—Kennedy silenced

A PENDENT WORLD

Master Crypto Security: Your Complete Guide to Safe Wallet Management

#ellenBrain Turns a Long Weekend Into: HackerNoon Swag Around the World

Details of the Aerial Voyage.—Kennedy silenced

A PENDENT WORLD

Master Crypto Security: Your Complete Guide to Safe Wallet Management

#ellenBrain Turns a Long Weekend Into: HackerNoon Swag Around the World

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps