Pengenalan kepada Next.js Middleware: Cara Ia Berfungsi dengan Contoh

Mari bincang tentang penghalaan dalam Nextjs. Hari ini, kita akan bercakap tentang salah satu perisian tengah perkara yang paling berkuasa. Middleware dalam Nextjs menawarkan cara yang berkuasa dan fleksibel untuk memintas permintaan daripada pelayan dan mengawal aliran permintaan (ubah hala, penulisan semula URL) dan meningkatkan ciri secara global seperti pengesahan, pengepala, ketekunan kuki.

Mencipta Middleware

Mari buat aplikasi Middleware Next.js. Pertama sekali, kami akan mencipta fail baharu untuk middleware seperti middleware.js atau middleware.ts, dalam folder src. Middleware dalam Next.js kemudiannya perlu membenarkan anda kawalan yang baik terhadap tempat ia akan aktif (iaitu konfigurasi pemadanan tersuai atau menggunakan fungsi isXXX)

Mengubah hala

Menggunakan ubah hala sebagai contoh, mari bayangkan senario di mana menavigasi ke /profile harus mengubah hala pengguna ke halaman utama. Dengan pendekatan konfigurasi pemadanan tersuai, kita boleh mencapainya dengan mengimport jenis yang diperlukan, mentakrifkan fungsi perisian tengah dan menentukan konfigurasi pemadan:

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

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

Dalam contoh ini, fungsi middleware menyemak sama ada laluan URL permintaan ialah /profile dan mengubah hala pengguna ke halaman utama.

Untuk pendekatan pernyataan bersyarat, kami boleh mengubah suai kod seperti berikut:

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

Dalam kes ini, middleware menyemak laluan URL permintaan dan mengubah hala pengguna ke laluan /hello jika laluannya ialah /profile.

Perisian tengah dalam Next.js melangkaui hanya mengendalikan ubah hala. Ia juga membenarkan penulisan semula URL, yang boleh berguna untuk sokongan URL lama atau pengoptimuman SEO. Dengan menukar ubah hala kepada menulis semula dalam contoh sebelumnya, URL dalam penyemak imbas akan kekal sama (/profile), tetapi kandungan respons akan bertukar kepada kandungan daripada laluan /hello.

Menggunakan Kuki

Akhir sekali, mari kita terokai penggunaan kuki dan pengepala dalam perisian tengah. Kami boleh mengubah suai perisian tengah kami untuk mengendalikan pilihan pengguna untuk tema dan menambah pengepala tersuai untuk semua respons:

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

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

Dalam contoh ini, kami mula-mula menyemak sama ada pengguna mempunyai pilihan tema yang disimpan dalam kuki. Jika tidak, kami menetapkan tema kepada 'gelap' dengan menambahkan kuki. Kemudian, kami menambah pengepala tersuai pada respons, yang boleh berguna untuk menghantar maklumat tambahan atau untuk tujuan penyahpepijatan.

Seperti yang anda lihat, middleware dalam Next.js ialah alat berkuasa yang membolehkan anda mengawal dan memintas kitaran permintaan-tindak balas dengan berkesan, mendayakan ubah hala, penulisan semula URL dan manipulasi pengepala dan kuki. Dengan menguasai perisian tengah, anda boleh meningkatkan pengalaman penghalaan dalam aplikasi Next.js anda dan mencipta pengalaman pengguna yang lebih mantap dan boleh disesuaikan.

"Middleware dalam Next.js ialah ciri berkuasa yang menawarkan cara yang teguh untuk memintas dan mengawal aliran permintaan dan respons dalam aplikasi anda." - Dokumentasi Next.js

Kesimpulan

Ringkasnya, kami telah mempelajari cara untuk mentakrifkan middleware dalam Next.js, meneroka dua pendekatan utama (konfigurasi pemadanan tersuai dan pernyataan bersyarat), dan menggunakan perisian tengah untuk mengendalikan ubah hala, penulisan semula URL dan pengurusan kuki dan pengepala . Pengetahuan ini akan membantu anda membawa aplikasi Next.js anda ke peringkat seterusnya dengan memanfaatkan fleksibiliti dan kawalan yang disediakan oleh middleware.

Atas ialah kandungan terperinci Pengenalan kepada Next.js Middleware: Cara Ia Berfungsi dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!