M

MLOG

ಕನ್ನಡ

Next.js ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬಳಸಿ ಶಕ್ತಿಯುತ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ. ಈ ಮಾರ್ಗದರ್ಶಿಯು ಮೂಲಭೂತ ಸೆಟಪ್‌ನಿಂದ ಹಿಡಿದು ಸುಧಾರಿತ ತಂತ್ರಗಳವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳೊಂದಿಗೆ ಒಳಗೊಂಡಿದೆ.

Next.js ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು: API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ ರಚನೆಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

Next.js ತನ್ನ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್, ಸ್ಟ್ಯಾಟಿಕ್ ಸೈಟ್ ಜನರೇಷನ್, ಮತ್ತು ಈಗ, ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಂತಹ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ನಾವು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ರೀತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿದೆ. ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನೇರವಾಗಿ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಸುಲಭ ಮತ್ತು ಸಮರ್ಥ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯು ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳ ಪರಿಕಲ್ಪನೆ, ಅವುಗಳ ಪ್ರಯೋಜನಗಳು, ಮತ್ತು ದೃಢವಾದ API ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅವುಗಳನ್ನು ಹೇಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ.

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 ಡೈರೆಕ್ಟರಿಯನ್ನು ಆಯ್ಕೆಮಾಡಿ.

ನಿಮ್ಮ ಮೊದಲ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ರಚಿಸುವುದು

JSON ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಹಿಂತಿರುಗಿಸುವ ಒಂದು ಸರಳ API ಎಂಡ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ರಚಿಸೋಣ. app ಡೈರೆಕ್ಟರಿಯೊಳಗೆ ಹೊಸ ಡೈರೆಕ್ಟರಿಯನ್ನು ರಚಿಸಿ, ಉದಾಹರಣೆಗೆ, /app/api/hello. ಈ ಡೈರೆಕ್ಟರಿಯೊಳಗೆ, route.ts (ಅಥವಾ ನೀವು ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸದಿದ್ದರೆ route.js) ಹೆಸರಿನ ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ.

ನಿಮ್ಮ ಮೊದಲ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಾಗಿ ಕೋಡ್ ಇಲ್ಲಿದೆ:

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

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Hello from Next.js Route Handlers!' });
}

ವಿವರಣೆ:

ಈಗ, ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ /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('User Agent:', 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:', data);
 return NextResponse.json({ receivedData: data });
}

ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವುದು

NextResponse ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು API ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಹೆಡರ್‌ಗಳು, ಸ್ಟೇಟಸ್ ಕೋಡ್‌ಗಳು, ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯ ಬಾಡಿಗಳನ್ನು ಹೊಂದಿಸಲು ಹಲವಾರು ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

JSON ಪ್ರತಿಕ್ರಿಯೆಗಳು

JSON ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಹಿಂತಿರುಗಿಸಲು NextResponse.json() ವಿಧಾನವನ್ನು ಬಳಸಿ:

return NextResponse.json({ message: 'Success!', data: { name: 'John Doe' } }, { status: 200 });

ಪಠ್ಯ ಪ್ರತಿಕ್ರಿಯೆಗಳು

ಸರಳ ಪಠ್ಯ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಹಿಂತಿರುಗಿಸಲು new Response() ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್ ಬಳಸಿ:

return new Response('Hello, world!', { status: 200, headers: { 'Content-Type': 'text/plain' } });

ಮರುನಿರ್ದೇಶನಗಳು (Redirects)

ಬಳಕೆದಾರರನ್ನು ಬೇರೆ 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: 'Success!' }, { 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/ ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಪಥಗಳಿಗೆ ಅನ್ವಯಿಸಿ
};

ವಿವರಣೆ:

ದೋಷ ನಿರ್ವಹಣೆ (Error Handling)

ದೃಢವಾದ API ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆ ಅತ್ಯಗತ್ಯ. ವಿನಾಯಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಸೂಕ್ತವಾದ ದೋಷ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಹಿಂತಿರುಗಿಸಲು ನೀವು try...catch ಬ್ಲಾಕ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

export async function GET(request: Request) {
 try {
 // ದೋಷವನ್ನು ಸಿಮ್ಯುಲೇಟ್ ಮಾಡಿ
 throw new Error('Something went wrong!');
 } catch (error: any) {
 console.error('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 `Data chunk ${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' },
 });
}

