Die Middleware befindet sich noch im Beta-Stadium, so dass es noch einige Fehler geben könnte.
Es gab viele neue Funktionen und Optimierungen, aber in diesem Blog werden wir uns auf die neue Beta-Version der Nextjs-Middleware und Edge-Funktionen konzentrieren.
Lesen Sie auch: Mean Stack Interview Fragen
Randfunktionen
Wenn Sie schon einmal Erfahrung mit Serverless-Funktionen gemacht haben, wird Ihnen das bekannt vorkommen.
Bevor wir zu den Edge-Funktionen kommen, sollten wir zunächst besprechen, wie nextjs im Moment funktioniert. Es gibt zwei Arten von Seiten, eine mit statischem Inhalt und eine mit dynamischem.
Statische Inhalte werden schnell gerendert, da sie von einem CDN bereitgestellt werden. Der Nachteil von CDN ist, dass unsere Inhalte nicht personalisiert und dynamisch sind.
Dynamische Inhalte hingegen sind personalisierter, aber nicht schnell, da der Inhalt von einem entfernten Server abgefragt werden muss. Wenn der Server in den USA steht und eine Anfrage aus einem asiatischen Land kommt, kann es einige Zeit dauern, bis die Daten abgerufen und die Seite gerendert ist.
Edge-Funktionen lösen dieses Problem und sind so schnell wie CDN mit dynamischen Seiten. Edge-Funktionen befinden sich zwischen dem Benutzer und dem Ursprungsserver. Im Gegensatz zu regulären Servern sind die Edge-Funktionen näher am Benutzer, um die beste Leistung zu erzielen.
Die nächste Funktion, die zusammen mit Edge-Funktionen veröffentlicht wurde, war Middleware. Sie laufen auf Edge-Funktionen, die es in vollem Umfang nutzen würde bedeuten.
Lesen Sie auch: Statische Erzeugung in NextJS
Middleware
Das Konzept der Middleware ist nicht neu, da es sowohl im Backend als auch im Frontend eingesetzt wird. Nextjs führte Middleware ein, die auf Edge-Funktionen läuft.
Die Middleware würde vor jeder Anfrage, die auf Nextjs gemacht wurde, laufen. Wenn also der Benutzer eine Seite oder eine API-Route anfordert, wird die Middleware-Logik direkt vor der Anforderung ausgeführt. Dies würde das Problem der gemeinsamen Anmeldung in der gesamten Anwendung lösen, wie z.B. Authentifizierung, Bot-Schutz, Umleitungen, Browser-Unterstützung, Feature-Flags, A/B-Tests, serverseitige Analysen, Logging.
Die Middleware läuft auf Runtime v8. Das würde bedeuten, dass wir Web-Apis wie Fetch etc. verwenden können. Mit Middleware können wir Rewrite, Redirect, Header hinzufügen, html streamen.
Sie läuft standardmäßig auf Anwendungen, die auf vercel gehostet werden, kann aber auch auf anderen Servern mit next start
Für den Einstieg in die middleware müssen Sie eine Datei erstellen _middleware.js oder _middleware.ts unter Seiten oder Api. Das Beste an Middleware ist, dass sie auf begrenzte Routen beschränkt werden kann. Wenn wir zum Beispiel Middleware für den Bereich blog/[id] hinzufügen müssen, dann _middleware Datei muss im Blog-Ordner erstellt werden.
Lassen Sie uns einige der Anwendungsfälle von Middleware erläutern.
//Middleware that block the content for specific country.
export function middleware(req: NextRequest) {
const country = req.geo.country || 'UK'
if (country === 'US) {
return new Response('Blocked for Geo fencing reasons', { status: 451 })
}
return new Response(`Greetings from ${country}, where you are not blocked.`)
}//Middleware that Rewrites the url along with country and city of user
export async function middleware(req: NextRequest) {
const { nextUrl: url, geo } = req
const country = geo.country || 'US'
const city = geo.city || 'San Francisco'
url.searchParams.set('country', country)
url.searchParams.set('city', city)
return NextResponse.rewrite(url)
}Fazit
Middleware ist die Funktion der nächsten Generation und hat einen großen Nutzen in modernen Anwendungen. Sie löst grundlegende Probleme wie Authentifizierung, Geolokalisierung usw. sehr effizient. Mit Hilfe der Edge-Funktion würde die Middleware schneller laufen als statische Webanwendungen. Beachten Sie, dass die Middleware noch in der Beta-Version ist, so dass es noch einige Fehler gibt.
