middleware

next.js允许你在请求完成之前，编写中间件。你可以重写、重定向、修改请求或响应标头。

目录结构

middleware.js 文件必须放放在和app目录同级的目录中。

src
├── app
├── middleware.ts

import { NextResponse } from 'next/server'
 
export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

config.matcher

你可以使用config.matcher来匹配请求, 只有匹配的请求才会执行中间件。

export const config = {
    // 只有/about和/contact请求才会执行中间件
    matcher: ['/about', '/contact'],
    // 正则匹配，排除api、_next/static、_next/image、*.png请求
    matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']
}

修改请求

重写请求

import { NextResponse } from 'next/server'
 
export function middleware(request) {
    const {pathname} = request.nextUrl;

    // 重写请求
    if (pathname.startsWith('/tk/')) {
        return NextResponse.rewrite(new URL(pathname.replace(/^\/tk/, ''), request.url));
    }
}

export const config = {
    matcher: '*'
}

修改请求头

export function middleware(request: NextRequest) {
    // 修改请求头
    const requestHeaders = new Headers(request.headers);
    requestHeaders.set('Language', 'zh');
    return NextResponse.next(
        {request: {headers: requestHeaders}}
    );
}

export const config = {
    matcher: '*'
}

具体的NextResponse对象可以参考NextResponse