看看这个
next link
文件上说
as-将显示在浏览器URL栏中的路径的可选装饰器。
所以请尝试一下

<Link
    key={project.id}
    href={{
        pathname: "/projects/" + project.id,
        query: {
            id: project.id,
            category: project.category,
            title: project.title,
            about: project.aboutproject,
            company: project.company,
            client: project.client,
            date: project.date,
            website: project.website,
            image: project.image.src,
            image1: project.image1.src,
            image2: project.image2.src,
            image3: project.image3.src,
            image4: project.image4.src,
            image5: project.image5.src,
        },
    }}
    as={`/projects/${project.id}/mobile-app`}
    passHref
>

有两种方法可以解决你的问题。
1.您可以像在localStorage中那样在客户端持久化查询参数的状态，这样可以避免在URL上显示查询。
但这种方法的问题是，您无法访问Next.js中的localStorage数据提取方法，如服务器端呈现或静态生成
1.创建一个onClick处理程序，接受query参数作为函数参数，在router.push（）的帮助下，您可以导航到另一个页面，而无需在URL中显示query-params。

项目.js

import React, { useState, useMemo } from "react";
import Image from "next/image";
import Link from "next/link";
import CustomIcons from "../svg/CustomIcons";
import { useRouter } from "next/router";

import { AddProject } from "../../data/projects/AddProject";
import { projectsData } from "./../../types/types";

const Projects = () => {
  const [loadMore, setLoadMore] = useState < number > 4;
  const [activeMenu, setActiveMenu] = useState < string > "All";

  const router = useRouter();

  function onClickHandler(project) {
    console.log("clicked/");
    router.push(
      {
        pathname: "/about",
        query: {
          id: project.id,
          category: project.category,
          title: project.title,
          about: project.aboutproject,
          company: project.company,
          client: project.client,
          date: project.date,
          website: project.website,
          image: project.image.src,
          image1: project.image1.src,
          image2: project.image2.src,
          image3: project.image3.src,
          image4: project.image4.src,
          image5: project.image5.src
        }
      },
      "/about"
    );
  }
  function getFilteredList() {
    if (activeMenu === "All") {
      return AddProject;
    }
    return AddProject.filter((project) => project.category === activeMenu);
  }

  const showMoreItems = () => {
    setLoadMore((prevValue) => prevValue + 4);
  };

  const filteredList = useMemo(getFilteredList, [activeMenu]);

  return (
    <>
      <div className="projects_category">
        <ul>
          <li
            className={activeMenu == "All" ? "activemenu" : ""}
            onClick={() => {
              setActiveMenu("All");
            }}
          >
            All
          </li>
          <li
            className={activeMenu == "Branding" ? "activemenu" : ""}
            onClick={() => {
              setActiveMenu("Branding");
            }}
          >
            Branding
          </li>
          <li
            className={activeMenu == "Design" ? "activemenu" : ""}
            onClick={() => {
              setActiveMenu("Design");
            }}
          >
            Design
          </li>
          <li
            className={activeMenu == "Photography" ? "activemenu" : ""}
            onClick={() => {
              setActiveMenu("Photography");
            }}
          >
            Photography
          </li>
          <li
            className={activeMenu == "Marketing" ? "activemenu" : ""}
            onClick={() => {
              setActiveMenu("Marketing");
            }}
          >
            Marketing
          </li>
        </ul>
      </div>

      <div className="projects">
        <div className="projects__inside">
          <div className="projects__vector">
            <CustomIcons name="ProjectsVector" />
          </div>

          {filteredList.slice(0, loadMore).map((project: projectsData) => (
            <button
              key={project.id}
              onClick={()=>onClickHandler(project)}
            >
              <section className="project__item">
                <div className="project__image">
                  <Image
                    src={project.image.src}
                    height={620}
                    width={520}
                    alt="project"
                  />
                </div>
                <div className="project_info">
                  <h5>{project.category}</h5>
                  <h3>{project.title}</h3>
                </div>
              </section>
            </button>
          ))}
        </div>
        <div className="load__more">
          <div className="load__icon" onClick={showMoreItems}>
            <CustomIcons name="LoadMore" />
          </div>
        </div>
      </div>
    </>
  );
};

export default Projects;