M

MLOG

தமிழ்

உள்வரும் கோரிக்கைகளை இடைமறித்து மாற்றுவதற்கான சக்திவாய்ந்த அம்சமான Next.js மிடில்வேரை ஆராயுங்கள். நடைமுறை உதாரணங்களுடன் அங்கீகாரம், அதிகாரமளித்தல், வழிமாற்றம் மற்றும் A/B சோதனையை எவ்வாறு செயல்படுத்துவது என்பதை அறிக.

Next.js மிடில்வேர்: டைனமிக் அப்ளிகேஷன்களுக்கான கோரிக்கை இடைமறிப்பில் தேர்ச்சி பெறுதல்

Next.js மிடில்வேர், உங்கள் ரூட்களை அடையும் முன் உள்வரும் கோரிக்கைகளை இடைமறித்து மாற்றுவதற்கு ஒரு நெகிழ்வான மற்றும் சக்திவாய்ந்த வழியை வழங்குகிறது. இந்த திறன், செயல்திறனை மேம்படுத்தும் அதே வேளையில், அங்கீகாரம் மற்றும் அதிகாரமளித்தல் முதல் வழிமாற்றம் மற்றும் A/B சோதனை வரை பலதரப்பட்ட அம்சங்களைச் செயல்படுத்த உதவுகிறது. இந்த விரிவான வழிகாட்டி, Next.js மிடில்வேரின் முக்கியக் கருத்துகளை உங்களுக்கு விளக்கி, அதை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதைக் காண்பிக்கும்.

Next.js மிடில்வேர் என்றால் என்ன?

Next.js-இல் மிடில்வேர் என்பது ஒரு கோரிக்கை நிறைவடையும் முன் இயங்கும் ஒரு ஃபங்ஷன் ஆகும். இது உங்களை அனுமதிக்கிறது:

மிடில்வேர் ஃபங்ஷன்கள் உங்கள் ப்ராஜெக்ட்டின் ரூட்டில் உள்ள middleware.ts (அல்லது middleware.js) கோப்பில் வரையறுக்கப்படுகின்றன. அவை உங்கள் அப்ளிகேஷனில் உள்ள ஒவ்வொரு ரூட்டிற்கும் அல்லது கான்ஃபிகர் செய்யக்கூடிய மேட்சர்களின் அடிப்படையில் குறிப்பிட்ட ரூட்களுக்கும் இயக்கப்படுகின்றன.

முக்கியக் கருத்துக்கள் மற்றும் நன்மைகள்

Request ஆப்ஜெக்ட்

request ஆப்ஜெக்ட் உள்வரும் கோரிக்கையைப் பற்றிய தகவல்களுக்கான அணுகலை வழங்குகிறது, அவற்றுள்:

Response ஆப்ஜெக்ட்

மிடில்வேர் ஃபங்ஷன்கள் கோரிக்கையின் விளைவைக் கட்டுப்படுத்த ஒரு Response ஆப்ஜெக்டைத் திருப்பித் தருகின்றன. நீங்கள் பின்வரும் ரெஸ்பான்ஸ்களைப் பயன்படுத்தலாம்:

Matchers

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

எட்ஜ் ரன்டைம்

Next.js மிடில்வேர் எட்ஜ் ரன்டைமில் இயங்குகிறது, இது ஒரு இலகுரக ஜாவாஸ்கிரிப்ட் ரன்டைம் சூழலாகும், இது உங்கள் பயனர்களுக்கு அருகில் வரிசைப்படுத்தப்படலாம். இந்த அருகாமை தாமதத்தைக் குறைத்து, உங்கள் அப்ளிகேஷனின் ஒட்டுமொத்த செயல்திறனை மேம்படுத்துகிறது, குறிப்பாக உலகளவில் பரவியுள்ள பயனர்களுக்கு. எட்ஜ் ரன்டைம் வெர்சலின் எட்ஜ் நெட்வொர்க் மற்றும் பிற இணக்கமான தளங்களில் கிடைக்கிறது. எட்ஜ் ரன்டைமில் சில வரம்புகள் உள்ளன, குறிப்பாக Node.js API-களின் பயன்பாடு.

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

1. அங்கீகாரம் (Authentication)

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


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth_token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/dashboard/:path*'],
}

இந்த மிடில்வேர் auth_token குக்கீ உள்ளதா எனச் சரிபார்க்கிறது. குக்கீ காணப்படவில்லை எனில், பயனர் /login பக்கத்திற்குத் திருப்பி விடப்படுவார். config.matcher இந்த மிடில்வேர் /dashboard-இன் கீழ் உள்ள ரூட்களுக்கு மட்டுமே இயங்க வேண்டும் என்பதைக் குறிப்பிடுகிறது.

உலகளாவிய கண்ணோட்டம்: பல்வேறு பிராந்தியங்களில் உள்ள பயனர்களுக்கு ஏற்ப, பல அங்கீகார முறைகளை (எ.கா., OAuth, JWT) ஆதரிக்கும் வகையில் அங்கீகார லாஜிக்கை மாற்றியமைத்து, வெவ்வேறு அடையாள வழங்குநர்களுடன் (எ.கா., Google, Facebook, Azure AD) ஒருங்கிணைக்கவும்.

2. அதிகாரமளித்தல் (Authorization)

பயனர் ரோல்கள் அல்லது அனுமதிகளின் அடிப்படையில் வளங்களுக்கான அணுகலைக் கட்டுப்படுத்த அதிகாரமளித்தல் மிடில்வேரைப் பயன்படுத்தலாம். உதாரணமாக, குறிப்பிட்ட பயனர்கள் மட்டுமே அணுகக்கூடிய ஒரு அட்மின் டாஷ்போர்டு உங்களிடம் இருக்கலாம்.


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
 const token = request.cookies.get('auth_token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // உதாரணம்: ஒரு API-இலிருந்து பயனர் ரோல்களைப் பெறுதல் (உங்கள் உண்மையான லாஜிக்கைக் கொண்டு மாற்றவும்)
 const userResponse = await fetch('https://api.example.com/userinfo', {
 headers: {
 Authorization: `Bearer ${token}`,
 },
 });
 const userData = await userResponse.json();

 if (userData.role !== 'admin') {
 return NextResponse.redirect(new URL('/unauthorized', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/admin/:path*'],
}

இந்த மிடில்வேர் பயனரின் ரோலைப் பெற்று, அவர்களிடம் admin ரோல் உள்ளதா எனச் சரிபார்க்கிறது. இல்லையெனில், அவர்கள் /unauthorized பக்கத்திற்கு திருப்பி விடப்படுவார்கள். இந்த உதாரணம் ஒரு ப்ளேஸ்ஹோல்டர் API எண்ட்பாயிண்ட்டைப் பயன்படுத்துகிறது. `https://api.example.com/userinfo` என்பதை உங்கள் உண்மையான அங்கீகார சர்வர் எண்ட்பாயிண்ட்டுடன் மாற்றவும்.

உலகளாவிய கண்ணோட்டம்: பயனர் தரவைக் கையாளும்போது தரவு தனியுரிமை விதிமுறைகளை (எ.கா., GDPR, CCPA) மனதில் கொள்ளுங்கள். முக்கியத் தகவல்களைப் பாதுகாக்க மற்றும் உள்ளூர் சட்டங்களுக்கு இணங்க உரிய பாதுகாப்பு நடவடிக்கைகளைச் செயல்படுத்தவும்.

3. வழிமாற்றம் (Redirection)

பயனர்களின் இருப்பிடம், மொழி அல்லது பிற நிபந்தனைகளின் அடிப்படையில் அவர்களைத் திருப்பிவிட வழிமாற்ற மிடில்வேரைப் பயன்படுத்தலாம். உதாரணமாக, பயனர்களின் IP முகவரியின் அடிப்படையில் உங்கள் வலைத்தளத்தின் உள்ளூர்மயமாக்கப்பட்ட பதிப்பிற்கு அவர்களைத் திருப்பிவிடலாம்.


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
 const country = request.geo?.country || 'US'; // புவி-இருப்பிடம் தோல்வியுற்றால் US-ஐ இயல்புநிலையாகக் கொள்க

 if (country === 'DE') {
 return NextResponse.redirect(new URL('/de', request.url))
 }

 if (country === 'FR') {
 return NextResponse.redirect(new URL('/fr', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/'],
}

இந்த மிடில்வேர் பயனரின் IP முகவரியின் அடிப்படையில் அவர்களின் நாட்டைச் சரிபார்த்து, வலைத்தளத்தின் பொருத்தமான உள்ளூர்மயமாக்கப்பட்ட பதிப்பிற்கு அவர்களைத் திருப்பிவிடுகிறது (ஜெர்மனிக்கு /de, பிரான்சுக்கு /fr). புவி-இருப்பிடம் தோல்வியுற்றால், அது US பதிப்பிற்கு இயல்புநிலையாக மாறும். இது geo ப்ராப்பர்ட்டி கிடைப்பதைச் சார்ந்துள்ளது என்பதை நினைவில் கொள்க (எ.கா., வெர்சலில் வரிசைப்படுத்தும்போது).

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

4. A/B சோதனை (A/B Testing)

பயனர்களை ஒரு பக்கத்தின் வெவ்வேறு வகைகளுக்கு தோராயமாக ஒதுக்கி, அவர்களின் நடத்தையைக் கண்காணிப்பதன் மூலம் A/B சோதனையைச் செயல்படுத்த மிடில்வேரைப் பயன்படுத்தலாம். இங்கே ஒரு எளிமைப்படுத்தப்பட்ட உதாரணம்:


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

function getRandomVariant() {
 return Math.random() < 0.5 ? 'A' : 'B';
}

export function middleware(request: NextRequest) {
 let variant = request.cookies.get('variant')?.value;

 if (!variant) {
 variant = getRandomVariant();
 const response = NextResponse.next();
 response.cookies.set('variant', variant);
 return response;
 }

 if (variant === 'B') {
 return NextResponse.rewrite(new URL('/variant-b', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/'],
}

இந்த மிடில்வேர் பயனர்களை 'A' அல்லது 'B' வகைக்கு ஒதுக்குகிறது. ஒரு பயனருக்கு ஏற்கனவே variant குக்கீ இல்லை என்றால், ஒன்று தோராயமாக ஒதுக்கப்பட்டு அமைக்கப்படுகிறது. 'B' வகைக்கு ஒதுக்கப்பட்ட பயனர்கள் /variant-b பக்கத்திற்கு மீண்டும் எழுதப்படுகிறார்கள். பின்னர் ஒவ்வொரு வகையின் செயல்திறனையும் கண்காணித்து எது மிகவும் பயனுள்ளது என்பதைத் தீர்மானிக்கலாம்.

உலகளாவிய கண்ணோட்டம்: A/B சோதனைகளை வடிவமைக்கும்போது கலாச்சார வேறுபாடுகளைக் கருத்தில் கொள்ளுங்கள். ஒரு பிராந்தியத்தில் நன்றாக வேலை செய்வது மற்றொரு பிராந்தியத்தில் உள்ள பயனர்களுடன் ஒத்துப் போகாமல் இருக்கலாம். உங்கள் A/B சோதனைத் தளம் வெவ்வேறு பிராந்தியங்களில் உள்ள தனியுரிமை விதிமுறைகளுக்கு இணங்குவதை உறுதிப்படுத்தவும்.

5. ஃபீச்சர் ஃபிளாக்ஸ் (Feature Flags)

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


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
 // உதாரணம்: ஒரு API-இலிருந்து ஃபீச்சர் ஃபிளாக்குகளைப் பெறுதல்
 const featureFlagsResponse = await fetch('https://api.example.com/featureflags', {
 headers: {
 'X-User-Id': 'user123',
 },
 });
 const featureFlags = await featureFlagsResponse.json();

 if (featureFlags.new_feature_enabled) {
 // புதிய அம்சத்தை இயக்குதல்
 return NextResponse.next();
 } else {
 // புதிய அம்சத்தை முடக்குதல் (எ.கா., ஒரு மாற்றுப் பக்கத்திற்குத் திருப்பிவிடுதல்)
 return NextResponse.redirect(new URL('/alternative-page', request.url));
 }
}

export const config = {
 matcher: ['/new-feature'],
}

இந்த மிடில்வேர் ஒரு API-இலிருந்து ஃபீச்சர் ஃபிளாக்குகளைப் பெற்று, new_feature_enabled ஃபிளாக் அமைக்கப்பட்டுள்ளதா எனச் சரிபார்க்கிறது. அது அமைக்கப்பட்டிருந்தால், பயனர் /new-feature பக்கத்தை அணுக முடியும். இல்லையெனில், அவர்கள் ஒரு /alternative-page பக்கத்திற்குத் திருப்பி விடப்படுவார்கள்.

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

மேம்பட்ட நுட்பங்கள்

மிடில்வேர்களைச் சங்கிலியாக்குதல் (Chaining Middleware)

ஒரு கோரிக்கையில் தொடர்ச்சியான செயல்பாடுகளைச் செய்ய நீங்கள் பல மிடில்வேர் ஃபங்ஷன்களை ஒன்றாகச் சங்கிலியாக்கலாம். இது சிக்கலான லாஜிக்கை சிறிய, மேலும் நிர்வகிக்கக்கூடிய மாட்யூல்களாகப் பிரிப்பதற்குப் பயனுள்ளதாக இருக்கும்.


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
 const response = NextResponse.next();

 // முதல் மிடில்வேர் ஃபங்ஷன்
 const token = request.cookies.get('auth_token');
 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // இரண்டாவது மிடில்வேர் ஃபங்ஷன்
 response.headers.set('x-middleware-custom', 'value');

 return response;
}

export const config = {
 matcher: ['/dashboard/:path*'],
}

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

சுற்றுச்சூழல் மாறிகளைப் பயன்படுத்துதல் (Using Environment Variables)

API கீகள் மற்றும் தரவுத்தள நற்சான்றிதழ்கள் போன்ற முக்கியத் தகவல்களை உங்கள் மிடில்வேர் ஃபங்ஷன்களில் ஹார்ட்கோட் செய்வதற்குப் பதிலாக சுற்றுச்சூழல் மாறிகளில் சேமிக்கவும். இது பாதுகாப்பை மேம்படுத்துகிறது மற்றும் உங்கள் அப்ளிகேஷனின் கான்ஃபிகரேஷனை நிர்வகிப்பதை எளிதாக்குகிறது.


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const API_KEY = process.env.API_KEY;

export async function middleware(request: NextRequest) {
 const response = await fetch('https://api.example.com/data', {
 headers: {
 'X-API-Key': API_KEY,
 },
 });

 // ...
}

export const config = {
 matcher: ['/data'],
}

இந்த எடுத்துக்காட்டில், API_KEY ஒரு சுற்றுச்சூழல் மாறியிலிருந்து பெறப்படுகிறது.

பிழை கையாளுதல் (Error Handling)

உங்கள் அப்ளிகேஷனை எதிர்பாராத பிழைகள் செயலிழக்கச் செய்வதைத் தடுக்க உங்கள் மிடில்வேர் ஃபங்ஷன்களில் வலுவான பிழை கையாளுதலைச் செயல்படுத்தவும். விதிவிலக்குகளைப் பிடிக்கவும் மற்றும் பிழைகளை முறையாகப் பதிவு செய்யவும் try...catch பிளாக்குகளைப் பயன்படுத்தவும்.


// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
 try {
 const response = await fetch('https://api.example.com/data');
 // ...
 } catch (error) {
 console.error('Error fetching data:', error);
 return NextResponse.error(); // அல்லது ஒரு பிழைப் பக்கத்திற்குத் திருப்பிவிடவும்
 }
}

export const config = {
 matcher: ['/data'],
}

சிறந்த நடைமுறைகள்

பொதுவான சிக்கல்களைச் சரிசெய்தல்

முடிவுரை

Next.js மிடில்வேர் என்பது டைனமிக் மற்றும் தனிப்பயனாக்கப்பட்ட வலை அப்ளிகேஷன்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். கோரிக்கை இடைமறிப்பில் தேர்ச்சி பெறுவதன் மூலம், அங்கீகாரம் மற்றும் அதிகாரமளித்தல் முதல் வழிமாற்றம் மற்றும் A/B சோதனை வரை பலதரப்பட்ட அம்சங்களைச் செயல்படுத்தலாம். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் உலகளாவிய பயனர் தளத்தின் தேவைகளைப் பூர்த்தி செய்யும் உயர் செயல்திறன், பாதுகாப்பான மற்றும் அளவிடக்கூடிய அப்ளிகேஷன்களை உருவாக்க Next.js மிடில்வேரைப் பயன்படுத்தலாம். உங்கள் Next.js ப்ராஜெக்ட்களில் புதிய சாத்தியங்களைத் திறக்கவும் மற்றும் விதிவிலக்கான பயனர் அனுபவங்களை வழங்கவும் மிடில்வேரின் சக்தியைத் தழுவுங்கள்.