Frontend Academy · Pelajaran

Laluan API dan Middleware Next.js

Cipta titik akhir API tanpa pelayan dalam direktori api/, proses permintaan dalam Route Handlers, dan jalankan Middleware pada edge untuk pengesahan serta ubah hala.

Pelajaran 4 daripada 414 langkah

Laluan API dan Middleware Next.js ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Mengapa Laluan API?

Next.js menyertakan pelayan bersama aplikasi Anda — Anda boleh menulis titik akhir bahagian belakang bersebelahan halaman tanpa projek Node berasingan. Sesuai untuk bertindak sebagai proksi, penghantaran borang, webhook, dan API kecil.

Laluan API Penghala Halaman

Fail dalam pages/api/ mengeksport fungsi lalai dengan (req, res) bergaya Express.

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    return res.json(users);
  }
  if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    return res.status(201).json(user);
  }
  return res.status(405).end();
}

Pengendali Laluan Penghala Aplikasi

Penghala Aplikasi menggunakan API Request/Response piawai Web. Setiap kaedah HTTP ialah eksport bernama.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Laluan API Dinamik

Segmen dinamik berfungsi dengan cara yang sama: app/api/users/[id]/route.ts sepadan dengan /api/users/123.

// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
  const user = await db.users.findUnique({ where: { id: params.id }});
  if (!user) return new Response('Not Found', { status: 404 });
  return Response.json(user);
}

Membaca Kuki dan Pengepala

Dalam Penghala Aplikasi, gunakan pembantu daripada next/headers (berskop permintaan).

import { cookies, headers } from 'next/headers';

export async function GET() {
  const token = cookies().get('token')?.value;
  const userAgent = headers().get('user-agent');
  // ...
}

Respons Penstriman

Pengendali laluan boleh memulangkan respons penstriman — berguna untuk penyiapan sembang AI atau penjanaan fail besar.

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`chunk ${i}\n`));
        await new Promise(r => setTimeout(r, 500));
      }
      controller.close();
    }
  });
  return new Response(stream);
}

Perisian Perantara — Jalankan Sebelum Laluan

middleware.ts di akar projek berjalan sebelum permintaan sampai ke halaman atau laluan API. Gunakannya untuk pemeriksaan pengesahan, pengalihan, penulisan semula pengepala, dan ujian A/B.

// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

Pemadan Perisian Perantara

Hadkan laluan yang menjalankan perisian perantara dengan konfigurasi pemadan.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/:path*',
    '/((?!_next/static|_next/image|favicon.ico).*)'
  ]
};

Masa Jalan Perisian Perantara

Perisian perantara berjalan pada Masa Jalan Edge secara lalai — pengasing V8 ringan (bukan Node penuh). API yang tersedia adalah terhad: tiada modul Node seperti fs dan tiada kebergantungan natif.

Corak Pengesahan dengan Perisian Perantara

Lazimnya: sahkan JWT dalam perisian perantara, alihkan ke halaman log masuk jika tiada atau tidak sah, dan lampirkan pengguna yang decoded pada pengepala permintaan yang boleh dibaca oleh laluan seterusnya.

import jwt from 'jsonwebtoken';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  try {
    const decoded = jwt.verify(token, process.env.SECRET!);
    const res = NextResponse.next();
    res.headers.set('x-user-id', String(decoded.sub));
    return res;
  } catch {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

Pengehad Kadar dalam Perisian Perantara

Gabungkan perisian perantara dengan stor KV (Upstash, Vercel KV) untuk menguatkuasakan had kadar bagi setiap IP sebelum mencapai logik API Anda.

Bila TIDAK Patut Menggunakan Laluan API

Untuk perkhidmatan mikro berasingan atau API yang dikongsi, gunakan bahagian belakang sebenar (Hono, Express, NestJS). Laluan API Next.js sangat sesuai untuk bertindak sebagai proksi, webhook, dan titik akhir khusus aplikasi — bukan untuk menyediakan API awam kepada klien lain.

Semakan Pantas

Di manakah perisian perantara Next.js berjalan, dan apakah kes penggunaan yang paling lazim?

Jawab dalam pelajaran interaktif

Imbas Kembali: Laluan API dan Perisian Perantara

Penghala Halaman: pages/api dengan req/res. Penghala Aplikasi: app/api/.../route.ts dengan eksport kaedah (GET/POST/dan sebagainya) menggunakan Request/Response. Baca kuki/pengepala melalui next/headers. Respons penstriman dengan ReadableStream. middleware.ts berjalan pada Edge sebelum laluan — pengesahan, pengalihan, pengepala. Konfigurasi pemadan mengehadkan laluan. Gunakan bahagian belakang sebenar untuk API awam.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Laluan API dan Middleware Next.js” percuma?

Ya — teks penuh “Laluan API dan Middleware Next.js” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Laluan API dan Middleware Next.js”?

Cipta titik akhir API tanpa pelayan dalam direktori api/, proses permintaan dalam Route Handlers, dan jalankan Middleware pada edge untuk pengesahan serta ubah hala. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Laluan API dan Middleware Next.js” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy