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>

2

1 Answer 1

15
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>
     )
}
12
  • thank you for your help but what exactly should I type in "NextPageContext" and how should I pass into other components . i put {query} : any into details.tsx and still states goes away on the refresh. Apr 3, 2022 at 1:31
  • @JuliaSchafer NextPageContext is type. updated the answer
    – Yilmaz
    Apr 3, 2022 at 1:36
  • @JuliaSchafer did you already set "title` query. what do you see when you console.log(query)
    – Yilmaz
    Apr 3, 2022 at 2:03
  • @JuliaSchafer can you test the second approach. updated the answer. witout serversideProps
    – Yilmaz
    Apr 3, 2022 at 2:13
  • can you run the app on a different browser?
    – Yilmaz
    Apr 3, 2022 at 2:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.