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

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 Neon Postgres i njegovu implementaciju na Vercel .

Naglasak je na najboljoj praksi i mišljenju—tako da će članak pokriti lokalni razvoj i implementaciju, grananje i okruženja ispitivanjem CRUD aplikacije koja prikazuje popis korisničkih pojedinosti iz baze podataka.

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
• Vercel račun

Kad smo to riješili, poradimo na postavkama projekta za Neon i Vercel.

Kako postaviti Neon Postgres projekt

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

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 .env.production unutar vašeg Next.js projekta.

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 spremište na vaš lokalni stroj pomoću naredbe.

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

Nakon što ste klonirali repozitorij, kreirajte datoteku .env.production za smještaj varijabli okoline u glavnom direktoriju projekta i zalijepite svoj niz veze. Trebalo bi izgledati ovako:

 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 /sql/user_data.sql unutar predloška Next.js koji je ranije dat.

U bilo kojem trenutku možete provjeriti odjeljak Tablice 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.

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

Vercel Edge 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.

Vratite se na svoj klonirani projekt i kreirajte datoteku /api/route.ts unutar direktorija /app . Za pokretanje ove funkcije na rubu, navedite vrijeme izvođenja u bazi koda na sljedeći način:

 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 Neon serverless driver , Zod i sqlstring paket pomoću naredbe:

 npm install @neondatabase/serverless zod sqlstring

Također, morate instalirati tipove sqlstring kao ovisnost o programerima pomoću naredbe ispod.

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

Možete testirati postoji li uspješna veza s vašom bazom podataka zamjenom koda u datoteci /api/route.ts kodom u nastavku:

 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 /api u pregledniku.

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 .env.production ) i vrijednosti (vrijednost bi trebala biti sam niz). Zatim odaberite okruženje u kojem želite koristiti varijablu između proizvodnje, pregleda i razvoja.

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 Zoda . Također ćemo razgovarati o grananju baze podataka, što nam daje veću fleksibilnost i štiti vjerodostojnost vaše proizvodne grane.

Istražimo ovu API funkciju rukovatelja rutom za obradu HTTP POST zahtjeva lijepljenjem donjeg koda u /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: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid iz zahtjeva JSON. Zatim potvrđujete podatke obrasca sa Zodom . Da biste to učinili, zalijepite donji kod u /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 INSERT upit u bazu podataka.

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 stvaranje grana (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.

U sljedećem odjeljku ovaj će članak istražiti grananje baze podataka s Neonom .

Grananje baze podataka u Neonu

Idite na odjeljak Podružnice na Neon konzoli i odaberite Stvori granu . 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.

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 .env.local datoteku sličnu datoteci .env.production koju ste stvorili i postavite vjerodajnicu DATABASE_URL s nizom veze kao svojom vrijednošću.

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 .