Perisian tengah Next.js menawarkan penyesuaian yang hebat untuk pengendalian permintaan dalam aplikasi anda. Ia membenarkan pemintasan permintaan untuk melakukan tindakan seperti pengesahan sesi, pengelogan dan caching. Walau bagaimanapun, pelaksanaan perisian tengah yang tidak cekap boleh menjejaskan prestasi dengan teruk. Panduan ini menjelaskan fungsi perisian tengah dan amalan terbaik, membantu anda memahami masa dan cara memanfaatkannya dengan berkesan.

Apakah Next.js Middleware?

Perisian tengah Next.js terdiri daripada fungsi yang dilaksanakan secara automatik untuk setiap permintaan yang masuk. Fungsi ini memeriksa dan mengubah suai data permintaan sebelum ia mencapai sistem penghalaan aplikasi anda. Aplikasi termasuk pengesahan, pengelogan dan pengurusan ralat. Contohnya, middleware boleh mengesahkan sesi pengguna dengan menyemak token, menghalang akses tanpa kebenaran.

Perisian tengah Next.js sangat fleksibel dan boleh disesuaikan. Anda boleh mencipta fungsi yang disesuaikan untuk memenuhi keperluan aplikasi tertentu, menetapkan tetapan atau dasar seluruh aplikasi. Ini memudahkan konfigurasi penghalaan, mengelakkan persediaan berbilang lapisan yang kompleks. Menggunakan perisian tengah menghasilkan aplikasi yang lebih mantap, berskala dan boleh diselenggara.

Tempahan Pemprosesan Perisian Tengah Next.js

Memahami susunan operasi apabila permintaan diterima adalah penting:

1. Pengepala: next.config.js pengepala digunakan dahulu, menetapkan pengepala permintaan awal. Ini sesuai untuk pengepala keselamatan seperti Dasar Keselamatan Kandungan (CSP) atau CORS.

2. Ubah hala: next.config.js ubah hala diproses seterusnya, memetakan permintaan ke URL yang berbeza. Ini mengendalikan penulisan semula URL dan ubah hala, mengurus peraturan penghalaan merentas halaman atau keseluruhan aplikasi.

3. Penilaian Perisian Tengah: Selepas pengepala dan ubah hala, perisian tengah dinilai dan logiknya dilaksanakan.

4. beforeFiles: next.config.js beforeFiles (tulisan semula) digunakan, membolehkan penulisan semula selanjutnya atau logik khusus fail sebelum penghalaan.

5. Laluan Sistem Fail: Laluan sistem fail aplikasi diproses (cth., public/, _next/static/, halaman dan apl). Fail statik disediakan di sini.

6. afterFiles: next.config.js afterFiles (tulisan semula) digunakan, menawarkan titik pengubahsuaian terakhir sebelum penghalaan dinamik.

7. Laluan Dinamik: Laluan dinamik (cth., /blog/[slug]) dikendalikan. Ini memerlukan pengendalian dan penulisan semula khusus untuk pembolehubah atau parameter.

8. Sandaran: next.config.js sandaran digunakan, mengurus permintaan yang tidak boleh dihalakan sebaliknya. Ini membenarkan pengendali ralat atau laluan sandaran.

Kes Penggunaan Pertengahan Next.js Biasa

• Pengesahan: Sahkan kelayakan pengguna sebelum mengakses sumber yang dilindungi. Middleware boleh menyemak token sesi, mengubah hala pengguna yang tidak disahkan untuk log masuk. Kerani menggunakan pendekatan ini dengan berkesan.

• Log: Jejaki peristiwa aplikasi (tindakan pengguna, ralat) dengan mengelog setiap permintaan ke pelayan pusat untuk analisis dan penyahpepijatan.

• Pengambilan Data: (Dengan pengehadan) Muatkan data daripada API atau pangkalan data untuk mendapatkan maklumat terkini. Perhatikan pertimbangan prestasi yang dibincangkan kemudian.

• Permintaan Penghalaan: Peribadikan penghalaan, ubah hala permintaan ke laluan tertentu atau laksanakan pengendali ralat tangkap semua.

• Caching: Tingkatkan prestasi dengan menyimpan sumber yang kerap diakses dalam ingatan, mengurangkan permintaan. (Contoh kod disediakan dalam teks asal)

• Penghadan Kadar: Pantau permintaan daripada pengguna atau alamat IP, menyekat permintaan yang berlebihan untuk melindungi sumber bahagian belakang.

• Perubahan Halaman: Tulis semula HTML atau ubah data dalam masa nyata. Ini berguna untuk menulis semula URL imej atau menyediakan aset daripada domain yang berbeza.

• Analitik/Pelaporan: Jejaki gelagat pengguna dan prestasi aplikasi untuk pengoptimuman. Middleware boleh mengubah suai kuki untuk penyepaduan analitis pihak ketiga.

• Pengantarabangsaan: Menyampaikan kandungan dalam berbilang bahasa berdasarkan tempat pengguna (cth., menggunakan alamat IP atau pengepala HTTP).

Menggunakan Middleware dalam Projek Next.js

Perisian tengah dilaksanakan dengan mencipta fail middleware.ts pada akar projek. Fail ini mentakrifkan fungsi perisian tengah dan (sebagai pilihan) pemadan.

Fungsi Middleware

Fungsi middleware mengandungi logik middleware. Ia memerlukan request sebagai input dan mengembalikan response.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}

Contoh permintaan ubah hala ke /dashboard melainkan ia bermula dengan /api:

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

Fungsi mesti kembali: NextResponse.next(), NextResponse.redirect(), NextResponse.rewrite(), NextResponse.json() atau tersuai Response/NextResponse.

Penjodoh

Pemadan menentukan permintaan yang diproses oleh perisian tengah. Ia ditakrifkan dalam objek config:

export const config = {
  matcher: '/hello', // Matches only /hello
}

Anda boleh menggunakan tatasusunan untuk berbilang laluan atau ungkapan biasa untuk pemadanan yang lebih kompleks:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}

Tanpa pemadan, perisian tengah digunakan pada semua laluan, yang berpotensi menjejaskan prestasi.

Menggabungkan Berbilang Fungsi Middleware

Next.js hanya menyokong satu fail middleware. Untuk menggunakan berbilang fungsi, cipta fungsi berasingan dan panggilnya secara berurutan, mengembalikan respons jika satu dijana:

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

Kerani dan Next.js Middleware

Kerani memudahkan pengesahan dengan menyediakan clerkMiddleware:

export const config = {
  matcher: '/hello', // Matches only /hello
}

Ini mengendalikan penghuraian kuki dan pengesahan pengguna. Anda boleh memanjangkannya dengan logik tersuai:

export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}

Penghadan Next.js Middleware

• Kekangan Masa Jalanan Tepi: Perisian Tengah berjalan pada Masa Jalanan Tepi, mengehadkan API dan perpustakaan yang tersedia. Akses sistem fail tidak dibenarkan.

• Sekatan Saiz: Fungsi middleware adalah terhad kepada 1MB.

• Modul ES Sahaja: Hanya modul ES disokong.

• Tiada Penilaian Rentetan: eval dan new Function(evalString) tidak dibenarkan.

• Pertimbangan Prestasi: Perisian tengah yang kompleks boleh menjejaskan prestasi secara negatif. Akses pangkalan data dalam perisian tengah biasanya tidak digalakkan.

• Akses Terhad kepada Permintaan/Respons: Middleware tidak mempunyai akses penuh kepada objek permintaan dan respons.

Kesimpulan

Panduan ini memberikan pemahaman menyeluruh tentang perisian tengah Next.js, keupayaan, had dan amalan terbaiknya. Ingat untuk mengutamakan kod yang cekap untuk mengelakkan kesesakan prestasi.

Atas ialah kandungan terperinci Apakah middleware dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!