如何通过Next.js Router从查询字符串中获取多个账号编号？

方法1：使用重复的查询参数键 #

如果你的URL采用重复键传递多个账号，格式如下：
/user/query?account=123&account=456&account=789

Next.js的useRouter会自动将同一键的多值整理为数组，直接获取即可，同时注意处理单值时的字符串转数组场景：

import { useRouter } from 'next/router';

function UserQueryPage() {
  const router = useRouter();
  // 处理单值/多值情况，确保最终返回数组
  const accountNumbers = Array.isArray(router.query.account) 
    ? router.query.account 
    : router.query.account ? [router.query.account] : [];

  return (
    <div>
      <h1>查询的账号列表</h1>
      <ul>
        {accountNumbers.map(account => (
          <li key={account}>{account}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserQueryPage;

方法2：使用逗号分隔的单个查询参数 #

如果URL采用逗号分隔的形式传递多个账号，格式如下：
/user/query?accounts=123,456,789

需要手动拆分字符串并过滤空值：

import { useRouter } from 'next/router';

function UserQueryPage() {
  const router = useRouter();
  // 拆分逗号分隔字符串，过滤无效空值
  const accountNumbers = router.query.accounts 
    ? router.query.accounts.split(',').filter(acc => acc.trim()) 
    : [];

  return (
    <div>
      <h1>查询的账号列表</h1>
      <ul>
        {accountNumbers.map(account => (
          <li key={account}>{account}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserQueryPage;

服务端渲染场景补充 #

如果是SSR页面，可在getServerSideProps中按同样逻辑获取参数：

export async function getServerSideProps(context) {
  const { query } = context;
  const accountNumbers = Array.isArray(query.account) 
    ? query.account 
    : query.account ? [query.account] : [];

  return {
    props: { accountNumbers }
  };
}

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