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

Беҳтар кардани ҷараёни кории таҳияи лоиҳа барои интиқоли зудтар ва беҳтар муҳим аст. Дар ин мақола, шумо мефаҳмед, ки чӣ тавр сохтани муҳити оптималии рушди маҳаллӣ барои лоиҳаи Next.js бо истифода аз Neon Postgres ва ҷойгиркунии он дар Vercel .

Таваҷҷӯҳ ба таҷрибаҳои беҳтарин ва андешаронӣ аст - ҳамин тавр, мақола рушд ва густариши маҳаллӣ, шохасозӣ ва муҳитҳоро тавассути баррасии барномаи CRUD, ки рӯйхати тафсилоти корбарро аз пойгоҳи додаҳо нишон медиҳад, фаро мегирад .

Дар тафсилоти бештар, мо фаро мегирем:

• Таъсиси лоиҳаи Neon Postgres барои рушди маҳаллӣ
• Бо истифода аз Vercel CLI лоиҳаи Next.js-ро чӣ гуна ба Vercel ҷойгир кардан мумкин аст
• Чӣ тавр истифода бурдани функсияҳои канори Vercel барои беҳтар кардани амалиёти вақти корӣ барои посухи зудтар ба дархостҳо
• Чӣ гуна махзани Neonро аз ҳамлаҳои тазриқии SQL муҳофизат кардан мумкин аст.
• Шохабандии пойгоҳи додаҳо дар Neon.

Шартҳои пешакӣ

Талабот барои риояи ин дастур чунинанд:

• Маҳорати бо Next.js.
• Ҳисоби Neon
• Ҳисоби Vercel

Бо ин роҳ, биёед дар танзимоти лоиҳа барои Neon ва Vercel кор кунем.

Лоиҳаи Neon Postgres -ро чӣ гуна бояд таъсис дод

Neon як Postgres бе сервер мебошад, ки ҳисоббарорӣ ва нигаҳдорӣро ҷудо мекунад. Он хусусиятҳои муосири таҳиякунандаро, аз қабили автоматизатсия, шохасозӣ ва барқароркунии саривақтӣ пешниҳод мекунад, ки имкон медиҳад рушди миқёспазир ва тезтар.

Ҳисоби ройгони Neon эҷод кунед, агар шумо ҳоло ҳам ин корро кардан лозим аст. Пас аз анҷом додани кор, Neon шуморо ба саҳифаи танзимоти лоиҳа равона мекунад, ки дар он шумо бояд номи лоиҳа ва пойгоҳи додаҳо, версияи Postgres ва минтақаеро пешниҳод кунед (мо тавсия медиҳем, ки яке аз макони худро интихоб кунед), ки барои лоиҳа пешбинӣ шудааст.

Neon воситаи CLI-ро барои ҳамгироӣ бо муҳити маҳаллии шумо таъмин мекунад, аммо ин мақола Neon-ро тавассути интерфейси веби худ барои амалиётҳои муайян истифода хоҳад кард.

Пас аз он ки шумо лоиҳаи худро эҷод кардед, сатри пайвасти ҷамъшударо аз интерфейси Neon Dashboard нусхабардорӣ кунед ва онро ба файли .env.production дар доираи лоиҳаи Next.js часбонед.

Дар бораи лоиҳаи 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 );

Эзоҳ: Шумо метавонед ин фармонро дар файли /sql/user_data.sql дар дохили қолаби Next.js, ки қаблан пешниҳод шуда буд, пайдо кунед.

Шумо метавонед ҳар вақт қисмати Ҷадвалҳоро тафтиш кунед, то дастрас будани ҷадвали навтаъсидро тасдиқ кунед. Акнун, ки шумо ин маълумот доред, шумо аризаи худро дар 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

Функсияҳои Vercel Edge такмилдиҳандаи иҷроиш мебошанд. Онҳо функсияҳои JavaScript ё TypeScript мебошанд, ки аз ҳисоби амалҳои оддии вақти корӣ нисбат ба компютерҳои анъанавии бидуни сервер самараноктар ва тезтаранд.

Ба лоиҳаи клоншудаи худ баргардед ва дар феҳристи /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

Инчунин, шумо бояд намудҳои sqlstring -ро ҳамчун вобастагии dev бо истифода аз фармони зер насб кунед.

 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 фаро мегирад. Мо инчунин шохабандии пойгоҳи додаҳоро муҳокима хоҳем кард, ки ба мо чандирии бештар медиҳад ва эътимоди бахши истеҳсолии шуморо муҳофизат мекунад.

Биёед ин функсияи коркардкунандаи масири API-ро барои коркарди дархости HTTP POST тавассути гузоштани коди зер ба /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 тафтиш кунед.