reactjs - Consulta perdida al actualizar la página en NextJS

router.query.title desaparece cuando actualizo la página.

Por lo que encontré, tengo que usar getServerSideProps, pero no sé qué escribir en getServerSideProps. ¿O hay alguna forma de hacerlo?

editar: Probé la solución de Yilmaz y quité el as={} ahora funciona. Pero los enlaces de consulta son demasiado largos ahora sin usar as={} ¿alguna solución para esto?

index.tsx

const Projects = () => {
  const [projects, setProjects] = useState(data);

  {projects.slice(0, loadMore).map((project) => (
          <Link
            key={project.id}
            href={{
              pathname: "/projects/" + project.title,
              query: {
                id: project.id,
                category: project.category,
                title: project.title,
                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.title}
            passHref={true}
          >
}

[id].tsx

import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {},
  };
};

const Details = () => {
  const router = useRouter();

  return (
    <>
      <div className="single__page">
        <div className="single__header">
          <h2>{router.query.title}</h2>
        </div>
      </div>

Respuesta #1

import { NextPageContext } from "next";


export const getServerSideProps: GetServerSideProps = async (context: NextPageContext) => { {
      const { query } = context;
      return { props: { query } };
    }

esto pasará query a las props. Cuando pases el cursor sobre query, ts ya inferirá su tipo como: const query: ParsedUrlQuery

en tu componente

const Details = (props) => {
  // this is object
  const {query}=props
  console.log(query)

  return (
    <>
      <div className="single__page">
        <div className="single__header">
          <h2></h2>
        </div>
      </div>

• Próxima actualización 13

Si configuras la función experimental appDir: true, todos los componentes en el directorio "app" serán por defecto del lado del servidor. Esos componentes o páginas tienen 2 props por defecto

{ params: { slug: '2' }, searchParams: { title: 'new ' } }

puedes acceder al parámetro de consulta como props.searchParams.title

Segundo enfoque

const Details = () => {
  const [title,setTitle]=useState("")
  const router = useRouter();
  useEffect(() => {
    if (router.isReady) {
      // Code using query
      console.log(router.query);
      // this will set the state before component is mounted
      setTitle(router.query.title)
    }
  }, [router.isReady]);

return (
    <>
      <div className="single__page">
        <div className="single__header">
          <h2>{title}</h2>
        </div>
      </div>
     )
}