NextJS如何提取URL中ref推荐参数的address值供函数使用

你可以根据项目使用的Next.js路由模式，直接用框架内置能力提取ref参数，赋值为可复用变量供业务逻辑调用，无需引入第三方依赖。

App Router（Next.js 13+ 版本） #

客户端组件提取方式 #

• 首先在组件文件顶部添加'use client'声明，使用框架内置的useSearchParams钩子读取参数：

'use client'
import { useSearchParams } from 'next/navigation'
import { useEffect } from 'react'

export default function Home() {
  const searchParams = useSearchParams()
  // 提取ref参数为独立变量，可在任意函数内调用
  const referralAddress = searchParams.get('ref')

  // 示例：页面加载时处理推荐关系逻辑
  useEffect(() => {
    if (referralAddress) {
      // 自定义业务逻辑：比如存储推荐人、上报邀请关系等
      window.localStorage.setItem('site_referrer', referralAddress)
    }
  }, [referralAddress])

  return (
    <div>{/* 页面业务内容 */}</div>
  )
}

服务端组件/页面提取方式 #

服务端组件无法使用客户端钩子，可直接从页面组件的入参中读取查询参数：

// app/page.js 服务端根页面
export default function Home({ searchParams }) {
  // 直接解构获取ref参数，可直接在服务端逻辑中调用
  const referralAddress = searchParams?.ref
  // 示例：服务端校验推荐人有效性、关联邀请记录等逻辑可直接使用该变量

  return (
    <div>{/* 页面业务内容 */}</div>
  )
}

Pages Router（Next.js 旧版本） #

Pages Router模式下可在getServerSideProps/getStaticProps阶段提取参数，传递给页面组件使用：

// pages/index.js
export default function Home({ referralAddress }) {
  // 组件内可直接调用referralAddress变量处理客户端逻辑
  return (
    <div>{/* 页面业务内容 */}</div>
  )
}

export async function getServerSideProps(context) {
  // 从请求上下文提取ref参数
  const referralAddress = context.query.ref || null
  // 该阶段可直接调用变量做服务端逻辑，比如校验推荐人合法性
  return {
    props: {
      referralAddress
    }
  }
}

注意：你给出的链接示例存在格式问题，正确生成的推荐链接不应给address值包裹单引号，标准格式为http://localhost:3000/?ref=实际地址值，你原来写的链接生成代码无需额外修改，只要不要在拼接时给address变量外层加引号即可，否则提取到的参数值会携带多余的单引号，导致业务逻辑异常。

内容的提问来源于stack exchange，提问作者Colin S