M

MLOG

ગુજરાતી

Next.js રૂટ હેન્ડલર્સનો ઉપયોગ કરીને શક્તિશાળી API એન્ડપોઇન્ટ્સ બનાવતા શીખો. આ માર્ગદર્શિકા મૂળભૂત સેટઅપથી લઈને અદ્યતન તકનીકો, વ્યવહારુ ઉદાહરણો અને શ્રેષ્ઠ પદ્ધતિઓ સુધી બધું જ આવરી લે છે.

Next.js રૂટ હેન્ડલર્સ: API એન્ડપોઇન્ટ બનાવવા માટેની એક વ્યાપક માર્ગદર્શિકા

Next.js એ તેની શક્તિશાળી સુવિધાઓ જેવી કે સર્વર-સાઇડ રેન્ડરિંગ, સ્ટેટિક સાઇટ જનરેશન, અને હવે, રૂટ હેન્ડલર્સ દ્વારા વેબ એપ્લિકેશન્સ બનાવવાની રીતમાં ક્રાંતિ લાવી છે. રૂટ હેન્ડલર્સ તમારી Next.js એપ્લિકેશનમાં સીધા જ API એન્ડપોઇન્ટ્સ બનાવવા માટે એક લવચીક અને કાર્યક્ષમ રીત પ્રદાન કરે છે. આ માર્ગદર્શિકા રૂટ હેન્ડલર્સની વિભાવના, તેમના ફાયદાઓ અને મજબૂત APIs બનાવવા માટે તેમનો અસરકારક રીતે ઉપયોગ કેવી રીતે કરવો તે સમજાવે છે.

Next.js રૂટ હેન્ડલર્સ શું છે?

રૂટ હેન્ડલર્સ એ Next.js પ્રોજેક્ટની app ડિરેક્ટરીમાં વ્યાખ્યાયિત ફંક્શન્સ છે જે આવનારા HTTP વિનંતીઓને હેન્ડલ કરે છે. જૂના pages/api અભિગમ (જે API રૂટ્સનો ઉપયોગ કરે છે) થી વિપરીત, રૂટ હેન્ડલર્સ તમારા રિએક્ટ કમ્પોનન્ટ્સની સાથે API એન્ડપોઇન્ટ્સને વ્યાખ્યાયિત કરવાની વધુ સુવ્યવસ્થિત અને લવચીક રીત પ્રદાન કરે છે. તે અનિવાર્યપણે સર્વરલેસ ફંક્શન્સ છે જે એજ પર અથવા તમારા પસંદ કરેલા સર્વર પર્યાવરણમાં એક્ઝિક્યુટ થાય છે.

રૂટ હેન્ડલર્સને તમારી Next.js એપ્લિકેશનના બેકએન્ડ લોજિક તરીકે વિચારો, જે વિનંતીઓ પર પ્રક્રિયા કરવા, ડેટાબેઝ સાથે ક્રિયાપ્રતિક્રિયા કરવા અને પ્રતિસાદો પરત કરવા માટે જવાબદાર છે.

રૂટ હેન્ડલર્સનો ઉપયોગ કરવાના ફાયદા

તમારા Next.js પ્રોજેક્ટનું સેટઅપ

રૂટ હેન્ડલર્સમાં ડાઇવ કરતા પહેલા, ખાતરી કરો કે તમારી પાસે app ડિરેક્ટરી સાથે Next.js પ્રોજેક્ટ સેટઅપ થયેલ છે. જો તમે નવો પ્રોજેક્ટ શરૂ કરી રહ્યાં છો, તો નીચેના કમાન્ડનો ઉપયોગ કરો:

npx create-next-app@latest my-nextjs-app

નવી રૂટીંગ સિસ્ટમને સક્ષમ કરવા માટે સેટઅપ પ્રક્રિયા દરમિયાન app ડિરેક્ટરી પસંદ કરો.

તમારો પ્રથમ રૂટ હેન્ડલર બનાવવો

ચાલો એક સરળ API એન્ડપોઇન્ટ બનાવીએ જે JSON પ્રતિસાદ આપે છે. app ડિરેક્ટરીમાં એક નવી ડિરેક્ટરી બનાવો, ઉદાહરણ તરીકે, /app/api/hello. આ ડિરેક્ટરીની અંદર, route.ts (અથવા route.js જો તમે TypeScript નો ઉપયોગ ન કરી રહ્યાં હોવ) નામની ફાઇલ બનાવો.

અહીં તમારા પ્રથમ રૂટ હેન્ડલર માટેનો કોડ છે:

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Next.js રૂટ હેન્ડલર્સ તરફથી હેલો!' });
}

સમજૂતી:

હવે, તમે તમારા બ્રાઉઝરમાં /api/hello પર નેવિગેટ કરીને અથવા curl કે Postman જેવા ટૂલનો ઉપયોગ કરીને આ એન્ડપોઇન્ટને એક્સેસ કરી શકો છો.

વિવિધ HTTP મેથડ્સને હેન્ડલ કરવી

રૂટ હેન્ડલર્સ GET, POST, PUT, DELETE, PATCH, અને OPTIONS જેવી વિવિધ HTTP મેથડ્સને સપોર્ટ કરે છે. તમે સમાન route.ts ફાઇલમાં દરેક મેથડ માટે અલગ ફંક્શન્સ વ્યાખ્યાયિત કરી શકો છો.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // ડેટાબેઝમાંથી બધા વપરાશકર્તાઓને પુનઃપ્રાપ્ત કરવાની લોજિક
 const users = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }]; // ઉદાહરણ ડેટા
 return NextResponse.json(users);
}

export async function POST(request: Request) {
 const data = await request.json(); // વિનંતીના બોડીને JSON તરીકે પાર્સ કરો
 // 'data' નો ઉપયોગ કરીને ડેટાબેઝમાં નવો વપરાશકર્તા બનાવવાની લોજિક
 const newUser = { id: 3, name: data.name, email: data.email }; // ઉદાહરણ
 return NextResponse.json(newUser, { status: 201 }); // નવા વપરાશકર્તાને 201 Created સ્ટેટસ કોડ સાથે પરત કરો
}

સમજૂતી:

વિનંતી ડેટાને એક્સેસ કરવો

request ઓબ્જેક્ટ આવનારી વિનંતી વિશેની વિવિધ માહિતીની એક્સેસ પૂરી પાડે છે, જેમાં હેડર્સ, ક્વેરી પેરામીટર્સ અને વિનંતી બોડીનો સમાવેશ થાય છે.

હેડર્સ

તમે request.headers પ્રોપર્ટીનો ઉપયોગ કરીને વિનંતી હેડર્સને એક્સેસ કરી શકો છો:

export async function GET(request: Request) {
 const userAgent = request.headers.get('user-agent');
 console.log('વપરાશકર્તા એજન્ટ:', userAgent);
 return NextResponse.json({ userAgent });
}

ક્વેરી પેરામીટર્સ

ક્વેરી પેરામીટર્સને એક્સેસ કરવા માટે, તમે URL કન્સ્ટ્રક્ટરનો ઉપયોગ કરી શકો છો:

export async function GET(request: Request) {
 const url = new URL(request.url);
 const searchParams = new URLSearchParams(url.search);
 const id = searchParams.get('id');
 console.log('ID:', id);
 return NextResponse.json({ id });
}

રિક્વેસ્ટ બોડી

POST, PUT, અને PATCH વિનંતીઓ માટે, તમે કન્ટેન્ટ પ્રકારને આધારે request.json() અથવા request.text() મેથડ્સનો ઉપયોગ કરીને રિક્વેસ્ટ બોડીને એક્સેસ કરી શકો છો.

export async function POST(request: Request) {
 const data = await request.json();
 console.log('ડેટા:', data);
 return NextResponse.json({ receivedData: data });
}

પ્રતિસાદો પરત કરવા

NextResponse ઓબ્જેક્ટનો ઉપયોગ API પ્રતિસાદો બનાવવા માટે થાય છે. તે હેડર્સ, સ્ટેટસ કોડ્સ અને રિસ્પોન્સ બોડીઝ સેટ કરવા માટે ઘણી મેથડ્સ પૂરી પાડે છે.

JSON પ્રતિસાદો

JSON પ્રતિસાદો પરત કરવા માટે NextResponse.json() મેથડનો ઉપયોગ કરો:

return NextResponse.json({ message: 'સફળતા!', data: { name: 'John Doe' } }, { status: 200 });

ટેક્સ્ટ પ્રતિસાદો

પ્લેઇન ટેક્સ્ટ પ્રતિસાદો પરત કરવા માટે new Response() કન્સ્ટ્રક્ટરનો ઉપયોગ કરો:

return new Response('હેલો, વર્લ્ડ!', { status: 200, headers: { 'Content-Type': 'text/plain' } });

રીડાયરેક્ટ્સ

વપરાશકર્તાઓને અલગ URL પર રીડાયરેક્ટ કરવા માટે NextResponse.redirect() નો ઉપયોગ કરો:

import { redirect } from 'next/navigation';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.redirect(new URL('/new-location', request.url));
}

હેડર્સ સેટ કરવા

