Next.js 13 App Router中获取URL查询参数的方法

问题场景 #

需要从 localhost/get/point?token=hello 这类URL中获取token查询参数，此前在Pages Router中可以用req.query直接获取，但在Next.js 13的App Router中该方法不再生效，试过手动分割URL但效率不高，当前代码如下：

import { NextResponse } from 'next/server'
import base64url from 'base64url'

type Params = {
  token: string
}

export async function GET(req: Request, context: { params: Params }) {
  
  const token = req.query.token


  const tokenData = JSON.parse(base64url.decode(token.split('.')[1]))
  const verifyResult = Jwt.verify(token)
  if (verifyResult == JwtStatusCode.TokenExpired) {
    return NextResponse.json({ error: 'Token expired', message: 'Token expired'}, { status: 401 })
  } else if (verifyResult === JwtStatusCode.TokenInvalid) {
    return NextResponse.json({ error: 'Token invalid', message: 'Token invalid' }, { status: 401 })
  }
  const data = await client.user.findMany({
    where: { name: tokenData.name }
  })
  if (data.length != 0) {
    NextResponse.json({
      point: data[0].point,
      message: 'Success'
    }, { status: 200 })
  }
}

解决方案 #

在Next.js 13 App Router的API路由中，Request对象没有内置的query属性，高效获取查询参数的正确方式是利用浏览器原生URL API解析请求URL：

1. 通过new URL(req.url)创建URL实例
2. 调用searchParams.get('参数名')获取指定查询参数

同时需要修正原代码中的两处问题：

• 未处理token为空的情况（请求未传token时，get('token')会返回null）
• 成功响应分支遗漏return关键字，会导致函数返回undefined

修正后的完整代码 #

import { NextResponse } from 'next/server'
import base64url from 'base64url'

// 注：此处Params类型用于路由动态参数，与查询参数无关，可按需保留或删除
type Params = {
  token: string
}

export async function GET(req: Request, context: { params: Params }) {
  // 获取token查询参数
  const token = new URL(req.url).searchParams.get('token')

  // 处理token缺失的情况
  if (!token) {
    return NextResponse.json({ error: 'Token missing', message: 'Token is required' }, { status: 400 })
  }

  try {
    const tokenData = JSON.parse(base64url.decode(token.split('.')[1]))
    const verifyResult = Jwt.verify(token)
    
    if (verifyResult == JwtStatusCode.TokenExpired) {
      return NextResponse.json({ error: 'Token expired', message: 'Token expired'}, { status: 401 })
    } else if (verifyResult === JwtStatusCode.TokenInvalid) {
      return NextResponse.json({ error: 'Token invalid', message: 'Token invalid' }, { status: 401 })
    }

    const data = await client.user.findMany({
      where: { name: tokenData.name }
    })

    if (data.length !== 0) {
      // 补充return关键字
      return NextResponse.json({
        point: data[0].point,
        message: 'Success'
      }, { status: 200 })
    }

    // 处理用户不存在的场景
    return NextResponse.json({ error: 'User not found', message: 'User does not exist' }, { status: 404 })
  } catch (err) {
    // 捕获解析token或数据库查询的异常
    return NextResponse.json({ error: 'Internal server error', message: 'Something went wrong' }, { status: 500 })
  }
}

补充说明 #

• searchParams还支持其他实用方法：getAll('参数名')可获取多值参数（如?tag=foo&tag=bar），has('参数名')可判断参数是否存在
• 路由动态参数（如/api/user/[id]）仍通过context.params.id获取，与查询参数的获取方式区分开

内容的提问来源于stack exchange，提问作者sihyeok park