Kugadzirisa kufambiswa kwebasa repurojekiti kwakakosha kutumira nekukurumidza uye zvirinani. Muchinyorwa chino, iwe unozoongorora maitiro ekugadzirisa yakakwana nharaunda yebudiriro nharaunda yeNext.js chirongwa uchishandisa   Postgres nekuiendesa   . Neon kuVercel    CRUD application inoratidza rondedzero yevashandisi kubva mudhatabhesi. Kusimbisa kuri pane akanakisa maitiro uye mafungiro-saka, chinyorwa chinobata budiriro yenzvimbo uye kuendesa, branching, uye nharaunda nekuongorora  Mune mamwe mashoko, tichafukidza:  Kumisikidza chirongwa cheNeon Postgres chekusimudzira munharaunda  Maitiro ekuendesa chirongwa cheNext.js kuVercel uchishandisa Vercel CLI  Mashandisiro eVercel edge mabasa ekuvandudza mashandiro enguva yekumhanyisa mhinduro kune zvikumbiro  Maitiro ekudzivirira Neon dhatabhesi kubva kuSQL jekiseni kurwisa.  Database branching muNeon.  Prerequisites  Zvinodiwa pakutevera gwara iri ndezvizvi:  Kugona   . neNext.js  A  Neon account  A   account Vercel  Nezvo kunze kwenzira, ngatishandei pakuseta kweprojekiti yeNeon neVercel.  Maitiro ekumisa chirongwa cheNeon Postgres    is serverless Postgres inoparadzanisa komputa uye kuchengetedza. Inopa maficha emazuva ano ekuvandudza akadai seautoscaling, branching, uye point-in-time kudzoreredza, zvichibvumira scalable uye nekukurumidza kukura. Neon  Gadzira yemahara Neon account kana uchiri kuda kuzviita. Kana wapedza, Neon anokuendesa kune peji yekuseta purojekiti, kwaunofanirwa kupa purojekiti uye zita re database, vhezheni yePostgres, uye dunhu (tinokurudzira kusarudza imwe iri padyo nenzvimbo yako) inoitirwa purojekiti.   Neon inopa chishandiso cheCLI chekubatanidza nenharaunda yako, asi chinyorwa ichi chichashandisa Neon kuburikidza newebhu interface kune mamwe mabasa.  Kana wangogadzira chirongwa chako, kopira tambo yekubatanidza yakabatanidzwa kubva kuNeon Dashboard interface woiisa   faira mukati mechirongwa chako cheNeon.js.  .env.production  Kutaura nezve Next.js purojekiti, chinyorwa ichi chichashandisa ikozvino kushanda Next.js project ine data table kubva   . kuShadcnUI  Kuti uwane iyi purojekiti, batanidza iyi   kumushini wako wepanzvimbo uchishandisa rairo. repository   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Kana uchinge wagadzira repository, gadzira   faira kuti uise imba zvinosiyana-siyana mudhairekitori guru reprojekiti uye unamate tambo yako yekubatanidza. Inofanira kutaridzika seizvi: .env.production   DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'  Tevere, enda kuNeon SQL mupepeti muNeon dashboard. Pano, unogona kunamira SQL mirairo kuti uite chaiwo zviito zvinodiwa paprojekti yako. Kopa uye unamate murairo pazasi kune mupepeti kugadzira tafura yeSQL ine mamwe minda inodiwa:   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 );  Cherechedza: Unogona kuwana murairo uyu mu   faira mukati meNext.js template yakapiwa kare.  /sql/user_data.sql  Unogona kutarisa chikamu   chero nguva kuti uone kana tafura ichangobva kugadzirwa iripo. Iye zvino zvawave neruzivo irworwo, unozoendesa application yako kuVercet. Unogona kuzviita kuburikidza neVercel's web user interface, asi isu tichashandisa Vercel CLI yeiyi tutori. cheTables  Kuendesa yako Next.js app kuVercel  Pasina kutambisa nguva yakawanda, tungamira kune yako terminal uye unamate iwo murairo pazasi:   npm i -g vercel  Cherechedza: Kune vashandisi veMac, unogona dzimwe nguva kuwana kukanganisa kwarambwa; saka, prefix rairo ine   kiyi kiyi. sudo  Iwo murairo unoisa iyo CLI pasi rose, ichibvumira kupinda nyore kuCLI chero kupi zvako pamushini wako wemuno.  Chinhu chinotevera chekuita ndechekupinda muVercel account yako uchishandisa CLI. Kuti uite izvozvo, isa murairo pazasi mune yako terminal:   vercel login  Tevedzera nekusarudza wako Vercel kusaina-up mupi kubva pane iyo rondedzero, kuisimbisa, uye kutsvaga iyo yekubudirira meseji pane yekusimbisa peji.   Tevere, iwe unozoendesa chirongwa chako kuVercel uchishandisa murairo uri pazasi:   vercel  Iyi nzira inosanganisira matanho akati wandei ekumisikidza yako kutumira. Kuti uve nechokwadi chekufanana, tevera sarudzo mumufananidzo uri pasi apa.   Cherechedza: Mushure mekuvaka, unogona kutarisa kutumirwa kuti uone kana app yako iri kushanda sezvaitarisirwa  Tevere, chinyorwa ichi chicharatidza mashandisiro eVercel Edge basa kutora ruzivo rwemushandisi kubva kuNeon dhatabhesi.  Kugadzira Vercel edge basa    ndiwo anowedzera kuita. Iwo maJavaScript kana maTypeScript mabasa anonyanya kushanda uye nekukurumidza kupfuura echinyakare serverless komputa nekuda kweakareruka ekumhanya kwekushanda. Vercel Edge Mabasa  Dzokera kupurojekiti yako yakaumbwa uye gadzira   faira mukati me   dhairekitori. Kuti uite basa iri kumucheto, tsanangura nguva yekumhanya munheyo yekodhi sezvinotevera: /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!" }); }  Usati waenderera, iwe uchaisa iyo   ,   , uye   package uchishandisa murairo: Neon serverless driver Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  Zvakare, iwe unofanirwa kuisa   mhando sedev kutsamira uchishandisa murairo uri pazasi. sqlstring   npm i --save-dev @types/sqlstring -D  Unogona kuyedza kana paine kubatana kwakabudirira kudhatabhesi rako nekutsiva kodhi iri mu   faira nekodhi iri pazasi: /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, } ); }  Iwe unofanirwa kuwana mhinduro senge mufananidzo uri pazasi paunowana iyo   nzira mubrowser.  /api  Chinhu chinotevera chekuita ndechekuwedzera yako dhatabhesi yekubatanidza tambo kune Vercel's nharaunda zvinosiyana. Saka, uchishandisa Vercel CLI, wedzera tambo iyi uchishandisa murairo:   vercel env add  Tevedzera zvinokurudzirwa kuwedzera zita rakasiyana (tinokurudzira kuti ushandise zita mune yako   ) uye kukosha (ukoshi hunofanira kuva tambo pachayo). Tevere, sarudza nharaunda yaunoda kushandisa shanduko pakati pekugadzira, preview, uye kusimudzira. .env.production  Ongorora: Tichaongorora branching gare gare, saka kugadzira akawanda ekubatanidza tambo hakuna basa.  Zvino zvawawedzera yako database URL kupurojekiti yako, redeploy uchishandisa murairo:   Vercel  Muchikamu chinotevera, iwe unowana kutumira imwe data kuNeon uchishandisa POST chikumbiro kubva kune yako basa API nzira.  Kutumira data kuNeon  Zvakaoma kunzwisisa chero yeiyi pfungwa pasina kushanda nedata. Saka, ngatitumire imwe dummy data kune Neon dhatabhesi. Ichi chikamu chinovhara SQL jekiseni uye kudzivirira kurwisa pane dhatabhesi uchishandisa   . Isu tichakurukurawo dhatabhesi branching, iyo inotipa kuwedzera kushanduka uye inodzivirira kuvimbika kwebazi rako rekugadzira. Zod  Ngationgororei iyi   basa rekugadzirisa chikumbiro cheHTTP POST nekunamira kodhi iri pazasi kuti    API nzira yekubata /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 } ); } }  Iri Edge basa rinogadzirisa kukosha kwefomu neizvi:   kubva pachikumbiro JSON. Tevere, iwe unosimbisa iyo fomu data   . Kuti uite izvi, isa kodhi iri pazasi mu  member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid neZod /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(), });  Kodhi iri pamusoro inotsanangura schema inotsanangura chimiro uye mitemo yekusimbisa yechinhu chinomiririra fomu data. Iye zvino, unogona kubudirira kuita   mubvunzo kune database. INSERT  Inofanira kutaridzika semufananidzo uri pazasi paunotarisa database yako.   Smooth uye nekukurumidza-neizvozvo, iwe unogona kuzadza Neon yako dhatabhesi. Mubvunzo ikozvino ndewokuti, ko kana iri dhatabhesi rekugadzira? Hazvina kuchenjera kushandisa data rekuyedza munzvimbo yekugadzira. Neon yakashanduka kutibvumira   (akafanana nemashandiro anoita matavi eGitHub) kune database yako. Iye zvino, unogona kukurumidza kuyedza nekugadzira yako app pasina chero zvipingamupinyi kana kutya kusvibisa dhatabhesi rekugadzira. kugadzira matavi  Muchikamu chinotevera, chinyorwa ichi chichaongorora   . database branching neNeon  Database branching muNeon  Musoro kuchikamu   muNeon console uye sarudza   . Unofanira kudoma bazi rine bazi guru semubereki paunenge uchigadzira. Chimwe chinhu chakabata pfungwa dzedu ndechekuti zvaitibvumira kuisa data rataida mubazi nenhambo, tichiva nechokwadi chekuchinjika.  cheMapazi Gadzira bazi  Mushure mekugadzira bazi, iwe uchagamuchira tambo yekubatanidza, sezvawakaita paunenge uchigadzira purojekiti; ita chokwadi chekuichengeta munzvimbo yakachengeteka.   Rangarira, bazi iri dhatabhesi rakasiyana rine data chairo sebazi guru.  Kuti ushandise tambo itsva iyi yekubatanidza padatabase, gadzira   faira rakafanana   faira rawakagadzira wobva wagadzirisa   ine tambo yekubatanidza seukoshi hwayo. .env.local .env.production DATABASE_URL  Next.js inoona otomatiki kuti ndeipi faira renzvimbo yekushandisa panguva yekuvandudza kana kugadzira.  Paunoyedza tafura yebazi re database nedata nyowani, unogona kuienzanisa nebazi rekugadzira.   Iwe unogona kuita shanduko zhinji kune bazi sezvaunoda, sekuchinja tafura schema kana kudzima data.  Mhedziso  Kubudirira kunogona kuoma, asi nezvishandiso zvinopihwa neNeon Postgres, kuvaka scalable uye yakavimbika application inokurumidza. Ichi chinyorwa chakapa gwara rakadzama rekumisikidza nharaunda yekusimudzira nharaunda uchishandisa Neon nekuiendesa kuVercel. Isu takafukidza zvakakosha senge budiriro yenzvimbo setups, deployment process, branching, uye kutonga kwakasiyana nharaunda. Ramba uchigadzira application neiyi setup; toda kunzwa kuti zviri kufamba sei.  Unogona kutarisa purojekiti yese   . paGitHub

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

Read My Stories

Odhiyo iyi inogadzirwa mumutauro wekutanga wenyaya!

Kugadzira Webhu App? Iyi Nzira Inoita Inokurumidza, Yakachengeteka, uye Yakangwara

About Author

MACOMMENTS

HONGA TAGS

NYAYA IYI YAKAPIWA MUNA

Related Stories

Forget Pepe and dogwifhat — Snek Is the Memecoin You've Been Waiting For

On the Position of Large Factories

Snowdrop & Other Tales by Jacob Grimm and Wilhelm Grimm - Table of Links

Meet SNATIKA, Winner of HackerNoon's Startups of The Year 2024 in Training And Consulting

Forget Pepe and dogwifhat — Snek Is the Memecoin You've Been Waiting For

On the Position of Large Factories

Snowdrop & Other Tales by Jacob Grimm and Wilhelm Grimm - Table of Links

Meet SNATIKA, Winner of HackerNoon's Startups of The Year 2024 in Training And Consulting

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps