M

MLOG

ગુજરાતી

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

Next.js API Routes: તમારું બેકએન્ડ સરળતાથી બનાવો

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

Next.js API Routes શું છે?

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

તેમને હલકા, ઓન-ડિમાન્ડ બેકએન્ડ ફંક્શન્સ તરીકે વિચારો જે તમારા Next.js ફ્રન્ટ-એન્ડ સાથે એકીકૃત રીતે જોડાયેલા છે.

Next.js API Routes વાપરવાના ફાયદા

Next.js API Routes સાથે પ્રારંભ કરવો

ચાલો એક સરળ API રૂટ બનાવીએ જે JSON પ્રતિસાદ પરત કરે છે. પ્રથમ, ખાતરી કરો કે તમારી પાસે Next.js પ્રોજેક્ટ સેટઅપ છે. જો ન હોય તો, આનો ઉપયોગ કરીને એક બનાવો:

npx create-next-app my-app
cd my-app

હવે, /pages/api ડિરેક્ટરીની અંદર hello.js નામની ફાઇલ બનાવો:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

આ કોડ એક સરળ API રૂટને વ્યાખ્યાયિત કરે છે જે "John Doe" નામ ધરાવતા JSON ઓબ્જેક્ટ સાથે પ્રતિસાદ આપે છે. આ API રૂટને એક્સેસ કરવા માટે, તમારું Next.js ડેવલપમેન્ટ સર્વર શરૂ કરો:

npm run dev

પછી, તમારું બ્રાઉઝર ખોલો અને http://localhost:3000/api/hello પર નેવિગેટ કરો. તમારે નીચેનો JSON પ્રતિસાદ જોવો જોઈએ:

{"name": "John Doe"}

API રૂટ હેન્ડલરને સમજવું

તમારા API રૂટમાં handler ફંક્શનને બે દલીલો મળે છે:

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

વિવિધ HTTP પદ્ધતિઓનું સંચાલન

તમે આવનારી વિનંતીની HTTP પદ્ધતિ નક્કી કરવા અને તે મુજબ વિવિધ પદ્ધતિઓ હેન્ડલ કરવા માટે req.method પ્રોપર્ટીનો ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET વિનંતી હેન્ડલ કરો
    res.status(200).json({ message: 'આ એક GET વિનંતી છે' })
  } else if (req.method === 'POST') {
    // POST વિનંતી હેન્ડલ કરો
    res.status(200).json({ message: 'આ એક POST વિનંતી છે' })
  } else {
    // અન્ય પદ્ધતિઓ હેન્ડલ કરો
    res.status(405).json({ message: 'મેથડને મંજૂરી નથી' })
  }
}

આ ઉદાહરણમાં, API રૂટ GET અને POST બંને વિનંતીઓનું સંચાલન કરે છે. જો વિનંતી પદ્ધતિ GET હોય, તો તે "આ એક GET વિનંતી છે" સંદેશ ધરાવતા JSON ઓબ્જેક્ટ સાથે પ્રતિસાદ આપે છે. જો વિનંતી પદ્ધતિ POST હોય, તો તે "આ એક POST વિનંતી છે" સંદેશ ધરાવતા JSON ઓબ્જેક્ટ સાથે પ્રતિસાદ આપે છે. જો વિનંતી પદ્ધતિ અન્ય કોઈ હોય, તો તે 405 Method Not Allowed ભૂલ સાથે પ્રતિસાદ આપે છે.

વિનંતી બોડીમાંથી ડેટા વાંચવો

POST, PUT, અને PATCH વિનંતીઓ માટે, તમારે ઘણીવાર વિનંતી બોડીમાંથી ડેટા વાંચવાની જરૂર પડે છે. Next.js JSON અને URL-એનકોડેડ વિનંતી બોડીને પાર્સ કરવા માટે બિલ્ટ-ઇન સપોર્ટ પૂરો પાડે છે. JSON વિનંતી બોડીને પાર્સ કરવા માટે, તમે req.body પ્રોપર્ટીનો ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે:

// pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // ડેટા પર પ્રક્રિયા કરો
    console.log('નામ:', name)
    console.log('ઈમેલ:', email)

    res.status(200).json({ message: 'ડેટા સફળતાપૂર્વક પ્રાપ્ત થયો' })
  } else {
    res.status(405).json({ message: 'મેથડને મંજૂરી નથી' })
  }
}

આ API રૂટનું પરીક્ષણ કરવા માટે, તમે Postman અથવા curl જેવા ટૂલનો ઉપયોગ કરીને JSON બોડી સાથે POST વિનંતી મોકલી શકો છો:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post

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

તમે પ્રતિસાદ હેડરો સેટ કરવા માટે res.setHeader() પદ્ધતિનો ઉપયોગ કરી શકો છો. આ કન્ટેન્ટ પ્રકાર, કેશ કંટ્રોલ અને અન્ય મહત્વપૂર્ણ માહિતી સેટ કરવા માટે ઉપયોગી છે. ઉદાહરણ તરીકે:

// pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'હેલો, વર્લ્ડ!' })
}

આ ઉદાહરણમાં, API રૂટ Content-Type હેડરને application/json પર સેટ કરે છે, જે દર્શાવે છે કે પ્રતિસાદ JSON ઓબ્જેક્ટ છે. તે Cache-Control હેડરને s-maxage=3600 પર પણ સેટ કરે છે, જે બ્રાઉઝર અને CDN ને 1 કલાક સુધી પ્રતિસાદ કેશ કરવા માટે કહે છે.

ભૂલનું સંચાલન

તમારા API રૂટ્સમાં ભૂલોને સુવ્યવસ્થિત રીતે હેન્ડલ કરવું મહત્વપૂર્ણ છે. તમે અપવાદોને પકડવા અને ક્લાયન્ટને યોગ્ય ભૂલ પ્રતિસાદ મોકલવા માટે try-catch બ્લોક્સનો ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // ભૂલનું અનુકરણ કરો
    throw new Error('કંઈક ખોટું થયું')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'આંતરિક સર્વર ભૂલ' })
  }
}

આ ઉદાહરણમાં, API રૂટ એક નવો Error ઓબ્જેક્ટ ફેંકીને ભૂલનું અનુકરણ કરે છે. catch બ્લોક ભૂલને પકડે છે, તેને કન્સોલમાં લોગ કરે છે, અને ક્લાયન્ટને 500 આંતરિક સર્વર ભૂલ પ્રતિસાદ મોકલે છે. પ્રોડક્શન વાતાવરણ માટે Sentry અથવા Datadog જેવી મજબૂત લોગિંગ સિસ્ટમનો ઉપયોગ કરવાનું વિચારો.

ડેટાબેઝ સાથે કનેક્ટ કરવું

API રૂટ્સ માટેના સૌથી સામાન્ય ઉપયોગના કેસોમાંનો એક ડેટાબેઝ સાથે કનેક્ટ થવાનો છે. Next.js API Routes વિવિધ ડેટાબેઝ સાથે એકીકૃત રીતે જોડાય છે, જેમાં સમાવેશ થાય છે:

અહીં Next.js API રૂટમાં MongoDB ડેટાબેઝ સાથે કેવી રીતે કનેક્ટ કરવું તેનું એક ઉદાહરણ છે:

// pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('કૃપા કરીને તમારો Mongo URI .env.local માં ઉમેરો')
}

if (process.env.NODE_ENV === 'development') {
  // ડેવલપમેન્ટ મોડમાં, ગ્લોબલ વેરિયેબલનો ઉપયોગ કરો જેથી HMR (હોટ મોડ્યુલ રિપ્લેસમેન્ટ) ને કારણે થતા મોડ્યુલ રીલોડ્સમાં મૂલ્ય સચવાય રહે.
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // પ્રોડક્શન મોડમાં, ગ્લોબલ વેરિયેબલનો ઉપયોગ ન કરવો શ્રેષ્ઠ છે.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// મોડ્યુલ-સ્કોપ્ડ MongoClient પ્રોમિસ એક્સપોર્ટ કરો. આને અલગ મોડ્યુલમાં કરવાથી, ક્લાયન્ટને બહુવિધ ફંક્શન્સમાં સુરક્ષિત રીતે પુનઃઉપયોગ કરી શકાય છે. જુઓ: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'વપરાશકર્તાઓને મેળવવામાં નિષ્ફળ' })
  }
}

આ કોડ ચલાવતા પહેલા, ખાતરી કરો કે તમે mongodb પેકેજ ઇન્સ્ટોલ કર્યું છે:

npm install mongodb

તમારે MONGODB_URI અને MONGODB_DB પર્યાવરણીય ચલો પણ સેટ કરવાની જરૂર છે. આ ચલો તમારી .env.local ફાઇલમાં (અથવા પ્રોડક્શન માટે તમારા હોસ્ટિંગ પ્રદાતાના પર્યાવરણીય ચલ સેટિંગ્સમાં) વ્યાખ્યાયિત કરવા જોઈએ. MONGODB_URI માં તમારા MongoDB ડેટાબેઝની કનેક્શન સ્ટ્રિંગ હોય છે, અને MONGODB_DB ડેટાબેઝનું નામ સ્પષ્ટ કરે છે.

