Беҳтар кардани ҷараёни кории таҳияи лоиҳа барои интиқоли зудтар ва беҳтар муҳим аст. Дар ин мақола, шумо мефаҳмед, ки чӣ тавр сохтани муҳити оптималии рушди маҳаллӣ барои лоиҳаи Next.js бо истифода аз   Postgres ва ҷойгиркунии он дар   . Neon Vercel    . Таваҷҷӯҳ ба таҷрибаҳои беҳтарин ва андешаронӣ аст - ҳамин тавр, мақола рушд ва густариши маҳаллӣ, шохасозӣ ва муҳитҳоро тавассути баррасии барномаи CRUD, ки рӯйхати тафсилоти корбарро аз пойгоҳи додаҳо нишон медиҳад, фаро мегирад  Дар тафсилоти бештар, мо фаро мегирем:  Таъсиси лоиҳаи Neon Postgres барои рушди маҳаллӣ  Бо истифода аз Vercel CLI лоиҳаи Next.js-ро чӣ гуна ба Vercel ҷойгир кардан мумкин аст  Чӣ тавр истифода бурдани функсияҳои канори Vercel барои беҳтар кардани амалиёти вақти корӣ барои посухи зудтар ба дархостҳо  Чӣ гуна махзани Neonро аз ҳамлаҳои тазриқии SQL муҳофизат кардан мумкин аст.  Шохабандии пойгоҳи додаҳо дар Neon.  Шартҳои пешакӣ  Талабот барои риояи ин дастур чунинанд:  Маҳорати бо  Next.js.   Ҳисоби Neon  Ҳисоби  Vercel  Бо ин роҳ, биёед дар танзимоти лоиҳа барои Neon ва Vercel кор кунем.  Лоиҳаи Neon Postgres -ро чӣ гуна бояд таъсис дод    як Postgres бе сервер мебошад, ки ҳисоббарорӣ ва нигаҳдорӣро ҷудо мекунад. Он хусусиятҳои муосири таҳиякунандаро, аз қабили автоматизатсия, шохасозӣ ва барқароркунии саривақтӣ пешниҳод мекунад, ки имкон медиҳад рушди миқёспазир ва тезтар. Neon  Ҳисоби ройгони Neon эҷод кунед, агар шумо ҳоло ҳам ин корро кардан лозим аст. Пас аз анҷом додани кор, Neon шуморо ба саҳифаи танзимоти лоиҳа равона мекунад, ки дар он шумо бояд номи лоиҳа ва пойгоҳи додаҳо, версияи Postgres ва минтақаеро пешниҳод кунед (мо тавсия медиҳем, ки яке аз макони худро интихоб кунед), ки барои лоиҳа пешбинӣ шудааст.   Neon воситаи CLI-ро барои ҳамгироӣ бо муҳити маҳаллии шумо таъмин мекунад, аммо ин мақола Neon-ро тавассути интерфейси веби худ барои амалиётҳои муайян истифода хоҳад кард.  Пас аз он ки шумо лоиҳаи худро эҷод кардед, сатри пайвасти ҷамъшударо аз интерфейси Neon Dashboard нусхабардорӣ кунед ва онро ба файли   дар доираи лоиҳаи Next.js часбонед.  .env.production  Дар бораи лоиҳаи Next.js сухан ронда, ин мақола лоиҳаи кории кунунии Next.js-ро истифода мебарад, ки дорои ҷадвали маълумот аз   мебошад. ShadcnUI  Барои гирифтани ин лоиҳа, бо истифода аз фармон ин   ба мошини маҳаллии худ клон кунед. анборро   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Пас аз он ки шумо анборро клон кардед, файли   эҷод кунед, то тағирёбандаҳои муҳити зистро дар директорияи асосии лоиҳа ҷойгир кунед ва сатри пайвасти худро часбонед. Он бояд чунин бошад: .env.production   DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'  Баъдан, ба муҳаррири Neon SQL дар панели асбобҳои Neon гузаред. Дар ин ҷо шумо метавонед фармонҳои SQL-ро барои иҷрои амалҳои мушаххасе, ки барои лоиҳаи шумо лозиманд, часбонед. Фармони зерро ба муҳаррир нусхабардорӣ кунед ва часбонед, то ҷадвали SQL бо баъзе майдонҳои ҳатмӣ эҷод кунед:   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 );  Эзоҳ: Шумо метавонед ин фармонро дар файли   дар дохили қолаби Next.js, ки қаблан пешниҳод шуда буд, пайдо кунед.  /sql/user_data.sql  Шумо метавонед ҳар вақт қисмати   тафтиш кунед, то дастрас будани ҷадвали навтаъсидро тасдиқ кунед. Акнун, ки шумо ин маълумот доред, шумо аризаи худро дар Vercet ҷойгир мекунед. Шумо метавонед ин корро тавассути интерфейси корбари веби Vercel анҷом диҳед, аммо мо барои ин дарс Vercel CLI-ро истифода хоҳем бурд. Ҷадвалҳоро  Ҷойгир кардани барномаи Next.js дар Vercel  Бе сарфи вақти зиёд, ба терминали худ равед ва фармони зерро часбонед:   npm i -g vercel  Эзоҳ: Барои корбарони Mac, шумо метавонед баъзан хатои радшудаи дастрасӣ пайдо кунед; ҳамин тавр, фармонро бо калимаи калидии   префикс кунед. sudo  Фармон CLI-ро дар саросари ҷаҳон насб мекунад, ки дастрасии осонро ба CLI дар ҳама ҷо дар саросари мошини маҳаллии шумо фароҳам меорад.  Кори навбатии бояд бо истифода аз CLI ба ҳисоби Vercel-и худ ворид шавед. Барои ноил шудан ба ин, фармони зерро дар терминали худ часбонед:   vercel login  Бо интихоби провайдери сабти номи Vercel аз рӯйхат пайравӣ кунед, аутентификатсия кунед ва паёми муваффақиятро дар саҳифаи тасдиқ ҷустуҷӯ кунед.   Баъдан, шумо барномаи худро дар Vercel бо истифода аз фармони зер ҷойгир мекунед:   vercel  Ин раванд якчанд қадамҳоро барои насб кардани ҷойгиркунии шумо дар бар мегирад. Барои таъмини якрангӣ, интихобҳоро дар тасвири зер иҷро кунед.   Эзоҳ: Пас аз сохтан, шумо метавонед ҷойгиркуниро тафтиш кунед, то тасдиқ кунед, ки оё барномаи шумо мувофиқи интизорӣ кор мекунад  Минбаъд, ин мақола нишон медиҳад, ки чӣ тавр истифода бурдани функсияи Vercel Edge барои гирифтани маълумоти корбар аз пойгоҳи додаҳои Neon.  Эҷоди функсияи канори Vercel    такмилдиҳандаи иҷроиш мебошанд. Онҳо функсияҳои JavaScript ё TypeScript мебошанд, ки аз ҳисоби амалҳои оддии вақти корӣ нисбат ба компютерҳои анъанавии бидуни сервер самараноктар ва тезтаранд. Функсияҳои Vercel Edge  Ба лоиҳаи клоншудаи худ баргардед ва дар феҳристи   файли   эҷод кунед. Барои иҷро кардани ин функсия дар канор, вақти корро дар пойгоҳи код ба таври зерин муайян кунед: /app /api/route.ts   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!" }); }  Пеш аз идома додан, шумо   ,   ва бастаи   бо истифода аз фармон насб мекунед: драйвери сервери Neon Zod sqlstring -ро   npm install @neondatabase/serverless zod sqlstring  Инчунин, шумо бояд намудҳои   ҳамчун вобастагии dev бо истифода аз фармони зер насб кунед. sqlstring -ро   npm i --save-dev @types/sqlstring -D  Шумо метавонед бо иваз кардани код дар файли   бо коди зер пайвасти бомуваффақиятро ба пойгоҳи додаи шумо санҷед: /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, } ); }  Ҳангоми ворид шудан ба масири   дар браузер шумо бояд ба монанди тасвири зер посух гиред.  /api  Кори навбатии анҷом додани он аст, ки сатри пайвасти пойгоҳи додаи худро ба тағирёбандаҳои муҳити Vercel илова кунед. Ҳамин тавр, бо истифода аз Vercel CLI, ин сатрро бо фармони зерин илова кунед:   vercel env add  Барои илова кардани номи тағирёбанда (мо тавсия медиҳем, ки ин номро дар   -и худ истифода баред) ва арзиш (қимат бояд худи сатр бошад) дастурҳоро иҷро кунед. Баъдан, муҳитеро интихоб кунед, ки дар он тағирёбандаро дар байни истеҳсолот, пешнамоиш ва таҳия истифода кардан мехоҳед. .env.production  Эзоҳ: Мо шохабандиро дертар меомӯзем, аз ин рӯ эҷод кардани сатрҳои сершумори пайвастшавӣ нолозим аст.  Акнун, ки шумо URL-и пойгоҳи додаи худро ба лоиҳаи худ илова кардед, бо истифода аз фармон аз нав ҷойгир кунед:   Vercel  Дар бахши навбатӣ, шумо метавонед бо истифода аз дархости POST аз масири API функсияи худ баъзе маълумотро ба Neon фиристед.  Ирсоли маълумот ба Neon  Бе кор бо маълумот фаҳмидани яке аз ин мафҳумҳо душвор аст. Ҳамин тавр, биёед ба пойгоҳи додаҳои Neon баъзе маълумотҳои ғайриоддӣ фиристем. Ин бахш тазриқи SQL ва пешгирии ҳамларо дар пойгоҳи додаҳо бо истифода аз   фаро мегирад. Мо инчунин шохабандии пойгоҳи додаҳоро муҳокима хоҳем кард, ки ба мо чандирии бештар медиҳад ва эътимоди бахши истеҳсолии шуморо муҳофизат мекунад. Zod  Биёед ин функсияи   барои коркарди дархости HTTP POST тавассути гузоштани коди зер ба   омӯзем  коркардкунандаи масири API-ро /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 } ); } }  Ин функсияи Edge арзишҳои формаро бо ин тафсилот вайрон мекунад:   . Баъдан, шумо маълумоти формаро бо   тасдиқ мекунед. Барои ин кор, коди зерро ба   гузоред 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(), });  Рамзи дар боло овардашуда схемаеро муайян мекунад, ки сохтор ва қоидаҳои тасдиқи объектеро, ки маълумоти формаро муаррифӣ мекунад, тавсиф мекунад. Акнун, шумо метавонед бомуваффақият дархости   ба пойгоҳи додаҳо гузоред. INSERT  Вақте ки шумо базаи худро тафтиш мекунед, он бояд ба тасвири зер монанд бошад.   Ҳамвор ва зуд - бо ин шумо метавонед пойгоҳи додаи Neon-и худро пур кунед. Акнун савол ба миён меояд, ки агар ин базаи истехсолй бошад? Истифодаи маълумоти санҷишӣ дар муҳити истеҳсолӣ оқилона нест. Neon таҳаввул кардааст, то ба мо имкон диҳад, ки барои пойгоҳи додаи шумо   (монанди он, ки филиалҳои GitHub кор мекунанд). Акнун, шумо метавонед бе ягон нуқсон ё тарси ифлос кардани базаи истеҳсолӣ барномаи худро зуд санҷида ва таҳия кунед. филиалҳо эҷод кунем  Дар фасли оянда, ин мақола   меомӯзад. шохаҳои пойгоҳи додаҳоро бо Neon  Шохабандии пойгоҳи додаҳо дар Neon  Ба қисмати   дар консоли Neon гузаред ва   интихоб кунед. Ҳангоми сохтани он шумо бояд филиалро бо шохаи асосӣ ҳамчун волидайн номбар кунед. Як чизе, ки диққати моро ба худ ҷалб кард, он буд, ки он ба мо имкон дод, ки маълумотеро, ки мо мехостем, ба давра дар филиал гузорем ва чандирии бештарро таъмин кунем.  филиалҳо Филиалро  Пас аз сохтани филиал, шумо сатри пайвастро мегиред, ҳамон тавре ки шумо ҳангоми сохтани лоиҳа кардаед; боварӣ ҳосил кунед, ки онро дар ҷои бехатар нигоҳ доред.   Дар хотир доред, ки ин филиал пойгоҳи додаҳои алоҳида бо маълумоти воқеӣ ҳамчун шохаи асосӣ мебошад.  Барои истифодаи ин сатри пайвасти пойгоҳи додаҳо, як файли   шабеҳро ба файли   , ки шумо эҷод кардаед, эҷод кунед ва эътимодномаи   ро бо сатри пайваст ҳамчун арзиши он насб кунед. .env.local .env.production DATABASE_URL  Next.js ба таври худкор муайян мекунад, ки кадом файли муҳити зист ҳангоми таҳия ё истеҳсол истифода мешавад.  Вақте ки шумо ҷадвали филиали пойгоҳи додаҳоро бо маълумоти нав месанҷед, шумо метавонед онро бо филиали истеҳсолӣ муқоиса кунед.   Шумо метавонед ба филиал ҳар қадар, ки мехоҳед, тағир диҳед, ба монанди тағир додани схемаи ҷадвал ё нест кардани маълумот.  Хулоса  Таҳия метавонад мураккаб бошад, аммо бо асбобҳои аз ҷониби Neon Postgres пешниҳодшуда сохтани замимаҳои миқёспазир ва боэътимод тезтар аст. Ин мақола дастури муфассалро оид ба ташкили муҳити рушди маҳаллӣ бо истифода аз Neon ва ҷойгиркунии он дар Vercel пешниҳод кардааст. Мо ҷанбаҳои муҳимро, аз қабили танзимоти рушди маҳаллӣ, равандҳои ҷойгиркунӣ, филиалҳо ва идоракунии муҳити гуногунро фаро гирифтем. Таҳияи барномаро бо ин танзимот идома диҳед; мо мехоҳем бишнавем, ки он чӣ гуна аст.  Шумо метавонед тамоми лоиҳаро дар   тафтиш кунед. GitHub

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

Read My Stories

Ин аудио бо забони аслии ҳикоя таҳия шудааст!

Хеле дароз; Хондан

Make resilience your competitive advantage

Сохтани барномаи веб? Ин усул онро тезтар, бехатартар ва оқилтар мекунад

About Author

ШАРҲҲО

ТЕГИ овезон кунед

ИН МАКОЛА ДАР

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps