Pengantar middleware-beragampengetahuan Next.js – Beragampengetahuan

Mari kita bicara tentang perutean di Next.js. Hari ini, kita akan membahas salah satu hal paling hebat yang ada: middleware. Middleware di Next.js menyediakan cara yang ampuh dan fleksibel untuk mencegat permintaan dari server dan mengontrol aliran permintaan (pengalihan, penulisan ulang URL) dan meningkatkan fitur secara global seperti otentikasi, header, dan persistensi cookie.

Buat perangkat tengah

Mari kita membuat aplikasi Middleware Next.js. Pertama kita akan membuat file baru untuk middleware, misalnya middleware.js atau middleware.tsdi folder src. Middleware di Next.js perlu memberi Anda kendali penuh atas tempat aktivasinya (yaitu konfigurasi pencocokan khusus, atau menggunakan fungsi isXXX)

Pengalihan

Mengambil pengalihan sebagai contoh, mari kita bayangkan sebuah skenario: Navigasikan ke /profile Pengguna harus diarahkan ke beranda. Dengan menggunakan metode konfigurasi pencocokan khusus, kita dapat mencapainya dengan mengimpor tipe yang diperlukan, menentukan fungsi middleware, dan menentukan konfigurasi pencocokan:

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 memeriksa apakah jalur URL permintaan tersebut /profile dan mengarahkan pengguna ke beranda.

Untuk metode pernyataan bersyarat, kita dapat memodifikasi kode sebagai 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 hal ini, middleware memeriksa jalur URL permintaan dan mengarahkan pengguna ke sana /hello rute jika jalurnya /profile.

Middleware di Next.js melakukan lebih dari sekedar menangani pengalihan. Ini juga memungkinkan penulisan ulang URL, yang berguna untuk dukungan URL lama atau optimasi SEO. dengan mengubah redirect tiba rewrite Pada contoh sebelumnya, URL di browser akan tetap sama (/profile), tetapi konten tanggapannya menjadi /hello rute.

Gunakan cookie

Terakhir, mari kita jelajahi penggunaan cookie dan header di middleware. Kita dapat memodifikasi middleware untuk menangani preferensi pengguna terhadap tema dan menambahkan header khusus ke 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, pertama-tama kami memeriksa apakah pengguna memiliki preferensi tema yang disimpan dalam cookie. Jika tidak, kami menyetel tema menjadi “gelap” dengan menambahkan cookie. Kami kemudian menambahkan header khusus ke respons, yang dapat berguna untuk menyampaikan informasi tambahan atau untuk tujuan debugging.

Seperti yang Anda lihat, middleware di Next.js adalah alat canggih yang memungkinkan Anda mengontrol dan mencegat siklus respons permintaan secara efektif, mengaktifkan pengalihan, penulisan ulang URL, dan manipulasi header dan cookie. Dengan menguasai middleware, Anda dapat meningkatkan pengalaman perutean di aplikasi Next.js dan menciptakan pengalaman pengguna yang lebih kuat dan dapat disesuaikan.

“Middleware di Next.js adalah fitur canggih yang menyediakan cara ampuh untuk mencegat dan mengontrol aliran permintaan dan respons dalam aplikasi — dokumentasi Next.js.”

sebagai kesimpulan

Singkatnya, kita mempelajari cara mendefinisikan middleware di Next.js, menjelajahi dua pendekatan utama (konfigurasi pencocokan khusus dan pernyataan kondisional), dan menerapkan middleware untuk menangani pengalihan, penulisan ulang URL, dan pengelolaan cookie dan header. Pengetahuan ini akan membantu Anda membawa aplikasi Next.js ke tingkat berikutnya dengan fleksibilitas dan kontrol yang disediakan oleh middleware.