2

router.query.title goes away when I refresh the page.

from what I found I have to use getServerSideProps but I don't know what to type on getServerSideProps. or is there any way to do it?

edit: I tried Yilmaz's solution and removed the as={} now it works. But query links too long now without using as={} any solution for this?

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>
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
Julia Schafer
  • 387
  • 1
  • 6
  • 15
  • you can access the `query` object using `context.query`, in this case it will be `context.query.title` and then you can return it as a prop from `getServerSideProps` – mocherfaoui Apr 02 '22 at 23:30
  • You don't necessarily need to force `getServerSideProps` on the page. You can simply wait for `router.isReady` to be true. See [useRouter/withRouter receive undefined on query in first render](https://stackoverflow.com/questions/61040790/userouter-withrouter-receive-undefined-on-query-in-first-render). – juliomalves Apr 03 '22 at 01:00

1 Answers1

14
import { NextPageContext } from "next";


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

this will pass query to props. When you hover over query, ts will already infer its type as: const query: ParsedUrlQuery

in your component

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>
  • Next 13 UPDATE

If you set the experimental feature appDir: true, all the components in "app" directory will be server-side by default. Those components or pages have 2 default props

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

you can access to query param as props.searchParams.title

Second approach

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>
     )
}
Yilmaz
  • 35,338
  • 10
  • 157
  • 202