તમે NextResponse.json() અથવા new Response() માં headers વિકલ્પનો ઉપયોગ કરીને કસ્ટમ હેડર્સ સેટ કરી શકો છો:

return NextResponse.json({ message: 'સફળતા!' }, { status: 200, headers: { 'Cache-Control': 'no-cache' } });

મિડલવેર ઇન્ટિગ્રેશન

મિડલવેર તમને તમારા રૂટ હેન્ડલર દ્વારા વિનંતી હેન્ડલ થાય તે પહેલાં કોડ ચલાવવાની મંજૂરી આપે છે. આ ઓથેન્ટિકેશન, ઓથોરાઇઝેશન, લોગિંગ અને અન્ય ક્રોસ-કટિંગ ચિંતાઓ માટે ઉપયોગી છે.

મિડલવેર બનાવવા માટે, app ડિરેક્ટરી અથવા કોઈપણ સબડિરેક્ટરીમાં middleware.ts (અથવા middleware.js) નામની ફાઇલ બનાવો. મિડલવેર તે ડિરેક્ટરી અને તેની સબડિરેક્ટરીઝમાંના તમામ રૂટ્સ પર લાગુ થશે.

// app/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: ['/protected/:path*'], // આ મિડલવેરને /protected/ થી શરૂ થતા પાથ પર લાગુ કરો
};

સમજૂતી:

એરર હેન્ડલિંગ

મજબૂત APIs બનાવવા માટે યોગ્ય એરર હેન્ડલિંગ નિર્ણાયક છે. તમે અપવાદોને હેન્ડલ કરવા અને યોગ્ય એરર પ્રતિસાદો પરત કરવા માટે try...catch બ્લોક્સનો ઉપયોગ કરી શકો છો.

export async function GET(request: Request) {
 try {
 // એક એરરનું અનુકરણ કરો
 throw new Error('કંઈક ખોટું થયું!');
 } catch (error: any) {
 console.error('એરર:', error);
 return NextResponse.json({ error: error.message }, { status: 500 });
 }
}

સમજૂતી:

સ્ટ્રીમિંગ પ્રતિસાદો

રૂટ હેન્ડલર્સ સ્ટ્રીમિંગ પ્રતિસાદોને સપોર્ટ કરે છે, જે તમને ક્લાયન્ટને વૃદ્ધિશીલ રીતે ડેટા મોકલવાની મંજૂરી આપે છે. આ ખાસ કરીને મોટા ડેટાસેટ્સ અથવા લાંબા સમય સુધી ચાલતી પ્રક્રિયાઓ માટે ઉપયોગી છે.

import { Readable } from 'stream';
import { NextResponse } from 'next/server';

async function* generateData() {
 for (let i = 0; i < 10; i++) {
 await new Promise(resolve => setTimeout(resolve, 500)); // વિલંબનું અનુકરણ કરો
 yield `ડેટા ચંક ${i}\n`;
 }
}

export async function GET(request: Request) {
 const readableStream = Readable.from(generateData());

 return new Response(readableStream, {
 headers: { 'Content-Type': 'text/plain; charset=utf-8' },
 });
}

સમજૂતી:

ઓથેન્ટિકેશન અને ઓથોરાઇઝેશન

તમારા API એન્ડપોઇન્ટ્સને સુરક્ષિત કરવું નિર્ણાયક છે. તમે મિડલવેરનો ઉપયોગ કરીને અથવા સીધા તમારા રૂટ હેન્ડલર્સમાં ઓથેન્ટિકેશન અને ઓથોરાઇઝેશન લાગુ કરી શકો છો.

ઓથેન્ટિકેશન

ઓથેન્ટિકેશન વિનંતી કરનાર વપરાશકર્તાની ઓળખની ચકાસણી કરે છે. સામાન્ય ઓથેન્ટિકેશન પદ્ધતિઓમાં શામેલ છે:

અહીં મિડલવેરનો ઉપયોગ કરીને JWT ઓથેન્ટિકેશનનું ઉદાહરણ છે:

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import jwt from 'jsonwebtoken';

const secret = process.env.JWT_SECRET || 'your-secret-key'; // એક મજબૂત, રેન્ડમલી જનરેટ કરેલા સિક્રેટ સાથે બદલો

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token')?.value;

 if (!token) {
 return NextResponse.json({ message: 'ઓથેન્ટિકેશન આવશ્યક છે' }, { status: 401 });
 }

 try {
 jwt.verify(token, secret);
 return NextResponse.next();
 } catch (error) {
 return NextResponse.json({ message: 'અમાન્ય ટોકન' }, { status: 401 });
 }
}

