தமிழ்

Next.js API Routes-ஐ ஆராய்ந்து, உங்கள் React பயன்பாடுகளில் முழு-அடுக்கு மேம்பாட்டு திறன்களைத் திறந்திடுங்கள். வடிவங்கள், சிறந்த நடைமுறைகள் மற்றும் வரிசைப்படுத்தல் உத்திகளைக் கற்றுக் கொள்ளுங்கள்.

Next.js API Routes: முழு-அடுக்கு மேம்பாட்டு வடிவங்கள்

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

Next.js API Routes என்றால் என்ன?

Next.js API Routes என்பது உங்கள் /pages/api கோப்பகத்தில் நேரடியாக எழுதப்படும் சர்வர்லெஸ் செயல்பாடுகள் ஆகும். இந்த கோப்பகத்தில் உள்ள ஒவ்வொரு கோப்பும் ஒரு API எண்ட்பாயிண்டாக மாறுகிறது, HTTP கோரிக்கைகளை தானாகவே அதன் தொடர்புடைய செயல்பாட்டிற்கு வழிநடத்துகிறது. இது ஒரு தனி பின்தள சர்வரின் தேவையை நீக்குகிறது, உங்கள் பயன்பாட்டு கட்டமைப்பை எளிதாக்குகிறது மற்றும் செயல்பாட்டுச் செலவுகளைக் குறைக்கிறது.

இவற்றை உங்கள் Next.js பயன்பாட்டின் உள்ளே வாழும் சிறிய சர்வர்லெஸ் செயல்பாடுகளாகக் கருதுங்கள். அவை GET, POST, PUT, DELETE போன்ற HTTP கோரிக்கைகளுக்குப் பதிலளிக்கின்றன, மேலும் தரவுத்தளங்கள், வெளிப்புற API-கள் மற்றும் பிற சர்வர்-பக்க வளங்களுடன் தொடர்பு கொள்ளலாம். முக்கியமாக, அவை பயனரின் உலாவியில் அல்ல, சர்வரில் மட்டுமே இயங்குகின்றன, இது API விசைகள் போன்ற முக்கியமான தரவுகளின் பாதுகாப்பை உறுதி செய்கிறது.

API Routes-இன் முக்கிய நன்மைகள்

API Routes-ஐ தொடங்குவது

Next.js-இல் ஒரு API route-ஐ உருவாக்குவது மிகவும் எளிது. உங்கள் /pages/api கோப்பகத்தில் ஒரு புதிய கோப்பை உருவாக்கினால் போதும். கோப்பின் பெயர் route-இன் பாதையை தீர்மானிக்கும். எடுத்துக்காட்டாக, /pages/api/hello.js என்ற கோப்பை உருவாக்குவது /api/hello என்ற முகவரியில் அணுகக்கூடிய ஒரு API எண்ட்பாயிண்ட்டை உருவாக்கும்.

எடுத்துக்காட்டு: ஒரு எளிய வாழ்த்து API

ஒரு JSON பதிலை வழங்கும் API route-இன் ஒரு அடிப்படை எடுத்துக்காட்டு இங்கே:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Next.js API Route-இலிருந்து வணக்கம்!' });
}

இந்த குறியீடு handler என்ற ஒரு ஒத்திசைவற்ற செயல்பாட்டை வரையறுக்கிறது, இது இரண்டு வாதங்களைப் பெறுகிறது:

இந்த செயல்பாடு HTTP நிலைக் குறியீட்டை 200 (சரி) என அமைத்து, ஒரு செய்தியுடன் JSON பதிலை வழங்குகிறது.

பல்வேறு HTTP முறைகளைக் கையாளுதல்

