Gutezimbere ibikorwa byiterambere byumushinga ni ngombwa kohereza byihuse kandi byiza. Muri iki kiganiro, uzasuzuma uburyo washyiraho ibidukikije byiza byiterambere byumushinga wa Next.js ukoresheje   Postgres ukayohereza kuri   . Neon Vercel    porogaramu ya CRUD yerekana urutonde rwabakoresha kuva mububiko. Ibyibandwaho nibikorwa byiza kandi bitekerezwa - kubwibyo, ingingo izareba iterambere ryaho no koherezwa, ishami, nibidukikije mugusuzuma  Mubindi bisobanuro, tuzareba:  Gushiraho umushinga wa Neon Postgres kugirango utere imbere  Nigute ushobora kohereza umushinga Next.js kuri Vercel ukoresheje Vercel CLI  Nigute ushobora gukoresha imikorere ya Vercel kunoza imikorere yigihe kugirango igisubizo cyihuse kubisabwa  Nigute ushobora kurinda ububiko bwa Neon ibitero bya SQL.  Ishami ryububiko muri Neon.  Ibisabwa  Ibisabwa kugirango ukurikize iki gitabo ni ibi bikurikira:  Ubuhanga hamwe   . Ibikurikira.js   Konti ya Neon  Konti  ya Vercel  Hamwe nibyo bivuye munzira, reka dukore kumushinga wa Neon na Vercel.  Nigute washyiraho umushinga wa Neon Postgres    ni Postgres idafite seriveri itandukanya kubara no kubika. Itanga iterambere rya kijyambere nka autoscaling, ishami, hamwe nigihe-cyo kugarura, kwemerera iterambere ryihuse kandi ryihuse. Neon  Kora konti ya Neon yubusa niba ukeneye kubikora. Bimaze gukorwa, Neon ikuyobora kurupapuro rwumushinga, aho ugomba gutanga umushinga nizina ryububiko, verisiyo ya Postgres, nakarere (turasaba guhitamo imwe yegereye aho uherereye) igenewe umushinga.   Neon itanga igikoresho cya CLI cyo guhuza ibidukikije byaho, ariko iyi ngingo izakoresha Neon binyuze mumurongo wurubuga kubikorwa bimwe.  Umaze gukora umushinga wawe, kora umurongo uhuza umurongo uva kuri Neon Dashboard ya interineti hanyuma uyishyire muri dosiye   muri umushinga wawe Next.js.  .env.production  Tuvuze umushinga Next.js, iyi ngingo izakoresha umushinga ukurikira Next.js urimo imbonerahamwe yamakuru kuva   . ShadcnUI  Kugirango ubone uyu mushinga, kora   bwimashini yaho ukoresheje itegeko. ububiko bwububiko   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Umaze gukonjesha ububiko, kora dosiye   kugirango inzu ibe ihindagurika mububiko bukuru bwumushinga hanyuma wandike umurongo wihuza. Igomba kumera gutya: .env.production   DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'  Ibikurikira, komeza kuri Neon SQL mwanditsi muri Neon. Hano, urashobora gushira SQL amategeko kugirango ukore ibikorwa byihariye bikenewe kumushinga wawe. Gukoporora hanyuma wandike itegeko hepfo kuri editor kugirango ukore imbonerahamwe ya SQL hamwe nimirima isabwa:   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 );  Icyitonderwa: Urashobora kubona iri tegeko muri   muri dosiye ikurikira.js yatanzwe mbere.  /sql/user_data.sql  Urashobora kugenzura igice   igihe icyo aricyo cyose kugirango wemeze niba imbonerahamwe nshya ihari. Noneho ko ufite ayo makuru, uzohereza porogaramu yawe kuri Vercet. Urashobora kubikora ukoresheje interineti y'abakoresha urubuga rwa Vercel, ariko tuzakoresha Vercel CLI kuriyi nyigisho. cyameza  Kohereza porogaramu ikurikira.js kuri Vercel  Utataye umwanya munini, jya kuri terminal yawe hanyuma wandike itegeko hepfo:   npm i -g vercel  Icyitonderwa: Kubakoresha Mac, ushobora rimwe na rimwe kubona ikosa ryanze kwinjira; bityo, shyiramo itegeko hamwe nijambo ryibanze   . sudo  Itegeko rishyiraho CLI kwisi yose, ryemerera kugera kuri CLI ahantu hose mumashini yaho.  Igikurikira gukora nukwinjira kuri konte yawe ya Vercel ukoresheje CLI. Kugirango ubigereho, andika itegeko hepfo muri terminal yawe:   vercel login  Kurikirana uhitamo Vercel wiyandikishije utanga kurutonde, kwemeza, no gushakisha ubutumwa bwatsinze kurupapuro rwemeza.   Ibikurikira, uzohereza gahunda yawe kuri Vercel ukoresheje itegeko hepfo:   vercel  Iyi nzira ikubiyemo intambwe nyinshi zo gushiraho gahunda yawe. Kugirango ubone uburinganire, kurikiza amahitamo mumashusho hepfo.   Icyitonderwa: Nyuma yo kubaka, urashobora kugenzura ibyoherejwe kugirango wemeze niba porogaramu yawe ikora nkuko byari byitezwe  Ibikurikira, iyi ngingo irerekana uburyo wakoresha imikorere ya Vercel Edge kugirango ukure amakuru yumukoresha muri base ya Neon.  Gukora imikorere ya Vercel    Imikorere niyongera imikorere. Nibikorwa bya JavaScript cyangwa TypeScript bikora neza kandi byihuse kuruta mudasobwa zidafite seriveri kuberako ibikorwa byabo byogukora. Imikorere ya Vercel  Garuka kumushinga wawe wa clone hanyuma ukore dosiye   mububiko bwa   . Kugirango ukore iyi mikorere kuruhande, vuga igihe cyagenwe muri code base kuburyo bukurikira: /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!" }); }  Mbere yo gukomeza, uzashyiraho   ,   , na   ukoresheje itegeko: umushoferi wa Neon udafite seriveri Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  Na none, ugomba kwishyiriraho ubwoko   nkubwishingizi bwa dev ukoresheje itegeko hepfo. bwa sqlstring   npm i --save-dev @types/sqlstring -D  Urashobora kugerageza niba hari ihuriro ryiza kububiko bwawe usimbuza kode muri dosiye ya   hamwe na code iri hepfo: /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, } ); }  Ugomba kubona igisubizo nkishusho hepfo mugihe winjiye munzira   muri mushakisha.  /api  Igikurikira cyo gukora nukongeramo ububiko bwububiko bwumugozi kubidukikije bya Vercel. Noneho, ukoresheje Vercel CLI, ongeraho uyu mugozi ukoresheje itegeko:   vercel env add  Kurikiza ibisobanuro kugirango wongere izina rihinduka (turagusaba gukoresha izina muri   ) nagaciro (agaciro kagomba kuba umurongo ubwacyo). Ibikurikira, hitamo ibidukikije aho ushaka gukoresha impinduka hagati yumusaruro, kureba, niterambere. .env.production  Icyitonderwa: Tuzashakisha amashami nyuma, kurema imirongo myinshi ihuza ntabwo ari ngombwa.  Noneho ko wongeyeho data base yawe URL kumushinga wawe, ongera ukoreshe itegeko:   Vercel  Mu gice gikurikira, uzabona kohereza amakuru kuri Neon ukoresheje icyifuzo cya POST uhereye kumikorere yawe ya API.  Kohereza amakuru kuri Neon  Biragoye kumva kimwe muribi bitekerezo udakoranye namakuru. Noneho, reka twohereze amakuru adasanzwe kuri base ya Neon. Iki gice kizareba inshinge za SQL no gukumira ibitero kuri base ukoresheje   . Tuzaganira kandi kumashami yububiko, aduha guhinduka no kurinda kwizerwa kwishami ryumusaruro wawe. Zod  Reka dusuzume imikorere   yo gutunganya ibyifuzo bya HTTP POST wanditse kode hepfo muri    ya API inzira /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 } ); } }  Iyi mikorere ya Edge isenya indangagaciro zifishi hamwe nibi bisobanuro:   kubisabwa JSON. Ibikurikira, wemeza ifishi yamakuru hamwe na   . Kugirango ukore ibi, andika kode hepfo muri  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 iri hejuru isobanura igishushanyo gisobanura imiterere namategeko yo kwemeza ikintu cyerekana ifishi yamakuru. Noneho, urashobora gutsinda neza   ikibazo kububiko. INSERT  Igomba kumera nkishusho hepfo mugihe ugenzura base yawe.   Byoroheje kandi byihuse - hamwe nibyo, urashobora kwerekana ububiko bwawe bwa Neon. Ikibazo ubu ni iki, bigenda bite niba iyi ari data base yububiko? Ntabwo bihuje n'ubwenge gukoresha amakuru yikizamini mubidukikije. Neon yahindutse kugirango itwemerere   (bisa nuburyo amashami ya GitHub akora) kububiko bwawe. Noneho, urashobora kugerageza byihuse no guteza imbere porogaramu yawe nta nkomyi cyangwa ubwoba bwo kwanduza ububiko bwibikorwa. gukora amashami  Mu gice gikurikira, iyi ngingo izasesengura   . ishami ryububiko hamwe na Neon  Ishami ryububiko muri Neon  Kujya   igice muri Neon konsole hanyuma uhitemo   . Ugomba kuvuga ishami rifite ishami rikuru nkumubyeyi mugihe uremye. Ikintu cyadushishikaje ni uko byadushoboje gushyira amakuru twifuzaga mu ishami uko ibihe byagiye bisimburana.  kumashami Kurema ishami  Nyuma yo gukora ishami, uzakira umurongo uhuza, nkuko wabikoze mugihe waremye umushinga; menya neza ko ubika ahantu hizewe.   Wibuke, iri shami nububiko butandukanye hamwe namakuru afatika nkishami nyamukuru.  Kugira ngo ukoreshe umurongo mushya wububiko, kora dosiye   isa na   wakoze kandi ushireho ibyangombwa bya   hamwe numurongo wihuza nkigiciro cyacyo. .env.local .env.production DATABASE_URL  Ibikurikira.js ihita imenya dosiye yibidukikije wakoresha mugihe cyiterambere cyangwa umusaruro.  Iyo ugerageje imbonerahamwe yishami ryamakuru hamwe namakuru mashya, urashobora kuyagereranya nishami ribyara umusaruro.   Urashobora kugira byinshi uhindura kumashami nkuko ubishaka, nko guhindura imbonerahamwe yimbonerahamwe cyangwa gusiba amakuru.  Umwanzuro  Iterambere rirashobora kugorana, ariko hamwe nibikoresho byatanzwe na Neon Postgres, kubaka ibipimo binini kandi byizewe birihuta. Iyi ngingo yatanze umurongo urambuye mugushiraho ibidukikije byiterambere byiterambere ukoresheje Neon no kubyohereza kuri Vercel. Twakurikiranye ibintu byingenzi nkibikorwa byiterambere byaho, gahunda yo kohereza, ishami, no gucunga ibidukikije bitandukanye. Komeza iterambere rya porogaramu hamwe niyi mikorere; twifuza kumva uko bigenda.  Urashobora kugenzura umushinga wose kuri   . GitHub

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

Read My Stories

Aya majwi yakozwe mururimi rwumwimerere rwinkuru!

Birebire cyane; Gusoma

Make resilience your competitive advantage

Kubaka Urubuga? Ubu buryo butuma bwihuta, butekanye, kandi bwenge

About Author

IBITEKEREZO

HANG TAGS

IYI ngingo YATANZWE MU

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps