M

MLOG

Svenska

Utforska Next.js API Routes och lås upp full-stack-utvecklingsmöjligheter i dina React-applikationer. Lär dig mönster, bästa praxis och driftsättningsstrategier.

Next.js API Routes: Utvecklingsmönster för full-stack

Next.js har revolutionerat React-utveckling genom att erbjuda ett robust ramverk för att bygga högpresterande och skalbara webbapplikationer. En av dess nyckelfunktioner är API Routes, som gör det möjligt för utvecklare att skapa backend-funktionalitet direkt i sina Next.js-projekt. Detta tillvägagångssätt effektiviserar utvecklingen, förenklar driftsättning och låser upp kraftfulla full-stack-möjligheter.

Vad är Next.js API Routes?

Next.js API Routes är serverlösa funktioner som skrivs direkt i din /pages/api-katalog. Varje fil i denna katalog blir en API-slutpunkt, som automatiskt dirigerar HTTP-förfrågningar till sin motsvarande funktion. Detta eliminerar behovet av en separat backend-server, vilket förenklar din applikationsarkitektur och minskar den operativa bördan.

Tänk på dem som miniatyr-serverlösa funktioner som bor inuti din Next.js-app. De svarar på HTTP-förfrågningar som GET, POST, PUT, DELETE och kan interagera med databaser, externa API:er och andra server-side-resurser. Avgörande är att de endast körs på servern, inte i användarens webbläsare, vilket garanterar säkerheten för känslig data som API-nycklar.

Huvudfördelar med API Routes

Komma igång med API Routes

Att skapa en API-route i Next.js är enkelt. Skapa helt enkelt en ny fil i katalogen /pages/api. Filnamnet bestämmer routens sökväg. Till exempel, att skapa en fil med namnet /pages/api/hello.js skapar en API-slutpunkt som är tillgänglig på /api/hello.

Exempel: Ett enkelt hälsnings-API

Här är ett grundläggande exempel på en API-route som returnerar ett JSON-svar:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hej från Next.js API Route!' });
}

Denna kod definierar en asynkron funktion handler som tar emot två argument:

Funktionen sätter HTTP-statuskoden till 200 (OK) och returnerar ett JSON-svar med ett meddelande.

Hantera olika HTTP-metoder

Du kan hantera olika HTTP-metoder (GET, POST, PUT, DELETE, etc.) i din API-route genom att kontrollera egenskapen req.method. Detta gör att du enkelt kan skapa RESTful API:er.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Hämta alla todos från databasen
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Skapa en ny todo
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Hantera metoder som inte stöds
    res.status(405).json({ message: 'Metoden är inte tillåten' });
  }
}

Detta exempel visar hur man hanterar GET- och POST-förfrågningar för en hypotetisk /api/todos-slutpunkt. Det inkluderar även felhantering för metoder som inte stöds.

Utvecklingsmönster för full-stack med API Routes

Next.js API Routes möjliggör olika utvecklingsmönster för full-stack. Här är några vanliga användningsfall:

1. Datahämtning och -manipulering

API Routes kan användas för att hämta data från databaser, externa API:er eller andra datakällor. De kan också användas för att manipulera data, som att skapa, uppdatera eller radera poster.

Exempel: Hämta användardata från en databas


// 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: 'Användaren hittades inte' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internt serverfel' });
  }
}

Detta exempel hämtar användardata från en databas baserat på användar-ID:t som anges i URL:en. Det använder ett databasfrågebibliotek (förutsätts finnas i lib/db) för att interagera med databasen. Notera användningen av parametriserade frågor för att förhindra SQL-injektionssårbarheter.

2. Autentisering och auktorisering

API Routes kan användas för att implementera logik för autentisering och auktorisering. Du kan använda dem för att verifiera användaruppgifter, generera JWT-tokens och skydda känsliga resurser.

Exempel: Användarautentisering


// 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: 'Ogiltiga inloggningsuppgifter' });
      }

      const user = results[0];

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

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Ogiltiga inloggningsuppgifter' });
      }

      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: 'Internt serverfel' });
    }
  } else {
    res.status(405).json({ message: 'Metoden är inte tillåten' });
  }
}

Detta exempel autentiserar användare genom att jämföra det angivna lösenordet med det lagrade, hashade lösenordet i databasen. Om uppgifterna är giltiga genererar det en JWT-token och returnerar den till klienten. Klienten kan sedan använda denna token för att autentisera efterföljande förfrågningar.

3. Formulärhantering och datainsändning

API Routes kan användas för att hantera formulärinskick och bearbeta data som skickas från klienten. Detta är användbart för att skapa kontaktformulär, registreringsformulär och andra interaktiva element.

Exempel: Insändning av kontaktformulär


// 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: 'Nytt meddelande från kontaktformulär',
        text: `Namn: ${name}\nE-post: ${email}\nMeddelande: ${message}`,
      });

      res.status(200).json({ message: 'E-postmeddelandet skickades' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Det gick inte att skicka e-postmeddelandet' });
    }
  } else {
    res.status(405).json({ message: 'Metoden är inte tillåten' });
  }
}

Detta exempel hanterar insändning av ett kontaktformulär genom att skicka ett e-postmeddelande till administratören. Det använder ett e-postbibliotek (förutsätts finnas i lib/email) för att skicka meddelandet. Du bör ersätta admin@example.com med den faktiska mottagarens e-postadress.

4. Webhooks och händelsehantering

API Routes kan användas för att hantera webhooks och svara på händelser från externa tjänster. Detta gör att du kan integrera din Next.js-applikation med andra plattformar och automatisera uppgifter.

Exempel: Hantera en Stripe Webhook


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

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

export const config = {
  api: {
    bodyParser: false, // Inaktivera standard body parsing
  },
};

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(`Webhook-fel: ${err.message}`);
      res.status(400).send(`Webhook-fel: ${err.message}`);
      return;
    }

    // Hantera händelsen
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent för ${paymentIntent.amount} lyckades!`);
        // Definiera och anropa sedan en metod för att hantera den lyckade betalningsavsikten.
        // hanteraLyckadBetalningsavsikt(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Definiera och anropa sedan en metod för att hantera den lyckade anslutningen av en PaymentMethod.
        // hanteraAnslutenBetalningsmetod(paymentMethod);
        break;
      default:
        // Oväntad händelsetyp
        console.log(`Ohanterad händelsetyp ${event.type}.`);
    }

    // Returnera ett 200-svar för att bekräfta mottagandet av händelsen
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Metoden är inte tillåten');
  }
}

Detta exempel hanterar en Stripe webhook genom att verifiera signaturen och bearbeta händelsedatan. Det inaktiverar standard-body-parsern och använder en anpassad buffertfunktion för att läsa den råa request body. Det är avgörande att inaktivera standard-body-parsern eftersom Stripe kräver den råa body för signaturverifiering. Kom ihåg att konfigurera din Stripe webhook-slutpunkt i din Stripe-instrumentpanel och ställa in miljövariabeln STRIPE_WEBHOOK_SECRET.

Bästa praxis för API Routes

För att säkerställa kvaliteten och underhållbarheten hos dina API Routes, följ dessa bästa praxis:

1. Modularisera din kod

Undvik att skriva stora, monolitiska API-routes. Bryt istället ner din kod i mindre, återanvändbara moduler. Detta gör din kod lättare att förstå, testa och underhålla.

2. Implementera felhantering

Hantera fel korrekt i dina API-routes. Använd try...catch-block för att fånga undantag och returnera lämpliga felsvar till klienten. Logga fel för att hjälpa till med felsökning och övervakning.

3. Validera indata

Validera alltid indata från klienten för att förhindra säkerhetssårbarheter och säkerställa dataintegritet. Använd valideringsbibliotek som Joi eller Yup för att definiera valideringsscheman och upprätthålla databegränsningar.

4. Skydda känslig data

Lagra känslig data, som API-nycklar och databasuppgifter, i miljövariabler. Checka aldrig in känslig data i ditt kod-repository.

5. Implementera rate limiting

Skydda dina API-routes från missbruk genom att implementera rate limiting. Detta begränsar antalet förfrågningar som en klient kan göra inom en given tidsperiod. Använd rate limiting-bibliotek som express-rate-limit eller limiter.

6. Säkra API-nycklar

Exponera inte API-nycklar direkt i klientsidig kod. Använd alltid dina API-routes som en proxy för förfrågningar för att skydda dina API-nycklar från obehörig åtkomst. Lagra API-nycklar säkert i miljövariabler på din server.

7. Använd miljövariabler

Undvik att hårdkoda konfigurationsvärden i din kod. Använd istället miljövariabler för att lagra konfigurationsinställningar. Detta gör det enklare att hantera din applikation i olika miljöer (utveckling, staging, produktion).

8. Loggning och övervakning

Implementera loggning och övervakning för att spåra prestandan hos dina API-routes. Logga viktiga händelser, som fel, varningar och lyckade förfrågningar. Använd övervakningsverktyg för att spåra mätvärden som svarstid, felfrekvens och resursanvändning. Tjänster som Sentry, Datadog eller New Relic kan vara till hjälp.

Driftsättningsöverväganden

Next.js API Routes är utformade för att driftsättas på serverlösa plattformar. Populära driftsättningsalternativ inkluderar:

När du driftsätter din Next.js-applikation med API Routes, se till att dina miljövariabler är korrekt konfigurerade på driftsättningsplattformen. Tänk också på kallstartstiden för serverlösa funktioner, vilket kan påverka den initiala svarstiden för dina API-routes. Att optimera din kod och använda tekniker som provisionerad samtidighet kan hjälpa till att mildra problem med kallstarter.

Slutsats

Next.js API Routes erbjuder ett kraftfullt och bekvämt sätt att bygga full-stack-applikationer med React. Genom att utnyttja serverlösa funktioner kan du förenkla utvecklingen, minska den operativa bördan och förbättra applikationens prestanda. Genom att följa de bästa praxis som beskrivs i denna artikel kan du skapa robusta och underhållbara API Routes som driver dina Next.js-applikationer.

Oavsett om du bygger ett enkelt kontaktformulär eller en komplex e-handelsplattform kan Next.js API Routes hjälpa dig att effektivisera din utvecklingsprocess och leverera exceptionella användarupplevelser.

Vidare lärande