export const config = {
 matcher: ['/api/protected/:path*'],
};

ઓથોરાઇઝેશન

ઓથોરાઇઝેશન નક્કી કરે છે કે વપરાશકર્તાને કયા સંસાધનોને એક્સેસ કરવાની મંજૂરી છે. આ સામાન્ય રીતે ભૂમિકાઓ અથવા પરવાનગીઓ પર આધારિત હોય છે.

તમે તમારા રૂટ હેન્ડલર્સમાં વપરાશકર્તાની ભૂમિકાઓ અથવા પરવાનગીઓ ચકાસીને ઓથોરાઇઝેશન લાગુ કરી શકો છો અને જો તેમની પાસે એક્સેસ ન હોય તો એરર પરત કરી શકો છો.

// app/api/admin/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // માની લો કે તમારી પાસે ટોકન અથવા સેશનમાંથી વપરાશકર્તાની ભૂમિકા મેળવવા માટે એક ફંક્શન છે
 const userRole = await getUserRole(request);

 if (userRole !== 'admin') {
 return NextResponse.json({ message: 'અનધિકૃત' }, { status: 403 });
 }

 // એડમિન ડેટા પુનઃપ્રાપ્ત કરવાની લોજિક
 const adminData = { message: 'એડમિન ડેટા' };
 return NextResponse.json(adminData);
}

async function getUserRole(request: Request): Promise {
 // વિનંતીમાંથી વપરાશકર્તાની ભૂમિકા કાઢવા માટે તમારી વાસ્તવિક લોજિક સાથે બદલો
 // આમાં JWT ટોકનની ચકાસણી કરવી અથવા સેશન તપાસવું શામેલ હોઈ શકે છે
 return 'admin'; // ઉદાહરણ: પ્રદર્શન માટે હાર્ડકોડેડ ભૂમિકા
}

રૂટ હેન્ડલર્સને જમાવવા

રૂટ હેન્ડલર્સ તમારા પસંદ કરેલા હોસ્ટિંગ પ્રદાતા પર સર્વરલેસ ફંક્શન્સ તરીકે જમાવવામાં આવે છે. Next.js Vercel, Netlify, AWS, અને વધુ સહિત વિવિધ જમાવટ પ્લેટફોર્મને સપોર્ટ કરે છે.

Vercel માટે, જમાવટ એ તમારા Git રિપોઝીટરીને Vercel સાથે કનેક્ટ કરવા અને તમારા કોડને પુશ કરવા જેટલું સરળ છે. Vercel આપમેળે તમારા Next.js પ્રોજેક્ટને શોધી કાઢે છે અને તમારા રૂટ હેન્ડલર્સને સર્વરલેસ ફંક્શન્સ તરીકે જમાવે છે.

અદ્યતન તકનીકો

એજ ફંક્શન્સ

રૂટ હેન્ડલર્સને એજ ફંક્શન્સ તરીકે જમાવી શકાય છે, જે CDN ની એજ પર, તમારા વપરાશકર્તાઓની નજીક એક્ઝિક્યુટ થાય છે. આ લેટન્સીને નોંધપાત્ર રીતે ઘટાડી શકે છે અને પ્રદર્શનમાં સુધારો કરી શકે છે.

રૂટ હેન્ડલરને એજ ફંક્શન તરીકે જમાવવા માટે, તમારી route.ts ફાઇલમાં edge રનટાઇમ ઉમેરો:

export const runtime = 'edge';

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'એજ તરફથી હેલો!' });
}

સર્વર એક્શન્સ

સર્વર એક્શન્સ તમને તમારા રિએક્ટ કમ્પોનન્ટ્સમાંથી સીધા સર્વર-સાઇડ કોડને એક્ઝિક્યુટ કરવાની મંજૂરી આપે છે. રૂટ હેન્ડલર્સ અને સર્વર એક્શન્સ એકસાથે સીમલેસ રીતે કામ કરે છે, જે તમને સરળતાથી જટિલ એપ્લિકેશન્સ બનાવવાની મંજૂરી આપે છે.

અહીં રૂટ હેન્ડલરને કૉલ કરવા માટે સર્વર એક્શનનો ઉપયોગ કરવાનું ઉદાહરણ છે:

// app/components/MyComponent.tsx
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

async function handleSubmit(data: FormData) {
 'use server';

 const name = data.get('name');
 const email = data.get('email');

 const response = await fetch('/api/users', {
 method: 'POST',
 body: JSON.stringify({ name, email }),
 });

 if (response.ok) {
 router.refresh(); // ફેરફારોને પ્રતિબિંબિત કરવા માટે પેજને રિફ્રેશ કરો
 }
}

export default function MyComponent() {
 const router = useRouter();

 return (
 

 
 


 
 


 
 

 );
}

કેશિંગ

કેશિંગ તમારા API એન્ડપોઇન્ટ્સના પ્રદર્શનને નોંધપાત્ર રીતે સુધારી શકે છે. તમે Cache-Control હેડરનો ઉપયોગ કરીને બ્રાઉઝર્સ અને CDNs દ્વારા તમારા પ્રતિસાદો કેવી રીતે કેશ કરવામાં આવે છે તે નિયંત્રિત કરી શકો છો.

return NextResponse.json({ message: 'સફળતા!' }, { status: 200, headers: { 'Cache-Control': 'public, max-age=3600' } });

આ ઉદાહરણ Cache-Control હેડરને public, max-age=3600 પર સેટ કરે છે, જે બ્રાઉઝર્સ અને CDNs ને એક કલાક માટે પ્રતિસાદ કેશ કરવા માટે કહે છે.

શ્રેષ્ઠ પદ્ધતિઓ

વાસ્તવિક-દુનિયાના ઉદાહરણો

અહીં કેટલાક વાસ્તવિક-દુનિયાના ઉદાહરણો છે કે રૂટ હેન્ડલર્સનો કેવી રીતે ઉપયોગ કરી શકાય છે:

આંતરરાષ્ટ્રીય ઈ-કોમર્સ ઉદાહરણ: વપરાશકર્તાના દેશના આધારે ઉત્પાદનની કિંમત પુનઃપ્રાપ્ત કરવા માટે વપરાતો રૂટ હેન્ડલર. એન્ડપોઇન્ટ વપરાશકર્તાના સ્થાનને નિર્ધારિત કરવા માટે વિનંતીના ભૌગોલિક સ્થાન (IP સરનામાંથી મેળવેલ) નો ઉપયોગ કરી શકે છે અને યોગ્ય ચલણમાં કિંમતો પરત કરી શકે છે. આ સ્થાનિક ખરીદીના અનુભવમાં ફાળો આપે છે.

વૈશ્વિક ઓથેન્ટિકેશન ઉદાહરણ: વિશ્વભરના વપરાશકર્તાઓ માટે મલ્ટી-ફેક્ટર ઓથેન્ટિકેશન (MFA) લાગુ કરતો રૂટ હેન્ડલર. આમાં SMS કોડ મોકલવા અથવા ઓથેન્ટિકેટર એપ્સનો ઉપયોગ કરવો શામેલ હોઈ શકે છે, જ્યારે વિવિધ પ્રદેશોના ગોપનીયતા નિયમો અને ટેલિકમ્યુનિકેશન ઇન્ફ્રાસ્ટ્રક્ચર્સનું સન્માન કરવામાં આવે છે.

બહુભાષી કન્ટેન્ટ ડિલિવરી: વપરાશકર્તાની પસંદગીની ભાષામાં કન્ટેન્ટ પહોંચાડતો રૂટ હેન્ડલર. આ વિનંતીમાં `Accept-Language` હેડરમાંથી નક્કી કરી શકાય છે. આ ઉદાહરણ યોગ્ય UTF-8 એન્કોડિંગ અને જ્યાં યોગ્ય હોય ત્યાં જમણે-થી-ડાબે ભાષા સપોર્ટની જરૂરિયાતને પ્રકાશિત કરે છે.

નિષ્કર્ષ

Next.js રૂટ હેન્ડલર્સ તમારી Next.js એપ્લિકેશનમાં સીધા જ API એન્ડપોઇન્ટ્સ બનાવવા માટે એક શક્તિશાળી અને લવચીક રીત પ્રદાન કરે છે. રૂટ હેન્ડલર્સનો લાભ લઈને, તમે સરળતાથી મજબૂત APIs બનાવી શકો છો, તમારા બેકએન્ડ લોજિકને તમારા રિએક્ટ કમ્પોનન્ટ્સ સાથે કોલોકેટ કરી શકો છો, અને મિડલવેર, સ્ટ્રીમિંગ અને એજ ફંક્શન્સ જેવી સુવિધાઓનો લાભ લઈ શકો છો.

આ વ્યાપક માર્ગદર્શિકાએ મૂળભૂત સેટઅપથી લઈને અદ્યતન તકનીકો સુધી બધું જ આવરી લીધું છે. આ માર્ગદર્શિકામાં દર્શાવેલ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરીને, તમે ઉચ્ચ-ગુણવત્તાવાળા APIs બનાવી શકો છો જે સુરક્ષિત, પ્રદર્શનકારી અને જાળવી શકાય તેવા હોય.