M

MLOG

Ελληνικά

Μάθετε πώς να αξιοποιείτε τις Διαδρομές API του Next.js για να δημιουργείτε serverless backends απευθείας στην εφαρμογή σας Next.js. Αυτός ο οδηγός καλύπτει τα πάντα, από τη βασική εγκατάσταση έως προηγμένες τεχνικές για τον χειρισμό ελέγχου ταυτότητας, την αποθήκευση δεδομένων και πολλά άλλα.

Διαδρομές API του Next.js: Δημιουργία του Backend σας με Ευκολία

Το Next.js έχει φέρει επανάσταση στην ανάπτυξη front-end με τα ισχυρά χαρακτηριστικά και τη διαισθητική δομή του. Αλλά γνωρίζατε ότι μπορεί επίσης να απλοποιήσει σημαντικά την ανάπτυξη backend; Οι Διαδρομές API (API Routes) του Next.js σας επιτρέπουν να δημιουργείτε serverless τελικά σημεία API (API endpoints) απευθείας μέσα στην εφαρμογή σας Next.js, εξαλείφοντας σε πολλές περιπτώσεις την ανάγκη για έναν ξεχωριστό διακομιστή backend. Αυτός ο περιεκτικός οδηγός θα σας καθοδηγήσει στη διαδικασία δημιουργίας ενός στιβαρού και επεκτάσιμου backend χρησιμοποιώντας τις Διαδρομές API του Next.js.

Τι είναι οι Διαδρομές API του Next.js;

Οι Διαδρομές API είναι serverless συναρτήσεις που δημιουργείτε μέσα στον κατάλογο /pages/api του project σας Next.js. Αυτές οι συναρτήσεις χειρίζονται εισερχόμενα αιτήματα HTTP και επιστρέφουν αποκρίσεις, ακριβώς όπως ένα παραδοσιακό backend API. Η βασική διαφορά είναι ότι αναπτύσσονται ως serverless συναρτήσεις, πράγμα που σημαίνει ότι δεν χρειάζεται να διαχειρίζεστε διακομιστές ή υποδομές.

Σκεφτείτε τις ως ελαφριές, on-demand backend συναρτήσεις που είναι άψογα ενσωματωμένες με το front-end του Next.js σας.

Οφέλη από τη Χρήση των Διαδρομών API του Next.js

Ξεκινώντας με τις Διαδρομές API του Next.js

Ας δημιουργήσουμε μια απλή διαδρομή API που επιστρέφει μια απόκριση JSON. Πρώτα, βεβαιωθείτε ότι έχετε ένα έτοιμο project Next.js. Αν όχι, δημιουργήστε ένα χρησιμοποιώντας:

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

Τώρα, δημιουργήστε ένα αρχείο με όνομα hello.js μέσα στον κατάλογο /pages/api:

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

Αυτός ο κώδικας ορίζει μια απλή διαδρομή API που απαντά με ένα αντικείμενο JSON που περιέχει το όνομα "John Doe". Για να αποκτήσετε πρόσβαση σε αυτήν τη διαδρομή API, ξεκινήστε τον διακομιστή ανάπτυξης του Next.js:

npm run dev

Στη συνέχεια, ανοίξτε το πρόγραμμα περιήγησής σας και πλοηγηθείτε στο http://localhost:3000/api/hello. Θα πρέπει να δείτε την ακόλουθη απόκριση JSON:

{"name": "John Doe"}

Κατανόηση του Handler της Διαδρομής API

Η συνάρτηση handler στη διαδρομή API σας λαμβάνει δύο ορίσματα:

Μπορείτε να χρησιμοποιήσετε αυτά τα αντικείμενα για να χειριστείτε διαφορετικούς τύπους αιτημάτων, να διαβάσετε δεδομένα από το σώμα του αιτήματος, να ορίσετε κεφαλίδες απόκρισης και να στείλετε διαφορετικούς τύπους αποκρίσεων.

Χειρισμός Διαφορετικών Μεθόδων HTTP

Μπορείτε να χρησιμοποιήσετε την ιδιότητα req.method για να προσδιορίσετε τη μέθοδο HTTP του εισερχόμενου αιτήματος και να χειριστείτε διαφορετικές μεθόδους ανάλογα. Για παράδειγμα:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Χειρισμός αιτήματος GET
    res.status(200).json({ message: 'This is a GET request' })
  } else if (req.method === 'POST') {
    // Χειρισμός αιτήματος POST
    res.status(200).json({ message: 'This is a POST request' })
  } else {
    // Χειρισμός άλλων μεθόδων
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

Σε αυτό το παράδειγμα, η διαδρομή API χειρίζεται τόσο αιτήματα GET όσο και POST. Εάν η μέθοδος του αιτήματος είναι GET, απαντά με ένα αντικείμενο JSON που περιέχει το μήνυμα "This is a GET request". Εάν η μέθοδος του αιτήματος είναι POST, απαντά με ένα αντικείμενο JSON που περιέχει το μήνυμα "This is a POST request". Εάν η μέθοδος του αιτήματος είναι οτιδήποτε άλλο, απαντά με ένα σφάλμα 405 Method Not Allowed.

Ανάγνωση Δεδομένων από το Σώμα του Αιτήματος (Request Body)

Για αιτήματα POST, PUT και PATCH, συχνά χρειάζεται να διαβάσετε δεδομένα από το σώμα του αιτήματος. Το Next.js παρέχει ενσωματωμένη υποστήριξη για την ανάλυση (parsing) σωμάτων αιτημάτων σε μορφή JSON και URL-encoded. Για να αναλύσετε ένα σώμα αιτήματος 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:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Data received successfully' })
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

Για να δοκιμάσετε αυτήν τη διαδρομή API, μπορείτε να χρησιμοποιήσετε ένα εργαλείο όπως το Postman ή το curl για να στείλετε ένα αίτημα POST με ένα σώμα JSON:

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

Ορισμός Κεφαλίδων Απόκρισης (Response Headers)

Μπορείτε να χρησιμοποιήσετε τη μέθοδο res.setHeader() για να ορίσετε κεφαλίδες απόκρισης. Αυτό είναι χρήσιμο για τον ορισμό του τύπου περιεχομένου (content type), του ελέγχου προσωρινής αποθήκευσης (cache control) και άλλων σημαντικών πληροφοριών. Για παράδειγμα:

// 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: 'Hello, world!' })
}

Σε αυτό το παράδειγμα, η διαδρομή API ορίζει την κεφαλίδα Content-Type σε application/json, υποδεικνύοντας ότι η απόκριση είναι ένα αντικείμενο JSON. Ορίζει επίσης την κεφαλίδα Cache-Control σε s-maxage=3600, η οποία λέει στο πρόγραμμα περιήγησης και στο CDN να αποθηκεύσουν προσωρινά την απόκριση για έως και 1 ώρα.

Διαχείριση Σφαλμάτων

Είναι σημαντικό να διαχειρίζεστε τα σφάλματα με χάρη στις διαδρομές API σας. Μπορείτε να χρησιμοποιήσετε μπλοκ try-catch για να συλλάβετε εξαιρέσεις και να στείλετε τις κατάλληλες αποκρίσεις σφάλματος στον client. Για παράδειγμα:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Προσομοίωση ενός σφάλματος
    throw new Error('Something went wrong')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internal Server Error' })
  }
}

Σε αυτό το παράδειγμα, η διαδρομή API προσομοιώνει ένα σφάλμα δημιουργώντας ένα νέο αντικείμενο Error. Το μπλοκ catch συλλαμβάνει το σφάλμα, το καταγράφει στην κονσόλα και στέλνει μια απόκριση 500 Internal Server Error στον client. Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε ένα στιβαρό σύστημα καταγραφής όπως το Sentry ή το Datadog για περιβάλλοντα παραγωγής.

Σύνδεση σε μια Βάση Δεδομένων

Μία από τις πιο συνηθισμένες περιπτώσεις χρήσης για τις διαδρομές API είναι η σύνδεση σε μια βάση δεδομένων. Οι Διαδρομές API του Next.js ενσωματώνονται άψογα με διάφορες βάσεις δεδομένων, όπως:

Ακολουθεί ένα παράδειγμα για το πώς να συνδεθείτε σε μια βάση δεδομένων MongoDB σε μια διαδρομή API του Next.js:

// 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('Please add your Mongo URI to .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // Σε κατάσταση ανάπτυξης, χρησιμοποιήστε μια καθολική μεταβλητή ώστε η τιμή
  // να διατηρείται κατά τις επαναφορτώσεις των module που προκαλούνται από το HMR (Hot Module Replacement).
  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 με εμβέλεια module. Κάνοντας αυτό σε ένα
// ξεχωριστό module, ο client μπορεί να επαναχρησιμοποιηθεί με ασφάλεια σε πολλές
// συναρτήσεις. Δείτε: 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: 'Failed to fetch users' })
  }
}

Πριν εκτελέσετε αυτόν τον κώδικα, βεβαιωθείτε ότι έχετε εγκαταστήσει το πακέτο mongodb:

npm install mongodb

Πρέπει επίσης να ορίσετε τις μεταβλητές περιβάλλοντος MONGODB_URI και MONGODB_DB. Αυτές οι μεταβλητές θα πρέπει να οριστούν στο αρχείο σας .env.local (ή στις ρυθμίσεις μεταβλητών περιβάλλοντος του παρόχου φιλοξενίας σας για την παραγωγή). Η MONGODB_URI περιέχει τη συμβολοσειρά σύνδεσης με τη βάση δεδομένων MongoDB σας, και η MONGODB_DB καθορίζει το όνομα της βάσης δεδομένων.

Έλεγχος Ταυτότητας και Εξουσιοδότηση

Η προστασία των διαδρομών API σας είναι ζωτικής σημασίας για την ασφάλεια. Οι Διαδρομές API του Next.js μπορούν να ασφαλιστούν χρησιμοποιώντας διάφορες τεχνικές ελέγχου ταυτότητας και εξουσιοδότησης, όπως:

Ακολουθεί ένα παράδειγμα για το πώς να προστατεύσετε μια διαδρομή API χρησιμοποιώντας έλεγχο ταυτότητας JWT:

// 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: 'Unauthorized' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // Το αντικείμενο "decoded" περιέχει τις πληροφορίες του χρήστη που είναι ενσωματωμένες στο token
    // Για παράδειγμα: const userId = decoded.userId;

    // Συνέχιση της επεξεργασίας του αιτήματος
    res.status(200).json({ message: 'Protected resource accessed successfully' })
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' })
  }
}

Πριν εκτελέσετε αυτόν τον κώδικα, βεβαιωθείτε ότι έχετε εγκαταστήσει το πακέτο jsonwebtoken:

npm install jsonwebtoken

Πρέπει επίσης να ορίσετε τη μεταβλητή περιβάλλοντος JWT_SECRET. Αυτό θα πρέπει να είναι ένα ισχυρό, τυχαία παραγόμενο μυστικό κλειδί που χρησιμοποιείται για την υπογραφή και την επαλήθευση των JWT. Αποθηκεύστε το με ασφάλεια και μην το εκθέτετε ποτέ στον κώδικα από την πλευρά του client.

Ενδιάμεσο Λογισμικό (Middleware)

Ενώ το Next.js δεν προσφέρει παραδοσιακό middleware για τις διαδρομές API με τον ίδιο τρόπο όπως το Express.js, μπορείτε να επιτύχετε παρόμοια λειτουργικότητα τυλίγοντας τους handlers των διαδρομών API σας με επαναχρησιμοποιήσιμες συναρτήσεις. Αυτό σας επιτρέπει να εκτελείτε εργασίες όπως:

Ακολουθεί ένα παράδειγμα για το πώς να δημιουργήσετε ένα απλό middleware καταγραφής:

// 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)
  }
}

Για να χρησιμοποιήσετε αυτό το middleware, απλά τυλίξτε τον handler της διαδρομής API σας με τη συνάρτηση withLogging:

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

async function handler(req, res) {
  res.status(200).json({ message: 'This request was logged' })
}

export default withLogging(handler)

Βέλτιστες Πρακτικές για τη Δημιουργία Διαδρομών API του Next.js

Προηγμένες Τεχνικές

Εργασίες Παρασκηνίου (Background Jobs)

Για μακροχρόνιες εργασίες που δεν πρέπει να μπλοκάρουν την απόκριση του API, εξετάστε τη χρήση εργασιών παρασκηνίου. Μπορείτε να χρησιμοποιήσετε βιβλιοθήκες όπως το BullMQ ή το Bree για να διαχειριστείτε τις εργασίες παρασκηνίου σας και να τις επεξεργαστείτε ασύγχρονα.

WebSockets

Για εφαρμογές πραγματικού χρόνου, μπορείτε να χρησιμοποιήσετε WebSockets στις διαδρομές API του Next.js σας. Βιβλιοθήκες όπως το Socket.IO και το ws καθιστούν εύκολη τη δημιουργία μόνιμων συνδέσεων μεταξύ του client και του server.

GraphQL

Εάν χρειάζεστε έναν πιο ευέλικτο και αποτελεσματικό τρόπο για την ανάκτηση δεδομένων, εξετάστε τη χρήση του GraphQL. Μπορείτε να χρησιμοποιήσετε βιβλιοθήκες όπως το Apollo Server ή το Yoga για να δημιουργήσετε ένα τελικό σημείο GraphQL API στην εφαρμογή σας Next.js.

Συμπέρασμα

Οι Διαδρομές API του Next.js παρέχουν έναν ισχυρό και βολικό τρόπο για τη δημιουργία serverless backends απευθείας μέσα στην εφαρμογή σας Next.js. Αξιοποιώντας τα οφέλη της αρχιτεκτονικής serverless, μπορείτε να απλοποιήσετε την ανάπτυξη, να βελτιώσετε την απόδοση και να μειώσετε το κόστος. Είτε δημιουργείτε μια απλή φόρμα επικοινωνίας είτε μια σύνθετη πλατφόρμα ηλεκτρονικού εμπορίου, οι Διαδρομές API του Next.js μπορούν να σας βοηθήσουν να δημιουργήσετε ένα στιβαρό και επεκτάσιμο backend με ευκολία. Με μια στέρεη κατανόηση των βασικών αρχών και την εφαρμογή των βέλτιστων πρακτικών, μπορείτε να αξιοποιήσετε αυτό το ισχυρό εργαλείο για να δημιουργήσετε αποδοτικές, ασφαλείς και παγκοσμίως προσβάσιμες εφαρμογές.