உங்கள் API route-க்குள் req.method பண்பைச் சரிபார்ப்பதன் மூலம் நீங்கள் வெவ்வேறு HTTP முறைகளை (GET, POST, PUT, DELETE, போன்றவை) கையாளலாம். இது RESTful API-களை எளிதாக உருவாக்க உங்களை அனுமதிக்கிறது.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // தரவுத்தளத்திலிருந்து அனைத்து todos-களையும் பெறுக
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // ஒரு புதிய todo-ஐ உருவாக்குக
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // ஆதரிக்கப்படாத முறைகளைக் கையாளுக
    res.status(405).json({ message: 'முறை அனுமதிக்கப்படவில்லை' });
  }
}

இந்த எடுத்துக்காட்டு ஒரு கற்பனையான /api/todos எண்ட்பாயிண்டிற்கான GET மற்றும் POST கோரிக்கைகளை எவ்வாறு கையாள்வது என்பதைக் காட்டுகிறது. இது ஆதரிக்கப்படாத முறைகளுக்கான பிழை கையாளுதலையும் உள்ளடக்கியுள்ளது.

API Routes உடன் முழு-அடுக்கு மேம்பாட்டு வடிவங்கள்

Next.js API Routes பல்வேறு முழு-அடுக்கு மேம்பாட்டு வடிவங்களை செயல்படுத்துகின்றன. இங்கே சில பொதுவான பயன்பாட்டு வழக்குகள்:

1. தரவுப் பெறுதல் மற்றும் கையாளுதல்

API Routes தரவுத்தளங்கள், வெளிப்புற API-கள் அல்லது பிற தரவு மூலங்களிலிருந்து தரவைப் பெறப் பயன்படுத்தப்படலாம். அவை தரவைக் கையாளவும் பயன்படுத்தப்படலாம், அதாவது பதிவுகளை உருவாக்குதல், புதுப்பித்தல் அல்லது நீக்குதல்.

எடுத்துக்காட்டு: தரவுத்தளத்திலிருந்து பயனர் தரவைப் பெறுதல்


// pages/api/users/[id].js
import { query } from '../../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;

  try {
    const results = await query(
      'SELECT * FROM users WHERE id = ?',
      [id]
    );

    if (results.length === 0) {
      return res.status(404).json({ message: 'பயனர் கண்டுபிடிக்கப்படவில்லை' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'உள் சேவையகப் பிழை' });
  }
}

இந்த எடுத்துக்காட்டு URL-இல் வழங்கப்பட்ட பயனர் ஐடியின் அடிப்படையில் தரவுத்தளத்திலிருந்து பயனர் தரவைப் பெறுகிறது. இது தரவுத்தளத்துடன் தொடர்பு கொள்ள ஒரு தரவுத்தள வினவல் நூலகத்தைப் (lib/db இல் இருப்பதாகக் கருதப்படுகிறது) பயன்படுத்துகிறது. SQL ஊசி பாதிப்புகளைத் தடுக்க அளவுருவாக்கப்பட்ட வினவல்களின் பயன்பாட்டைக் கவனியுங்கள்.

2. அங்கீகாரம் மற்றும் அதிகாரமளித்தல்

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

எடுத்துக்காட்டு: பயனர் அங்கீகாரம்


// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const results = await query(
        'SELECT * FROM users WHERE email = ?',
        [email]
      );

      if (results.length === 0) {
        return res.status(401).json({ message: 'தவறான சான்றுகள்' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'தவறான சான்றுகள்' });
      }

      const token = jwt.sign(
        { userId: user.id, email: user.email },
        process.env.JWT_SECRET,
        { expiresIn: '1h' }
      );

      res.status(200).json({ token });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'உள் சேவையகப் பிழை' });
    }
  } else {
    res.status(405).json({ message: 'முறை அனுமதிக்கப்படவில்லை' });
  }
}

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

3. படிவம் கையாளுதல் மற்றும் தரவு சமர்ப்பிப்பு

API Routes படிவ சமர்ப்பிப்புகளைக் கையாளவும், கிளையண்டிலிருந்து அனுப்பப்பட்ட தரவைச் செயலாக்கவும் பயன்படுத்தப்படலாம். தொடர்புப் படிவங்கள், பதிவுப் படிவங்கள் மற்றும் பிற ஊடாடும் கூறுகளை உருவாக்க இது பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு: தொடர்புப் படிவம் சமர்ப்பிப்பு


// pages/api/contact.js
import { sendEmail } from '../../lib/email';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    try {
      await sendEmail({
        to: 'admin@example.com',
        subject: 'புதிய தொடர்புப் படிவம் சமர்ப்பிப்பு',
        text: `பெயர்: ${name}\nமின்னஞ்சல்: ${email}\nசெய்தி: ${message}`,
      });

      res.status(200).json({ message: 'மின்னஞ்சல் வெற்றிகரமாக அனுப்பப்பட்டது' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'மின்னஞ்சல் அனுப்பத் தவறிவிட்டது' });
    }
  } else {
    res.status(405).json({ message: 'முறை அனுமதிக்கப்படவில்லை' });
  }
}

இந்த எடுத்துக்காட்டு நிர்வாகிக்கு ஒரு மின்னஞ்சல் அனுப்புவதன் மூலம் ஒரு தொடர்புப் படிவ சமர்ப்பிப்பைக் கையாளுகிறது. இது மின்னஞ்சலை அனுப்ப ஒரு மின்னஞ்சல் அனுப்பும் நூலகத்தைப் (lib/email இல் இருப்பதாகக் கருதப்படுகிறது) பயன்படுத்துகிறது. நீங்கள் admin@example.com என்பதை உண்மையான பெறுநர் மின்னஞ்சல் முகவரியுடன் மாற்ற வேண்டும்.

4. வெப்ஹூக்குகள் மற்றும் நிகழ்வு கையாளுதல்

API Routes வெப்ஹூக்குகளைக் கையாளவும், வெளிப்புற சேவைகளிலிருந்து வரும் நிகழ்வுகளுக்கு பதிலளிக்கவும் பயன்படுத்தப்படலாம். இது உங்கள் Next.js பயன்பாட்டை மற்ற தளங்களுடன் ஒருங்கிணைக்கவும் பணிகளை தானியக்கமாக்கவும் உங்களை அனுமதிக்கிறது.

எடுத்துக்காட்டு: ஒரு Stripe வெப்ஹூக்கைக் கையாளுதல்


// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // இயல்புநிலை பாடி பார்சிங்கை முடக்கு
  },
};

async function buffer(req) {
  const chunks = [];
  for await (const chunk of req) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks).toString();
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      const buf = await buffer(req);
      event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
    } catch (err) {
      console.log(`வெப்ஹூக் பிழை: ${err.message}`);
      res.status(400).send(`வெப்ஹூக் பிழை: ${err.message}`);
      return;
    }

    // நிகழ்வைக் கையாளவும்
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`${paymentIntent.amount}-க்கான பேமெண்ட் இன்டென்ட் வெற்றிகரமாக இருந்தது!`);
        // பின்னர் வெற்றிகரமான பேமெண்ட் இன்டென்ட்டைக் கையாள ஒரு முறையை வரையறுத்து அழைக்கவும்.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // பின்னர் ஒரு பேமெண்ட் மெத்தட் வெற்றிகரமாக இணைக்கப்பட்டதைக் கையாள ஒரு முறையை வரையறுத்து அழைக்கவும்.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // எதிர்பாராத நிகழ்வு வகை
        console.log(`கையாளப்படாத நிகழ்வு வகை ${event.type}.`);
    }

    // நிகழ்வைப் பெற்றதை ஒப்புக்கொள்ள 200 பதிலை வழங்கவும்
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('முறை அனுமதிக்கப்படவில்லை');
  }
}

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

API Routes-க்கான சிறந்த நடைமுறைகள்

உங்கள் API Routes-இன் தரம் மற்றும் பராமரிப்பை உறுதிப்படுத்த, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

1. உங்கள் குறியீட்டைப் பிரித்து வைக்கவும்

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

2. பிழை கையாளுதலைச் செயல்படுத்தவும்

உங்கள் API routes-இல் பிழைகளைச் சரியாகக் கையாளவும். விதிவிலக்குகளைப் பிடிக்க try...catch தொகுதிகளைப் பயன்படுத்தவும் மற்றும் கிளையண்டிற்கு பொருத்தமான பிழை பதில்களை வழங்கவும். பிழைத்திருத்தம் மற்றும் கண்காணிப்புக்கு உதவ பிழைகளைப் பதிவு செய்யவும்.

3. உள்ளீட்டுத் தரவைச் சரிபார்க்கவும்

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

4. முக்கியமான தரவைப் பாதுகாக்கவும்

API விசைகள் மற்றும் தரவுத்தள சான்றுகள் போன்ற முக்கியமான தரவை சூழல் மாறிகளில் சேமிக்கவும். முக்கியமான தரவை உங்கள் குறியீடு களஞ்சியத்தில் ஒருபோதும் சமர்ப்பிக்க வேண்டாம்.

5. விகித வரம்பைச் செயல்படுத்தவும்

விகித வரம்பைச் செயல்படுத்துவதன் மூலம் உங்கள் API routes-களை துஷ்பிரயோகத்திலிருந்து பாதுகாக்கவும். இது ஒரு குறிப்பிட்ட காலத்திற்குள் ஒரு கிளையன்ட் செய்யக்கூடிய கோரிக்கைகளின் எண்ணிக்கையைக் கட்டுப்படுத்துகிறது. express-rate-limit அல்லது limiter போன்ற விகித வரம்பு நூலகங்களைப் பயன்படுத்தவும்.

6. API விசைகளைப் பாதுகாக்கவும்

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

7. சூழல் மாறிகளைப் பயன்படுத்தவும்

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

8. பதிவுசெய்தல் மற்றும் கண்காணிப்பு

உங்கள் API routes-இன் செயல்திறனைக் கண்காணிக்க பதிவுசெய்தல் மற்றும் கண்காணிப்பைச் செயல்படுத்தவும். பிழைகள், எச்சரிக்கைகள் மற்றும் வெற்றிகரமான கோரிக்கைகள் போன்ற முக்கியமான நிகழ்வுகளைப் பதிவு செய்யவும். கோரிக்கை தாமதம், பிழை விகிதங்கள் மற்றும் வளப் பயன்பாடு போன்ற அளவீடுகளைக் கண்காணிக்க கண்காணிப்புக் கருவிகளைப் பயன்படுத்தவும். Sentry, Datadog அல்லது New Relic போன்ற சேவைகள் உதவியாக இருக்கும்.

வரிசைப்படுத்தல் பரிசீலனைகள்

Next.js API Routes சர்வர்லெஸ் தளங்களில் வரிசைப்படுத்த வடிவமைக்கப்பட்டுள்ளன. பிரபலமான வரிசைப்படுத்தல் விருப்பங்கள் பின்வருமாறு:

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

முடிவுரை

Next.js API Routes, React உடன் முழு-அடுக்கு பயன்பாடுகளை உருவாக்க ஒரு சக்திவாய்ந்த மற்றும் வசதியான வழியை வழங்குகின்றன. சர்வர்லெஸ் செயல்பாடுகளைப் பயன்படுத்துவதன் மூலம், நீங்கள் மேம்பாட்டை எளிதாக்கலாம், செயல்பாட்டுச் செலவுகளைக் குறைக்கலாம் மற்றும் பயன்பாட்டு செயல்திறனை மேம்படுத்தலாம். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் Next.js பயன்பாடுகளுக்கு శక్తి அளிக்கும் வலுவான மற்றும் பராமரிக்கக்கூடிய API Routes-களை நீங்கள் உருவாக்கலாம்.

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

மேலும் அறிய