ವಿವರಣೆ:

ದೃಢೀಕರಣ ಮತ್ತು ಅಧಿಕಾರ (Authentication and Authorization)

ನಿಮ್ಮ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಸುರಕ್ಷಿತಗೊಳಿಸುವುದು ಅತ್ಯಗತ್ಯ. ನೀವು ಮಿಡಲ್‌ವೇರ್ ಬಳಸಿ ಅಥವಾ ನೇರವಾಗಿ ನಿಮ್ಮ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳೊಳಗೆ ದೃಢೀಕರಣ ಮತ್ತು ಅಧಿಕಾರವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.

ದೃಢೀಕರಣ (Authentication)

ದೃಢೀಕರಣವು ವಿನಂತಿ ಮಾಡುವ ಬಳಕೆದಾರರ ಗುರುತನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ದೃಢೀಕರಣ ವಿಧಾನಗಳು ಸೇರಿವೆ:

ಮಿಡಲ್‌ವೇರ್ ಬಳಸಿ 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: 'Authentication required' }, { status: 401 });
 }

 try {
 jwt.verify(token, secret);
 return NextResponse.next();
 } catch (error) {
 return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
 }
}

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

ಅಧಿಕಾರ (Authorization)

ಅಧಿಕಾರವು ಬಳಕೆದಾರರಿಗೆ ಯಾವ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಅನುಮತಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಪಾತ್ರಗಳು ಅಥವಾ ಅನುಮತಿಗಳ ಮೇಲೆ ಆಧಾರಿತವಾಗಿರುತ್ತದೆ.

ನೀವು ನಿಮ್ಮ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳೊಳಗೆ ಬಳಕೆದಾರರ ಪಾತ್ರಗಳು ಅಥವಾ ಅನುಮತಿಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ ಮತ್ತು ಅವರಿಗೆ ಪ್ರವೇಶವಿಲ್ಲದಿದ್ದರೆ ದೋಷವನ್ನು ಹಿಂತಿರುಗಿಸುವ ಮೂಲಕ ಅಧಿಕಾರವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.

// 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: 'Unauthorized' }, { status: 403 });
 }

 // ಅಡ್ಮಿನ್ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯುವ ಲಾಜಿಕ್
 const adminData = { message: 'Admin data' };
 return NextResponse.json(adminData);
}

async function getUserRole(request: Request): Promise {
 // ವಿನಂತಿಯಿಂದ ಬಳಕೆದಾರರ ಪಾತ್ರವನ್ನು ಹೊರತೆಗೆಯಲು ನಿಮ್ಮ ನಿಜವಾದ ಲಾಜಿಕ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ
 // ಇದು JWT ಟೋಕನ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವುದು ಅಥವಾ ಸೆಷನ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರಬಹುದು
 return 'admin'; // ಉದಾಹರಣೆ: ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಹಾರ್ಡ್‌ಕೋಡ್ ಮಾಡಲಾದ ಪಾತ್ರ
}

ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ನಿಯೋಜಿಸುವುದು (Deploying)

ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಹೋಸ್ಟಿಂಗ್ ಪೂರೈಕೆದಾರರಲ್ಲಿ ಸರ್ವರ್‌ಲೆಸ್ ಫಂಕ್ಷನ್‌ಗಳಾಗಿ ನಿಯೋಜಿಸಲ್ಪಡುತ್ತವೆ. 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: 'Hello from the Edge!' });
}

ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು

ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಂದ ನೇರವಾಗಿ ಸರ್ವರ್-ಸೈಡ್ ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಮತ್ತು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು ಒಟ್ಟಿಗೆ ತಡೆರಹಿತವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಇದು ನಿಮಗೆ ಸುಲಭವಾಗಿ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಒಂದು ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಕರೆಯಲು ಸರ್ವರ್ ಆಕ್ಷನ್ ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

// 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 (
 

 
 


 
 


 
 

 );
}

ಕ್ಯಾಶಿಂಗ್ (Caching)

ಕ್ಯಾಶಿಂಗ್ ನಿಮ್ಮ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು CDN ಗಳು ನಿಮ್ಮ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಹೇಗೆ ಕ್ಯಾಶ್ ಮಾಡಬೇಕೆಂದು ನಿಯಂತ್ರಿಸಲು ನೀವು Cache-Control ಹೆಡರ್ ಅನ್ನು ಬಳಸಬಹುದು.

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

ಈ ಉದಾಹರಣೆಯು Cache-Control ಹೆಡರ್ ಅನ್ನು public, max-age=3600 ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ಇದು ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು CDN ಗಳಿಗೆ ಒಂದು ಗಂಟೆಯವರೆಗೆ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಕ್ಯಾಶ್ ಮಾಡಲು ಹೇಳುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು

ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

ಅಂತರರಾಷ್ಟ್ರೀಯ ಇ-ಕಾಮರ್ಸ್ ಉದಾಹರಣೆ: ಬಳಕೆದಾರರ ದೇಶವನ್ನು ಆಧರಿಸಿ ಉತ್ಪನ್ನದ ಬೆಲೆಯನ್ನು ಹಿಂಪಡೆಯಲು ಬಳಸುವ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್. ಎಂಡ್‌ಪಾಯಿಂಟ್ ಬಳಕೆದಾರರ ಸ್ಥಳವನ್ನು ನಿರ್ಧರಿಸಲು ವಿನಂತಿಯ ಜಿಯೋಲೊಕೇಶನ್ (IP ವಿಳಾಸದಿಂದ ಪಡೆದ) ಅನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಸೂಕ್ತವಾದ ಕರೆನ್ಸಿಯಲ್ಲಿ ಬೆಲೆಗಳನ್ನು ಹಿಂತಿರುಗಿಸಬಹುದು. ಇದು ಸ್ಥಳೀಯ ಶಾಪಿಂಗ್ ಅನುಭವಕ್ಕೆ ಕೊಡುಗೆ ನೀಡುತ್ತದೆ.

ಜಾಗತಿಕ ದೃಢೀಕರಣ ಉದಾಹರಣೆ: ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗಾಗಿ ಬಹು-ಅಂಶ ದೃಢೀಕರಣವನ್ನು (MFA) ಕಾರ್ಯಗತಗೊಳಿಸುವ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್. ಇದು SMS ಕೋಡ್‌ಗಳನ್ನು ಕಳುಹಿಸುವುದು ಅಥವಾ ದೃಢೀಕರಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಬಳಸುವುದು, ಹಾಗೆಯೇ ವಿವಿಧ ಪ್ರದೇಶಗಳ ಗೌಪ್ಯತೆ ನಿಯಮಗಳು ಮತ್ತು ದೂರಸಂಪರ್ಕ ಮೂಲಸೌಕರ್ಯಗಳನ್ನು ಗೌರವಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.

ಬಹುಭಾಷಾ ವಿಷಯ ವಿತರಣೆ: ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಭಾಷೆಯಲ್ಲಿ ವಿಷಯವನ್ನು ತಲುಪಿಸುವ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್. ಇದನ್ನು ವಿನಂತಿಯಲ್ಲಿನ `Accept-Language` ಹೆಡರ್‌ನಿಂದ ನಿರ್ಧರಿಸಬಹುದು. ಈ ಉದಾಹರಣೆಯು ಸರಿಯಾದ UTF-8 ಎನ್‌ಕೋಡಿಂಗ್ ಮತ್ತು ಅಗತ್ಯವಿದ್ದಲ್ಲಿ ಬಲದಿಂದ ಎಡಕ್ಕೆ ಭಾಷಾ ಬೆಂಬಲದ ಅಗತ್ಯವನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ

Next.js ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನೇರವಾಗಿ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ. ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಸುಲಭವಾಗಿ ದೃಢವಾದ API ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು, ನಿಮ್ಮ ಬ್ಯಾಕೆಂಡ್ ಲಾಜಿಕ್ ಅನ್ನು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಂದಿಗೆ ಇರಿಸಬಹುದು, ಮತ್ತು ಮಿಡಲ್‌ವೇರ್, ಸ್ಟ್ರೀಮಿಂಗ್, ಮತ್ತು ಎಡ್ಜ್ ಫಂಕ್ಷನ್‌ಗಳಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಬಹುದು.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಮೂಲಭೂತ ಸೆಟಪ್‌ನಿಂದ ಹಿಡಿದು ಸುಧಾರಿತ ತಂತ್ರಗಳವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಒಳಗೊಂಡಿದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ಸುರಕ್ಷಿತ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಉತ್ತಮ ಗುಣಮಟ್ಟದ API ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.