前言

NextJs中，如果你是服务端组件，并且是App路由模式，如果想拿到当前URL，我们只能通过中间件获取，并通过header来实现交互。

想再学习下中间件的可以参考我的这篇文章：NextJs 初级篇 - 安装 | 路由 | 中间件

一. NextJs 如何拿到当前页面URL

我们编写根目录下的 middleware.ts 文件，通过中间件拿到URL相关属性，并赋值给header。

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

export const headerMiddleware = () => {
    return async (request: NextRequest) => {
        const headers = new Headers(request.headers);
        headers.set('my-current-pathname', request.nextUrl.pathname);
        headers.set('my-current-search', request.nextUrl.search);
        return NextResponse.next({ 
        	request: {
                headers,
            },
        });
    };
};

export default chain([headerMiddleware]);

function chain(functions: any, index = 0) {
    const current = functions[index];
    if (current) {
        const next: any = chain(functions, index + 1);
        return current(next);
    }
    return () => NextResponse.next();
}

export const config = {
    matcher: '/((?!api|_next/static|_next/image|favicon.ico).*)',
};

这样我们就可以在服务端组件中通过以下代码获取相关参数：

import { headers } from "next/headers";
 
export default async function Home() {
  const headerList = headers();
  const pathname = headerList.get('my-current-pathname');
  const search = headerList.get('my-current-search');
  
  // ...etc
}

二. NextJs 拿URL参数的两种方式

首先第一种方式在第一节就涉及了：我们在中间件中拿到参数，然后放到header中

const search = headerList.get('my-current-search');

但是如果你只是想拿参数，不需要设置header这么麻烦，还有另一种方式，假设参数是?id=2&name=test，服务端组件默认接受一个参数：searchParams，它是Object类型的对象：

export default async function Home({
    searchParams,
}: {
    searchParams: any;
}) {
	// 拿到对应的参数值，key就是参数名
	const {id, name} = searchParams;
	// ...
}