M

MLOG

Svenska

Lär dig hur du utnyttjar Next.js API Routes för att bygga serverlösa backends direkt i din Next.js-applikation. Denna guide täcker allt från grundläggande installation till avancerade tekniker för att hantera autentisering, datalagring och mer.

Next.js API Routes: Bygg din backend med lätthet

Next.js har revolutionerat frontend-utveckling med sina kraftfulla funktioner och intuitiva struktur. Men visste du att det också kan förenkla backend-utveckling avsevärt? Med Next.js API Routes kan du skapa serverlösa API-slutpunkter direkt i din Next.js-applikation, vilket i många fall eliminerar behovet av en separat backend-server. Denna omfattande guide går igenom processen för att bygga en robust och skalbar backend med hjälp av Next.js API Routes.

Vad är Next.js API Routes?

API Routes är serverlösa funktioner som du skapar i din /pages/api-katalog i ditt Next.js-projekt. Dessa funktioner hanterar inkommande HTTP-förfrågningar och returnerar svar, precis som ett traditionellt backend-API. Den stora skillnaden är att de driftsätts som serverlösa funktioner, vilket innebär att du inte behöver hantera servrar eller infrastruktur.

Tänk på dem som lätta, on-demand backend-funktioner som är sömlöst integrerade med din Next.js-frontend.

Fördelar med att använda Next.js API Routes

Komma igång med Next.js API Routes

Låt oss skapa en enkel API-route som returnerar ett JSON-svar. Se först till att du har ett Next.js-projekt uppsatt. Om inte, skapa ett med:

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

Skapa nu en fil med namnet hello.js i katalogen /pages/api:

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

Denna kod definierar en enkel API-route som svarar med ett JSON-objekt som innehåller namnet "John Doe". För att komma åt denna API-route, starta din Next.js-utvecklingsserver:

npm run dev

Öppna sedan din webbläsare och navigera till http://localhost:3000/api/hello. Du bör se följande JSON-svar:

{"name": "John Doe"}

Förstå API Route Handler

handler-funktionen i din API-route tar emot två argument:

Du kan använda dessa objekt för att hantera olika typer av förfrågningar, läsa data från förfråganskroppen, ställa in svars-headers och skicka olika typer av svar.

Hantera olika HTTP-metoder

Du kan använda egenskapen req.method för att avgöra HTTP-metoden för den inkommande förfrågan och hantera olika metoder därefter. Till exempel:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Hantera GET-förfrågan
    res.status(200).json({ message: 'Detta är en GET-förfrågan' })
  } else if (req.method === 'POST') {
    // Hantera POST-förfrågan
    res.status(200).json({ message: 'Detta är en POST-förfrågan' })
  } else {
    // Hantera andra metoder
    res.status(405).json({ message: 'Metoden är inte tillåten' })
  }
}

I detta exempel hanterar API-routen både GET- och POST-förfrågningar. Om anropsmetoden är GET svarar den med ett JSON-objekt som innehåller meddelandet "Detta är en GET-förfrågan". Om anropsmetoden är POST svarar den med ett JSON-objekt som innehåller meddelandet "Detta är en POST-förfrågan". Om anropsmetoden är något annat svarar den med ett 405 Method Not Allowed-fel.

Läsa data från förfråganskroppen

För POST-, PUT- och PATCH-förfrågningar behöver du ofta läsa data från förfråganskroppen. Next.js har inbyggt stöd för att tolka JSON- och URL-kodade förfråganskroppar. För att tolka en JSON-förfråganskropp kan du använda egenskapen req.body. Till exempel:

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

    // Bearbeta datan
    console.log('Namn:', name)
    console.log('E-post:', email)

    res.status(200).json({ message: 'Data mottogs framgångsrikt' })
  } else {
    res.status(405).json({ message: 'Metoden är inte tillåten' })
  }
}

För att testa denna API-route kan du använda ett verktyg som Postman eller curl för att skicka en POST-förfrågan med en JSON-kropp:

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

Ställa in svars-headers

Du kan använda metoden res.setHeader() för att ställa in svars-headers. Detta är användbart för att ställa in innehållstyp, cache-kontroll och annan viktig information. Till exempel:

// 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: 'Hej, världen!' })
}

I detta exempel ställer API-routen in Content-Type-headern till application/json, vilket indikerar att svaret är ett JSON-objekt. Den ställer också in Cache-Control-headern till s-maxage=3600, vilket talar om för webbläsaren och CDN att cachelagra svaret i upp till 1 timme.

Felhantering

Det är viktigt att hantera fel på ett elegant sätt i dina API-routes. Du kan använda try-catch-block för att fånga undantag och skicka lämpliga felsvar till klienten. Till exempel:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulera ett fel
    throw new Error('Något gick fel')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internt serverfel' })
  }
}

I detta exempel simulerar API-routen ett fel genom att kasta ett nytt Error-objekt. Catch-blocket fångar felet, loggar det till konsolen och skickar ett 500 Internal Server Error-svar till klienten. Överväg att använda ett robust loggningssystem som Sentry eller Datadog för produktionsmiljöer.

Ansluta till en databas

Ett av de vanligaste användningsfallen för API-routes är att ansluta till en databas. Next.js API Routes integreras sömlöst med olika databaser, inklusive:

Här är ett exempel på hur man ansluter till en MongoDB-databas i en Next.js API-route:

// 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('Vänligen lägg till din Mongo URI i .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // I utvecklingsläge, använd en global variabel så att värdet
  // bevaras över modul-omladdningar orsakade av HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // I produktionsläge är det bäst att inte använda en global variabel.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Exportera ett modul-scopat MongoClient-löfte. Genom att göra detta i en
// separat modul kan klienten säkert återanvändas över flera
// funktioner. Se: 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: 'Misslyckades med att hämta användare' })
  }
}

Innan du kör denna kod, se till att du har mongodb-paketet installerat:

npm install mongodb

Du behöver också ställa in miljövariablerna MONGODB_URI och MONGODB_DB. Dessa variabler bör definieras i din .env.local-fil (eller din värdleverantörs inställningar för miljövariabler för produktion). MONGODB_URI innehåller anslutningssträngen till din MongoDB-databas, och MONGODB_DB specificerar databasnamnet.

Autentisering och auktorisering

Att skydda dina API-routes är avgörande för säkerheten. Next.js API Routes kan säkras med olika autentiserings- och auktoriseringstekniker, inklusive:

Här är ett exempel på hur man skyddar en API-route med JWT-autentisering:

// 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: 'Obehörig' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded"-objektet innehåller användarinformationen som är inbäddad i token
    // Till exempel: const userId = decoded.userId;

    // Fortsätt bearbeta förfrågan
    res.status(200).json({ message: 'Skyddad resurs har nåtts framgångsrikt' })
  } catch (error) {
    return res.status(401).json({ message: 'Ogiltig token' })
  }
}

Innan du kör denna kod, se till att du har jsonwebtoken-paketet installerat:

npm install jsonwebtoken

Du behöver också ställa in miljövariabeln JWT_SECRET. Detta bör vara en stark, slumpmässigt genererad hemlig nyckel som används för att signera och verifiera JWTs. Förvara denna säkert och exponera den aldrig i din klient-sidokod.

Middleware

Även om Next.js inte erbjuder traditionell middleware för API-routes på samma sätt som Express.js, kan du uppnå liknande funktionalitet genom att slå in dina API-route handlers med återanvändbara funktioner. Detta gör att du kan utföra uppgifter som:

Här är ett exempel på hur man skapar en enkel loggnings-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)
  }
}

För att använda denna middleware, slå helt enkelt in din API-route handler med withLogging-funktionen:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Denna förfrågan loggades' })
}

export default withLogging(handler)

Bästa praxis för att bygga Next.js API Routes

Avancerade tekniker

Bakgrundsjobb

För långvariga uppgifter som inte bör blockera API-svaret, överväg att använda bakgrundsjobb. Du kan använda bibliotek som BullMQ eller Bree för att hantera dina bakgrundsjobb och bearbeta dem asynkront.

WebSockets

För realtidsapplikationer kan du använda WebSockets i dina Next.js API-routes. Bibliotek som Socket.IO och ws gör det enkelt att etablera beständiga anslutningar mellan klienten och servern.

GraphQL

Om du behöver ett mer flexibelt och effektivt sätt att hämta data, överväg att använda GraphQL. Du kan använda bibliotek som Apollo Server eller Yoga för att skapa en GraphQL API-slutpunkt i din Next.js-applikation.

Slutsats

Next.js API Routes erbjuder ett kraftfullt och bekvämt sätt att bygga serverlösa backends direkt i din Next.js-applikation. Genom att utnyttja fördelarna med serverlös arkitektur kan du förenkla utvecklingen, förbättra prestandan och minska kostnaderna. Oavsett om du bygger ett enkelt kontaktformulär eller en komplex e-handelsplattform kan Next.js API Routes hjälpa dig att skapa en robust och skalbar backend med lätthet. Med en solid förståelse för grunderna och tillämpningen av bästa praxis kan du utnyttja detta kraftfulla verktyg för att skapa effektiva, säkra och globalt tillgängliga applikationer.

Next.js API Routes: Bygg din backend med lätthet | MLOG