Optimiziranje tijeka razvoja projekta važno je za bržu i bolju isporuku. U ovom ćete članku istražiti kako postaviti optimalno lokalno razvojno okruženje za Next.js projekt koristeći   Postgres i njegovu implementaciju na   . Neon Vercel    CRUD aplikacije koja prikazuje popis korisničkih pojedinosti iz baze podataka. Naglasak je na najboljoj praksi i mišljenju—tako da će članak pokriti lokalni razvoj i implementaciju, grananje i okruženja ispitivanjem  Detaljnije ćemo pokriti:  Postavljanje Neon Postgres projekta za lokalni razvoj  Kako implementirati Next.js projekt u Vercel koristeći Vercel CLI  Kako koristiti rubne funkcije Vercel za poboljšanje operacija vremena izvođenja za brži odgovor na zahtjeve  Kako zaštititi Neon bazu podataka od napada SQL injekcijom.  Grananje baze podataka u Neonu.  Preduvjeti  Zahtjevi za praćenje ovog vodiča su sljedeći:  Poznavanje  Next.js.   Neon račun    račun Vercel  Kad smo to riješili, poradimo na postavkama projekta za Neon i Vercel.  Kako postaviti Neon Postgres projekt    je Postgres bez poslužitelja koji odvaja računalstvo i pohranu. Nudi moderne razvojne značajke kao što su automatsko skaliranje, grananje i vraćanje u točku u vremenu, omogućujući skalabilan i brži razvoj. Neon  Napravite besplatni Neon račun ako to još trebate učiniti. Nakon što završite, Neon vas preusmjerava na stranicu za postavljanje projekta, gdje morate unijeti naziv projekta i baze podataka, verziju Postgresa i regiju (preporučamo da odaberete onu koja je blizu vaše lokacije) namijenjenu za projekt.   Neon nudi CLI alat za integraciju s vašim lokalnim okruženjem, ali ovaj će članak koristiti Neon putem njegovog web sučelja za određene operacije.  Nakon što ste izradili svoj projekt, kopirajte skupni niz veze sa sučelja Neon Dashboard i zalijepite ga u datoteku   unutar vašeg Next.js projekta.  .env.production  Govoreći o projektu Next.js, ovaj će članak koristiti trenutni radni projekt Next.js koji sadrži podatkovnu tablicu iz   . ShadcnUI  Da biste dobili ovaj projekt, klonirajte ovo   na vaš lokalni stroj pomoću naredbe. spremište   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Nakon što ste klonirali repozitorij, kreirajte datoteku   za smještaj varijabli okoline u glavnom direktoriju projekta i zalijepite svoj niz veze. Trebalo bi izgledati ovako: .env.production   DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'  Zatim prijeđite na uređivač Neon SQL na nadzornoj ploči Neon. Ovdje možete zalijepiti SQL naredbe za izvođenje specifičnih radnji potrebnih za vaš projekt. Kopirajte i zalijepite donju naredbu u uređivač kako biste stvorili SQL tablicu s nekim obaveznim poljima:   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 );  Napomena: Ovu naredbu možete pronaći u datoteci   unutar predloška Next.js koji je ranije dat.  /sql/user_data.sql  U bilo kojem trenutku možete provjeriti odjeljak   kako biste provjerili je li novostvorena tablica dostupna. Sada kada imate tu informaciju, implementirat ćete svoju aplikaciju na Vercet. To možete učiniti putem Vercelovog web korisničkog sučelja, ali mi ćemo za ovaj vodič koristiti Vercel CLI. Tablice  Implementacija vaše Next.js aplikacije na Vercel  Bez gubljenja puno vremena idite na svoj terminal i zalijepite naredbu ispod:   npm i -g vercel  Napomena: Za Mac korisnike ponekad možete dobiti pogrešku odbijenog pristupa; stoga naredbi dodajte ključnu riječ   . sudo  Naredba instalira CLI globalno, omogućujući jednostavan pristup CLI-ju bilo gdje na vašem lokalnom računalu.  Sljedeća stvar koju trebate učiniti je prijaviti se na svoj Vercel račun koristeći CLI. Da biste to postigli, zalijepite naredbu ispod u svoj terminal:   vercel login  Nastavite odabirom svog davatelja usluge prijave na Vercel s popisa, provjerom autentičnosti i traženjem poruke o uspjehu na stranici za potvrdu.   Zatim ćete implementirati svoj program na Vercel pomoću naredbe ispod:   vercel  Ovaj proces uključuje nekoliko koraka za postavljanje vaše implementacije. Kako biste osigurali ujednačenost, slijedite odabire na slici ispod.   Napomena: nakon izgradnje možete provjeriti implementaciju kako biste potvrdili radi li vaša aplikacija prema očekivanjima  Zatim će ovaj članak pokazati kako koristiti funkciju Vercel Edge za dohvaćanje korisničkih podataka iz Neon baze podataka.  Izrada Vercel rubne funkcije    su poboljšanja performansi. To su JavaScript ili TypeScript funkcije koje su učinkovitije i brže od tradicionalnog računalstva bez poslužitelja zbog svojih jednostavnijih operacija izvođenja. Vercel Edge Funkcije  Vratite se na svoj klonirani projekt i kreirajte datoteku   unutar direktorija   . Za pokretanje ove funkcije na rubu, navedite vrijeme izvođenja u bazi koda na sljedeći način: /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!" }); }  Prije nego nastavite, instalirat ćete   ,   i   paket pomoću naredbe: Neon serverless driver Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  Također, morate instalirati tipove   kao ovisnost o programerima pomoću naredbe ispod. sqlstring   npm i --save-dev @types/sqlstring -D  Možete testirati postoji li uspješna veza s vašom bazom podataka zamjenom koda u datoteci   kodom u nastavku: /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, } ); }  Trebali biste dobiti odgovor poput slike ispod kada pristupite ruti   u pregledniku.  /api  Sljedeća stvar koju trebate učiniti je dodati vaš niz veze s bazom podataka Vercelovim varijablama okruženja. Dakle, koristeći Vercel CLI, dodajte ovaj niz pomoću naredbe:   vercel env add  Slijedite upute za dodavanje naziva varijable (preporučujemo da naziv koristite u svom   ) i vrijednosti (vrijednost bi trebala biti sam niz). Zatim odaberite okruženje u kojem želite koristiti varijablu između proizvodnje, pregleda i razvoja. .env.production  Napomena: grananje ćemo istražiti kasnije, tako da je stvaranje više nizova veze nepotrebno.  Sada kada ste dodali URL svoje baze podataka u svoj projekt, ponovno postavite korištenje naredbe:   Vercel  U sljedećem odjeljku moći ćete poslati neke podatke Neonu pomoću POST zahtjeva s vaše API rute funkcije.  Slanje podataka Neonu  Teško je razumjeti bilo koji od ovih koncepata bez rada s podacima. Dakle, pošaljimo neke lažne podatke u Neon bazu podataka. Ovaj odjeljak će pokriti SQL ubacivanje i sprječavanje napada na bazu podataka pomoću   . Također ćemo razgovarati o grananju baze podataka, što nam daje veću fleksibilnost i štiti vjerodostojnost vaše proizvodne grane. Zoda  Istražimo ovu   za obradu HTTP POST zahtjeva lijepljenjem donjeg koda u    API funkciju rukovatelja rutom /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 } ); } }  Ova funkcija Edge destrukturira vrijednosti obrasca s ovim detaljima:   iz zahtjeva JSON. Zatim potvrđujete podatke obrasca sa   . Da biste to učinili, zalijepite donji kod u  member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid Zodom /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(), });  Gornji kod definira shemu koja opisuje strukturu i pravila provjere valjanosti za objekt koji predstavlja podatke obrasca. Sada možete uspješno postaviti   upit u bazu podataka. INSERT  Trebalo bi izgledati kao slika ispod kada provjerite svoju bazu podataka.   Glatko i brzo—s time možete popuniti svoju Neon bazu podataka. Sada se postavlja pitanje, što ako je ovo proizvodna baza podataka? Nije mudro koristiti testne podatke u proizvodnom okruženju. Neon se razvio kako bi nam omogućio   (slično kao što rade GitHub grane) za vašu bazu podataka. Sada možete brzo testirati i razvijati svoju aplikaciju bez ikakvih nedostataka ili straha od kontaminacije proizvodne baze podataka. stvaranje grana  U sljedećem odjeljku ovaj će članak istražiti   . grananje baze podataka s Neonom  Grananje baze podataka u Neonu  Idite na odjeljak   na Neon konzoli i odaberite   . Morate imenovati granu s glavnom granom kao nadređenom kada je kreirate. Jedna stvar koja nam je privukla pozornost je to što nam je omogućio da podatke koje smo željeli stavimo u granu prema razdoblju, osiguravajući veću fleksibilnost.  Podružnice Stvori granu  Nakon kreiranja grane, dobit ćete niz veze, baš kao što ste to učinili prilikom izrade projekta; čuvajte ga na sigurnom mjestu.   Zapamtite, ova grana je zasebna baza podataka sa stvarnim podacima kao glavnom granom.  Da biste koristili ovaj novi niz veze baze podataka, stvorite   datoteku sličnu datoteci   koju ste stvorili i postavite vjerodajnicu   s nizom veze kao svojom vrijednošću. .env.local .env.production DATABASE_URL  Next.js automatski otkriva koju datoteku okruženja koristiti tijekom razvoja ili proizvodnje.  Kada testirate tablicu grane baze podataka s novim podacima, možete je usporediti s proizvodnom granom.   Možete napraviti onoliko izmjena grane koliko želite, kao što je promjena sheme tablice ili brisanje podataka.  Zaključak  Razvoj može biti kompliciran, ali s alatima koje nudi Neon Postgres izgradnja skalabilnih i pouzdanih aplikacija je brža. Ovaj članak pruža detaljan vodič za postavljanje lokalnog razvojnog okruženja pomoću Neona i njegovu implementaciju na Vercel. Pokrili smo bitne aspekte kao što su postavke lokalnog razvoja, procesi implementacije, grananje i upravljanje različitim okruženjima. Nastavite razvoj aplikacije s ovom postavkom; voljeli bismo čuti kako ide.  Cijeli projekt možete pogledati na   . GitHubu

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

Read My Stories

Ovaj zvuk je proizveden na izvornom jeziku priče!

Predugo; Čitati

Make resilience your competitive advantage

Izrađujete web-aplikaciju? Ova metoda čini ga bržim, sigurnijim i pametnijim

About Author

KOMENTARI

VIJESI OZNAKE

OVAJ ČLANAK JE PREDSTAVLJEN U

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps