இணைய பயன்பாட்டை உருவாக்கவா? இந்த முறை அதை வேகமாகவும், பாதுகாப்பாகவும், புத்திசாலித்தனமாகவும் ஆக்குகிறது

ஒரு திட்டத்தின் வளர்ச்சி பணிப்பாய்வுகளை மேம்படுத்துவது வேகமாகவும் சிறப்பாகவும் அனுப்ப முக்கியம். இந்தக் கட்டுரையில், Neon Postgres ஐப் பயன்படுத்தி Next.js திட்டத்திற்கான உகந்த உள்ளூர் மேம்பாட்டு சூழலை எவ்வாறு அமைப்பது மற்றும் அதை Vercel க்கு எவ்வாறு பயன்படுத்துவது என்பதை நீங்கள் ஆராய்வீர்கள்.

சிறந்த நடைமுறைகள் மற்றும் கருத்துக்களுக்கு முக்கியத்துவம் கொடுக்கப்படுகிறது - எனவே, தரவுத்தளத்திலிருந்து பயனர் விவரங்களின் பட்டியலைக் காண்பிக்கும் CRUD பயன்பாட்டை ஆய்வு செய்வதன் மூலம் கட்டுரை உள்ளூர் மேம்பாடு மற்றும் வரிசைப்படுத்தல், கிளைகள் மற்றும் சூழல்களை உள்ளடக்கும் .

மேலும் விவரங்களில், நாங்கள் உள்ளடக்குவோம்:

• உள்ளூர் மேம்பாட்டிற்காக நியான் போஸ்ட்கிரெஸ் திட்டத்தை அமைத்தல்
• Vercel CLI ஐப் பயன்படுத்தி Vercel க்கு Next.js திட்டத்தை எவ்வாறு பயன்படுத்துவது
• கோரிக்கைகளுக்கு விரைவான பதிலுக்காக இயக்க நேர செயல்பாடுகளை மேம்படுத்த Vercel எட்ஜ் செயல்பாடுகளை எவ்வாறு பயன்படுத்துவது
• SQL ஊசி தாக்குதல்களிலிருந்து நியான் தரவுத்தளத்தை எவ்வாறு பாதுகாப்பது.
• நியானில் தரவுத்தளம் கிளைத்துள்ளது.

முன்நிபந்தனைகள்

இந்த வழிகாட்டியைப் பின்பற்றுவதற்கான தேவைகள் பின்வருமாறு:

• Next.js உடன் தேர்ச்சி.
• ஒரு நியான் கணக்கு
• ஒரு வெர்செல் கணக்கு

நியான் மற்றும் வெர்சலுக்கான திட்ட அமைப்புகளில் வேலை செய்வோம்.

நியான் போஸ்ட்கிரெஸ் திட்டத்தை எவ்வாறு அமைப்பது

நியான் என்பது கணினி மற்றும் சேமிப்பகத்தைப் பிரிக்கும் சர்வர்லெஸ் போஸ்ட்கிரெஸ் ஆகும். இது ஆட்டோஸ்கேலிங், கிளைகள் மற்றும் பாயிண்ட்-இன்-டைம் ரீஸ்டோர் போன்ற நவீன டெவலப்பர் அம்சங்களை வழங்குகிறது, இது அளவிடக்கூடிய மற்றும் வேகமான வளர்ச்சியை அனுமதிக்கிறது.

நீங்கள் இன்னும் அவ்வாறு செய்ய வேண்டும் என்றால் இலவச நியான் கணக்கை உருவாக்கவும். முடிந்ததும், நியான் உங்களை திட்ட அமைவுப் பக்கத்திற்குத் திருப்பிவிடும், அங்கு நீங்கள் திட்டப்பணி மற்றும் தரவுத்தளப் பெயர், போஸ்ட்கிரெஸ் பதிப்பு மற்றும் திட்டத்திற்கான ஒரு பகுதியை (உங்கள் இருப்பிடத்திற்கு அருகிலுள்ள ஒன்றைத் தேர்ந்தெடுக்க பரிந்துரைக்கிறோம்) வழங்க வேண்டும்.

நியான் உங்கள் உள்ளூர் சூழலுடன் ஒருங்கிணைக்க CLI கருவியை வழங்குகிறது, ஆனால் இந்த கட்டுரை சில செயல்பாடுகளுக்கு அதன் இணைய இடைமுகம் மூலம் நியானைப் பயன்படுத்தும்.

உங்கள் திட்டத்தை உருவாக்கியதும், Neon Dashboard இடைமுகத்திலிருந்து பூல் செய்யப்பட்ட இணைப்பு சரத்தை நகலெடுத்து உங்கள் Next.js திட்டத்தில் உள்ள .env.production கோப்பில் ஒட்டவும்.

Next.js திட்டத்தைப் பற்றி பேசுகையில், இந்த கட்டுரை ShadcnUI இலிருந்து தரவு அட்டவணையைக் கொண்ட தற்போதைய வேலை செய்யும் Next.js திட்டத்தைப் பயன்படுத்தும்.

இந்தத் திட்டத்தைப் பெற, கட்டளையைப் பயன்படுத்தி உங்கள் உள்ளூர் கணினியில் இந்தக் களஞ்சியத்தை குளோன் செய்யவும்.

 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'

அடுத்து, நியான் டாஷ்போர்டில் உள்ள நியான் SQL எடிட்டருக்குச் செல்லவும். இங்கே, உங்கள் திட்டத்திற்குத் தேவையான குறிப்பிட்ட செயல்களைச் செய்ய 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 CLI ஐப் பயன்படுத்துவோம்.

உங்கள் Next.js பயன்பாட்டை Vercel இல் பயன்படுத்துகிறது

அதிக நேரத்தை வீணாக்காமல், உங்கள் டெர்மினலுக்குச் சென்று கீழே உள்ள கட்டளையை ஒட்டவும்:

 npm i -g vercel

குறிப்பு: Mac பயனர்களுக்கு, நீங்கள் சில நேரங்களில் அணுகல் மறுக்கப்பட்ட பிழையைப் பெறலாம்; எனவே, sudo முக்கிய வார்த்தையுடன் கட்டளையை முன்னொட்டு செய்யவும்.

கட்டளை CLI ஐ உலகளவில் நிறுவுகிறது, உங்கள் உள்ளூர் கணினி முழுவதும் CLI ஐ எளிதாக அணுக அனுமதிக்கிறது.

CLI ஐப் பயன்படுத்தி உங்கள் Vercel கணக்கில் உள்நுழைய வேண்டும். அதை அடைய, உங்கள் முனையத்தில் கீழே உள்ள கட்டளையை ஒட்டவும்:

 vercel login

பட்டியலில் இருந்து உங்கள் Vercel பதிவு வழங்குநரைத் தேர்ந்தெடுத்து, அங்கீகரித்து, உறுதிப்படுத்தல் பக்கத்தில் வெற்றிச் செய்தியைத் தேடுவதன் மூலம் பின்தொடரவும்.

அடுத்து, கீழே உள்ள கட்டளையைப் பயன்படுத்தி உங்கள் நிரலை Vercel க்கு வரிசைப்படுத்துவீர்கள்:

 vercel

இந்த செயல்முறை உங்கள் வரிசைப்படுத்தலை அமைக்க பல படிகளை உள்ளடக்கியது. சீரான தன்மையை உறுதிப்படுத்த, கீழே உள்ள படத்தில் உள்ள தேர்வுகளைப் பின்பற்றவும்.

குறிப்பு: உருவாக்கிய பிறகு, உங்கள் ஆப்ஸ் எதிர்பார்த்தபடி இயங்குகிறதா என்பதை உறுதிப்படுத்த, வரிசைப்படுத்தலைச் சரிபார்க்கலாம்

அடுத்து, நியான் தரவுத்தளத்திலிருந்து பயனர் தகவலைப் பெற, 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!" }); }

தொடர்வதற்கு முன், கட்டளையைப் பயன்படுத்தி நியான் சர்வர்லெஸ் டிரைவர் , 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

அடுத்த பகுதியில், உங்கள் செயல்பாட்டு API வழியிலிருந்து POST கோரிக்கையைப் பயன்படுத்தி சில தரவை நியானுக்கு அனுப்புவீர்கள்.

நியானுக்கு தரவை அனுப்புகிறது

தரவுகளுடன் வேலை செய்யாமல் இந்த கருத்துகளில் எதையும் புரிந்துகொள்வது கடினம். எனவே, ஒரு நியான் தரவுத்தளத்திற்கு சில போலித் தரவை அனுப்புவோம். இந்த பிரிவு Zod ஐப் பயன்படுத்தி தரவுத்தளத்தில் SQL ஊசி மற்றும் தாக்குதல் தடுப்பு ஆகியவற்றை உள்ளடக்கும். தரவுத்தள கிளைகளை நாங்கள் விவாதிப்போம், இது எங்களுக்கு அதிக நெகிழ்வுத்தன்மையை அளிக்கிறது மற்றும் உங்கள் உற்பத்திக் கிளையின் நம்பகத்தன்மையைப் பாதுகாக்கிறது.

கீழே உள்ள குறியீட்டை /api/route.ts இல் ஒட்டுவதன் மூலம் HTTP POST கோரிக்கையைச் செயலாக்குவதற்கு இந்த API ரூட் ஹேண்ட்லர் செயல்பாட்டை ஆராய்வோம் .

 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 } ); } }

இந்த எட்ஜ் செயல்பாடு இந்த விவரங்களுடன் படிவ மதிப்புகளை சிதைக்கிறது: 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 வினவலை நீங்கள் வெற்றிகரமாக செய்யலாம்.

உங்கள் தரவுத்தளத்தை நீங்கள் சரிபார்க்கும்போது கீழே உள்ள படத்தைப் போல் இருக்க வேண்டும்.

மென்மையான மற்றும் விரைவான-அதன் மூலம், உங்கள் நியான் தரவுத்தளத்தை விரிவுபடுத்தலாம். இப்போது கேள்வி என்னவென்றால், இது ஒரு தயாரிப்பு தரவுத்தளமாக இருந்தால் என்ன செய்வது? உற்பத்திச் சூழலில் சோதனைத் தரவைப் பயன்படுத்துவது விவேகமற்றது. உங்கள் தரவுத்தளத்திற்கான கிளைகளை (GitHub கிளைகள் எவ்வாறு செயல்படுகின்றன என்பதைப் போலவே) உருவாக்க அனுமதிக்கும் வகையில் நியான் உருவாகியுள்ளது. இப்போது, எந்த குறைபாடுகளும் இல்லாமல் அல்லது தயாரிப்பு தரவுத்தளத்தை மாசுபடுத்தும் பயம் இல்லாமல் உங்கள் பயன்பாட்டை விரைவாகச் சோதித்து உருவாக்கலாம்.

அடுத்த பகுதியில், இந்தக் கட்டுரை Neon உடன் தரவுத்தளக் கிளைகளை ஆராயும்.

நியானில் தரவுத்தளம் கிளைத்துள்ளது

நியான் கன்சோலில் உள்ள கிளைகள் பகுதிக்குச் சென்று கிளையை உருவாக்கு என்பதைத் தேர்ந்தெடுக்கவும். ஒரு கிளையை உருவாக்கும் போது பிரதான கிளையை பெற்றோராகக் கொண்டு பெயரிட வேண்டும். எங்கள் கவனத்தை ஈர்த்த ஒரு விஷயம் என்னவென்றால், கிளையில் நாம் விரும்பும் தரவை கால இடைவெளியில் வைக்க அனுமதித்தது, மேலும் நெகிழ்வுத்தன்மையை உறுதி செய்கிறது.

ஒரு கிளையை உருவாக்கிய பிறகு, ஒரு திட்டத்தை உருவாக்கும் போது நீங்கள் செய்ததைப் போலவே, நீங்கள் ஒரு இணைப்பு சரத்தைப் பெறுவீர்கள்; பாதுகாப்பான இடத்தில் வைத்திருப்பதை உறுதிசெய்யவும்.

இந்த கிளையானது உண்மையான தரவுகளை பிரதான கிளையாக கொண்ட ஒரு தனி தரவுத்தளமாகும்.

இந்தப் புதிய தரவுத்தள இணைப்புச் சரத்தைப் பயன்படுத்த, நீங்கள் உருவாக்கிய .env.production கோப்பைப் போலவே .env.local கோப்பை உருவாக்கி, DATABASE_URL நற்சான்றிதழை அதன் மதிப்பாக இணைப்புச் சரத்துடன் அமைக்கவும்.

டெவலப்மெண்ட் அல்லது தயாரிப்பின் போது என்ன சூழல் கோப்பைப் பயன்படுத்த வேண்டும் என்பதை Next.js தானாகவே கண்டறியும்.

புதிய தரவுகளுடன் தரவுத்தள கிளை அட்டவணையை நீங்கள் சோதிக்கும்போது, அதை உற்பத்திக் கிளையுடன் ஒப்பிடலாம்.

டேபிள் ஸ்கீமாவை மாற்றுவது அல்லது தரவை நீக்குவது போன்ற கிளையில் நீங்கள் விரும்பும் பல மாற்றங்களைச் செய்யலாம்.

முடிவுரை

மேம்பாடு சிக்கலானதாக இருக்கலாம், ஆனால் நியான் போஸ்ட்கிரெஸ் வழங்கும் கருவிகளைக் கொண்டு, அளவிடக்கூடிய மற்றும் நம்பகமான பயன்பாடுகளை உருவாக்குவது வேகமானது. நியானைப் பயன்படுத்தி உள்ளூர் மேம்பாட்டுச் சூழலை அமைப்பது மற்றும் அதை வெர்சலுக்குப் பயன்படுத்துதல் பற்றிய விரிவான வழிகாட்டியை இந்தக் கட்டுரை வழங்கியது. உள்ளூர் மேம்பாட்டு அமைப்புகள், வரிசைப்படுத்தல் செயல்முறைகள், கிளைகள் மற்றும் பல்வேறு சூழல்களை நிர்வகித்தல் போன்ற அத்தியாவசிய அம்சங்களை நாங்கள் உள்ளடக்கியுள்ளோம். இந்த அமைப்பில் பயன்பாட்டு மேம்பாட்டைத் தொடரவும்; அது எப்படி நடக்கிறது என்று கேட்க விரும்புகிறோம்.

நீங்கள் GitHub இல் முழு திட்டத்தையும் பார்க்கலாம்.