પ્રમાણીકરણ અને અધિકૃતતા

તમારા API રૂટ્સને સુરક્ષિત રાખવું સુરક્ષા માટે નિર્ણાયક છે. Next.js API રૂટ્સને વિવિધ પ્રમાણીકરણ અને અધિકૃતતા તકનીકોનો ઉપયોગ કરીને સુરક્ષિત કરી શકાય છે, જેમાં સમાવેશ થાય છે:

અહીં JWT પ્રમાણીકરણનો ઉપયોગ કરીને API રૂટને કેવી રીતે સુરક્ષિત કરવું તેનું એક ઉદાહરણ છે:

// pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'અનધિકૃત' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded" ઓબ્જેક્ટમાં ટોકનમાં એમ્બેડ કરેલી વપરાશકર્તા માહિતી હોય છે
    // ઉદાહરણ તરીકે: const userId = decoded.userId;

    // વિનંતી પર પ્રક્રિયા કરવાનું ચાલુ રાખો
    res.status(200).json({ message: 'સુરક્ષિત રિસોર્સ સફળતાપૂર્વક એક્સેસ થયું' })
  } catch (error) {
    return res.status(401).json({ message: 'અમાન્ય ટોકન' })
  }
}

આ કોડ ચલાવતા પહેલા, ખાતરી કરો કે તમે jsonwebtoken પેકેજ ઇન્સ્ટોલ કર્યું છે:

npm install jsonwebtoken

તમારે JWT_SECRET પર્યાવરણીય ચલ પણ સેટ કરવાની જરૂર છે. આ એક મજબૂત, રેન્ડમલી જનરેટ થયેલ ગુપ્ત કી હોવી જોઈએ જેનો ઉપયોગ JWT પર સહી કરવા અને ચકાસવા માટે થાય છે. આને સુરક્ષિત રીતે સંગ્રહિત કરો અને તેને તમારા ક્લાયન્ટ-સાઇડ કોડમાં ક્યારેય ખુલ્લું ન પાડો.

મિડલવેર

જ્યારે Next.js Express.js ની જેમ API રૂટ્સ માટે પરંપરાગત મિડલવેર ઓફર કરતું નથી, ત્યારે તમે તમારા API રૂટ હેન્ડલર્સને પુનઃઉપયોગી ફંક્શન્સ સાથે રેપ કરીને સમાન કાર્યક્ષમતા પ્રાપ્ત કરી શકો છો. આ તમને આના જેવા કાર્યો કરવાની મંજૂરી આપે છે:

અહીં એક સરળ લોગિંગ મિડલવેર કેવી રીતે બનાવવું તેનું એક ઉદાહરણ છે:

// utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

આ મિડલવેરનો ઉપયોગ કરવા માટે, ફક્ત તમારા API રૂટ હેન્ડલરને withLogging ફંક્શન સાથે રેપ કરો:

// pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'આ વિનંતી લોગ કરવામાં આવી હતી' })
}

export default withLogging(handler)

Next.js API Routes બનાવવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

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

બેકગ્રાઉન્ડ જોબ્સ

લાંબા સમય સુધી ચાલતા કાર્યો માટે કે જે API પ્રતિસાદને બ્લોક ન કરવા જોઈએ, બેકગ્રાઉન્ડ જોબ્સનો ઉપયોગ કરવાનું વિચારો. તમે તમારી બેકગ્રાઉન્ડ જોબ્સનું સંચાલન કરવા અને તેમને અસુમેળ રીતે પ્રક્રિયા કરવા માટે BullMQ અથવા Bree જેવી લાઇબ્રેરીઓનો ઉપયોગ કરી શકો છો.

વેબસોકેટ્સ

રિયલ-ટાઇમ એપ્લિકેશન્સ માટે, તમે તમારા Next.js API રૂટ્સમાં WebSockets નો ઉપયોગ કરી શકો છો. Socket.IO અને ws જેવી લાઇબ્રેરીઓ ક્લાયન્ટ અને સર્વર વચ્ચે સતત કનેક્શન્સ સ્થાપિત કરવાનું સરળ બનાવે છે.

GraphQL

જો તમને ડેટા મેળવવા માટે વધુ લવચીક અને કાર્યક્ષમ રીતની જરૂર હોય, તો GraphQL નો ઉપયોગ કરવાનું વિચારો. તમે તમારી Next.js એપ્લિકેશનમાં GraphQL API એન્ડપોઇન્ટ બનાવવા માટે Apollo Server અથવા Yoga જેવી લાઇબ્રેરીઓનો ઉપયોગ કરી શકો છો.

નિષ્કર્ષ

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