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

Kugadzirisa kufambiswa kwebasa repurojekiti kwakakosha kutumira nekukurumidza uye zvirinani. Muchinyorwa chino, iwe unozoongorora maitiro ekugadzirisa yakakwana nharaunda yebudiriro nharaunda yeNext.js chirongwa uchishandisa Neon Postgres nekuiendesa kuVercel .

Kusimbisa kuri pane akanakisa maitiro uye mafungiro-saka, chinyorwa chinobata budiriro yenzvimbo uye kuendesa, branching, uye nharaunda nekuongorora CRUD application inoratidza rondedzero yevashandisi kubva mudhatabhesi.

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 Vercel account

Nezvo kunze kwenzira, ngatishandei pakuseta kweprojekiti yeNeon neVercel.

Maitiro ekumisa chirongwa cheNeon Postgres

Neon 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.

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 .env.production faira mukati mechirongwa chako cheNeon.js.

Kutaura nezve Next.js purojekiti, chinyorwa ichi chichashandisa ikozvino kushanda Next.js project ine data table kubva kuShadcnUI .

Kuti uwane iyi purojekiti, batanidza iyi repository kumushini wako wepanzvimbo uchishandisa rairo.

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

Kana uchinge wagadzira repository, gadzira .env.production faira kuti uise imba zvinosiyana-siyana mudhairekitori guru reprojekiti uye unamate tambo yako yekubatanidza. Inofanira kutaridzika seizvi:

 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 /sql/user_data.sql faira mukati meNext.js template yakapiwa kare.

Unogona kutarisa chikamu cheTables 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.

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 sudo kiyi kiyi.

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

Vercel Edge Mabasa ndiwo anowedzera kuita. Iwo maJavaScript kana maTypeScript mabasa anonyanya kushanda uye nekukurumidza kupfuura echinyakare serverless komputa nekuda kweakareruka ekumhanya kwekushanda.

Dzokera kupurojekiti yako yakaumbwa uye gadzira /api/route.ts faira mukati me /app dhairekitori. Kuti uite basa iri kumucheto, tsanangura nguva yekumhanya munheyo yekodhi sezvinotevera:

 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 Neon serverless driver , Zod , uye sqlstring package uchishandisa murairo:

 npm install @neondatabase/serverless zod sqlstring

Zvakare, iwe unofanirwa kuisa sqlstring mhando sedev kutsamira uchishandisa murairo uri pazasi.

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

Unogona kuyedza kana paine kubatana kwakabudirira kudhatabhesi rako nekutsiva kodhi iri mu /api/route.ts faira nekodhi iri pazasi:

 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 /api nzira mubrowser.

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 .env.production ) uye kukosha (ukoshi hunofanira kuva tambo pachayo). Tevere, sarudza nharaunda yaunoda kushandisa shanduko pakati pekugadzira, preview, uye kusimudzira.

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 Zod . Isu tichakurukurawo dhatabhesi branching, iyo inotipa kuwedzera kushanduka uye inodzivirira kuvimbika kwebazi rako rekugadzira.

Ngationgororei iyi API nzira yekubata basa rekugadzirisa chikumbiro cheHTTP POST nekunamira kodhi iri pazasi kuti /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: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid kubva pachikumbiro JSON. Tevere, iwe unosimbisa iyo fomu data neZod . Kuti uite izvi, isa kodhi iri pazasi mu /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 INSERT mubvunzo kune database.

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 kugadzira matavi (akafanana nemashandiro anoita matavi eGitHub) kune database yako. Iye zvino, unogona kukurumidza kuyedza nekugadzira yako app pasina chero zvipingamupinyi kana kutya kusvibisa dhatabhesi rekugadzira.

Muchikamu chinotevera, chinyorwa ichi chichaongorora database branching neNeon .

Database branching muNeon

Musoro kuchikamu cheMapazi muNeon console uye sarudza Gadzira bazi . Unofanira kudoma bazi rine bazi guru semubereki paunenge uchigadzira. Chimwe chinhu chakabata pfungwa dzedu ndechekuti zvaitibvumira kuisa data rataida mubazi nenhambo, tichiva nechokwadi chekuchinjika.

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 .env.local faira rakafanana .env.production faira rawakagadzira wobva wagadzirisa DATABASE_URL ine tambo yekubatanidza seukoshi hwayo.

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 .