router.query returns undefined parameter on first render in Next.js

[rasperrypie]

When I have the following code and visit /pages/profile/foo, the page gets rendered twice and the first time router.query.user is undefined.

In file /pages/profile/[user].js

import { useRouter } from "next/router"

export default () => {
  const router = useRouter()
  const { user } = router.query
  console.log(user)

  return <p>User is {user}</p>
}

I will get 2 console logs - first is undefined, then the correct foo.

Can anyone explain to me why is this happening?

[vassbence]

useRouter is a react hook, it catches up to the current query on ReactDOM.hydrate.
You can read more about it here.

[treeindev]

In case this helps anyone: when accessing router.query within a useEffect() ensure to add [router] (or your query parameter) as part of the effect dependencies.

[divofred]

import router from 'next/router';


const Component = () => {
  const {id} = router.query
  
  useEffect(() => {
    if(!id) {
      return;
    }
    const fetchSomethingById = async () => {
      const response = await fetch(`/api/something/${id}`)
    }
    fetchSomethingById()
  }, [id])

return (
     <div>
          stuff
     </div>
  )
}

This ensures that the API call isn't made until query id is defined. Haven't used the lib above that jackguoAtJogg posted but that also looks like a good solution (Y)

thank you, you saved me
Thanks, this really helped.

[JJZFIVE]

Huge. Thanks so much, simple and "React"-y

[bezenson]

And if I am using RTK query hooks? It is not possible to put hook inside if

[mrdbstn]

struggling with this as well

[WassimBenzarti]

What if I want to check if the query param is present or not ?
In your approach, if there are no query params in the URL, the queryReady will always be false.

[ahakem]

[samg11]

How do you do that?

[ahakem]

dynamic import ssr:false

[elie222]

Use isReady:
#11484 (comment)

[kristian240]

I noticed that other router props are accessible, so you can do some regex magic to get your query param on the first render.

const queryKey = 'user';
const queryValue = router.query[queryKey] || router.asPath.match(new RegExp(`[&?]${queryKey}=(.*)(&|$)`))

[Clariity]

Sure, this is my use case for a page called /projects/[project]. For some reason it wasn't working for me when I was destructuring router.query but this works completely fine.

import React from "react";
import dynamic from "next/dynamic";
import { useRouter } from "next/router";

import Loading from "../../components/other/Loading";
import SEO from "../../components/other/SEO";

function Project() {
  const router = useRouter();
  const projectName = router.query["project"];

  const MDXContent = dynamic(() => import(`../../content/projects/${projectName}.mdx`), {
    loading: () => <Loading />,
  });

  return (
    <div className="row">
      <SEO title={projectName} />
      <div className="markdown">
        <MDXContent />
      </div>
    </div>
  );
}

export default Project;

[logan272]

Need to make the match non greedy: (.*) => (.*?)

router.asPath.match(new RegExp(`[&?]${queryKey}=(.*?)(&|$)`))

Here's a custom hook

import { useMemo } from 'react';

/**
 *
 * @param key the query key
 * @returns the query value to the query key
 */
export const useNextQueryParam = (key: string): string | undefined => {
  const { asPath } = useRouter();

  const value = useMemo(() => {
    const match = asPath.match(new RegExp(`[&?]${key}=(.*?)(&|$)`));
    if (!match) return undefined;
    return decodeURIComponent(match[1]);
  }, [asPath, key]);

  return value;
};

[itsinalis]

Sure, this is my use case for a page called /projects/[project]. For some reason it wasn't working for me when I was destructuring router.query but this works completely fine.

import React from "react";
import dynamic from "next/dynamic";
import { useRouter } from "next/router";

import Loading from "../../components/other/Loading";
import SEO from "../../components/other/SEO";

function Project() {
  const router = useRouter();
  const projectName = router.query["project"];

  const MDXContent = dynamic(() => import(`../../content/projects/${projectName}.mdx`), {
    loading: () => <Loading />,
  });

  return (
    <div className="row">
      <SEO title={projectName} />
      <div className="markdown">
        <MDXContent />
      </div>
    </div>
  );
}

export default Project;

This fixed the issue for me

[ImtiazNayeemShawon]

I my case I write the full function on useEffect hook and its work !

import { useRouter } from 'next/router';

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

const { course } = router.query;
const [Data, setData] = useState("");

useEffect(() => {
const fetchDataById = async () => {
try {
const response = await Api.get(/crud/course/${course});
setData(response.data);
} catch (error) {
console.error("Error fetching data:", error);
}
};

const timeoutId = setTimeout(() => {
  fetchDataById();
}, 5000);

return () => {
  clearTimeout(timeoutId);
};

}, [course]);

// ...
};

[simbakowo]

@logan272 thanks for providing that hook...any reason we don't encode the value first using encodeURIComponentthe ? Or should that be handled before the value is passed to useNextQueryParam()

[pie6k]

I've created (probably hacky) workaround. If failed to get params from router, I try to get it from window.location.pathname

function tryToGetParamsFromBrowser(endpoint: string) {
  // make sure we don't crash on server side
  if (typeof window === 'undefined') {
    return null;
  }

  const path = window.location.pathname;

  const paramsInEndpoint: string[] = [];
  const endpointMatcher = endpoint
    // find each [foo] part and extract 'foo' from it.
    .replace(/\[([a-z]+)\]/gi, (_, paramName) => {
      // push it to list of params in order they appear
      paramsInEndpoint.push(paramName);

      // replace [foo] with regexp part that will match actual values
      return '([a-zA-Z0-9-]+)';
    })
    // escpae '/' parts of endpoint so we can use it in regexp
    .replace(/\//g, '\\/');

  // create regexp that will pick actual values from window path
  const endpointRegexp = new RegExp(endpointMatcher, 'ig');

  // let's try to match it
  const result = endpointRegexp.exec(path);

  // if current browser path is not matching - give up
  if (!result) {
    return null;
  }

  // we will have actual values as array here in the same order as param names in paramsInEndpoint
  const [, ...routeParamsValues] = result;

  // let's create a map of params
  const paramsFromPath: Record<string, string> = {};

  // now, let's connect param names and values and add results to our map
  routeParamsValues.forEach((value, index) => {
    // index in array of values is the same as index of param name
    const paramName = paramsInEndpoint[index];

    // add it to params map
    paramsFromPath[paramName] = value;
  });

  return paramsFromPath;
}

With this function, on browser side I can call something like

tryToGetParamsFromBrowser('/foo/[bar]/baz/[zaz]');
// if window.location.pathname is `foo/one/baz/two`
// it will return { bar: 'one', zaz: 'two' } which is equal to what router would normally return

I know it's hacky, but it worked in my use case.

[iRayan7]

@pie6k Any downsides to using this? Thanks.

[pie6k]

Hard to say. I'm not exactly sure why something like this could not be baked into next.js router itself. Such backup reflects actual state of the router before the router is ready and it could be the only case when it's used.

[codeBelt]

@pie6k This would be awesome but sadly it is not working for me:

https://codesandbox.io/s/trytogetparamsfrombrowser-dnesl?file=/src/index.ts

[iRayan7]

I'm currently returning nothing as a workaround to solve the empty query on the first render.

  const router = useRouter()
  const { type } = router.query;
  if(!type) {
    return <></>;
  }
  // everything else

Works fine so far.

[gsambrotta]

this solution or returning null give me error at when I refresh the page
Error: "Unhandled Runtime Error
Error: Rendered more hooks than during the previous render."

Does it happen to anyone else?!

[dtgreene]

@gsambrotta
Remember not to conditionally render hooks. Ie. don’t create hooks after you return something as the amount of hooks created must be the same for every render.

[gsambrotta]

@greeneman42 thanks, I didn't know that! Make sense.
I was indeed creating the useEffect after the above check.

[etler]

Good solution! It's clean and also makes sense that the page component can't render until the router dependencies are fulfilled. I made one change which was to check router.isReady instead of the query object as checking the query object doesn't work for when the query parameters are optional.

[SoloOrchid]

realize it is two years later but I'm trying to learn next and this is what i did.

useEffect(() => {
        if(!pid){
            console.log("gl")
        }else{
            fetch(`/api/getuser/${pid}`)
                .then(res => res.json())
                .then(data => console.log(data))
            setLoading(false)
        }
    }, [pid])

[revskill10]

You can specify default query parameter, too.

const router = useRouter()
    const { query = {
      q: "",
      offset: "0",
      limit: 10
    } } = router

[redgumnfp]

If you use a Hook on the first component in the page template, you can return null at the top of your component, as suggest above:

  const router = useRouter();
  const { contract } = router.query;
  if (!contract) return null

This will work perfectly fine unless you have eslint-plugin-react-hooks set up. It'll flag it with something like:
React Hook "useSnackbar" is called conditionally. React Hooks must be called in the exact same order in every component render.

To counter-act this, I ended up wrapping the app in a component as I was dynamically creating the page.

Doesn't help with SSR, but someone may find it useful.

You could obviously disable that rule too

AppWrapper.js:

import React from 'react';

import Router from 'next/router';

const MyApp = ({ children }) => {
  const { pathname } = Router;
  /* fix rehydrating issue with hooks and Router query params */
  if (pathname.includes('[')) {
    if (Object.keys(Router.query).length === 0) return null;
  }

  return (
    <div>
      { children }
    </div>
  );
};

export default MyApp;

_app.js

import React, { useEffect } from 'react';

import Head from 'next/head';

import AppWrapper from '../templates/AppWrapper';

const MyApp = props => {
  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  const {
    Component, pageProps,
  } = props;

  return (
    <React.Fragment>
      <Head>
        <title>XXX</title>
      </Head>
      <AppWrapper>
        <Component {...pageProps} />
      </AppWrapper>
    </React.Fragment>
  );
};

export default MyApp;

[renatosaz]

nice !

[renatosaz]

if (!contract) return null
this simple lane saved me!

[dtgreene]

if (!router.query.contract) return null

The problem I'm having with just returning null when contract is falsey, is what if it actually is undefined? If the initial render shows the query param is undefined, how do you tell between the initial value of undefined and the actual value once the page is hydrated?

Also is this only a problem in dev mode? I don't see the initial undefined params being passed once the app is built.

[redgumnfp]

I believe if it's undefined it wouldn't match the router logic, so by default a 404 would be presented.

For example:
example.com/contracts/x would map to:
example.com/contracts/[contract] with contract = "x"

example.com/contracts/undefined would map to:
example.com/contracts/[contract] with contract = "undefined"

example.com/contracts/ would map to:
example.com/contracts

Depending on how you build your app, the user would presented a 404 page. If you want a specific message to come up, you could create an index page in the relevant folder to handle undefined (perhaps to indicate the parameter is missing/url is broken, or even a list/search page, depending on your requirements).

Falsey, however, is a different matter. If you had that particular scenario (which I wouldn't recommend), I'd suggest to update the if statement to something like:
if (router.query.contract !== undefined) return null

[cristiancedenogallego]

I use the next hook for that

import * as React from 'react';
import { useRouter } from 'next/router';

export function useNextQueryParam(key: string) {
  const router = useRouter()
    
  const value = React.useMemo(() => {
    const res = router.asPath.match(new RegExp(`[&?]${key}=(.*)(&|$)`)) || [];
    return res[1];
  }, [router.asPath]);

  return value;
}

[joaobibiano]

Lovely. This solved my problem. Thank you!

[theZulqarnain]

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

[eric-burel]

Hi, I've updated it a bit so it returns an object for all values instead, like router.query should do in the first place:

export const useNextQueryParams = (): { [key: string]: string } => {
  const router = useRouter();
  const value = useMemo(() => {
    // @see https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
    const queryParamsStr = router.asPath
      .split("?")
      .slice(1)
      .join("");
    const urlSearchParams = new URLSearchParams(queryParamsStr);
    // the first key might be in the shape "/assets?foobar", we must change to "foobar"
    const params = Object.fromEntries(urlSearchParams.entries());
    return params;
  }, [router.asPath]);

  return value;
};

I am still not sure how safe is "asPath" though, compared to router.query, and why router.query won't work this way in the first place.

[peter-gy]

Awesome solutions, thanks a lot!

[samuelgoldenbaum]

no i.e. support for those that need it

[Thrasymachus01]

Just to clarify, the "proper" (recommended) solution here is to use getInitialProps and pass in the initial value via SSR?

[ardeearam]

I realized that router.query is too slow for our use case.

I did something like this:

//pages/collections/[collection_id].tsx
export default function CollectionPage() {

  const router = useRouter();
  const collection_id  = router.query.collection_id;
  ...
}

to

//pages/collections/[collection_id].tsx

interface ICollectionPageParams {
  collection_id: string
}

export default function CollectionPage({ collection_id }:ICollectionPageParams) {
...
}

export async function getServerSideProps(context) {
  return {
    props: { collection_id: context.query.collection_id }
  }
}

This worked so fast and so beautifully.

[obolland]

I did this...

import router from 'next/router';


const Component = () => {
  const {id} = router.query
  
  useEffect(() => {
    if(!id) {
      return;
    }
    const fetchSomethingById = async () => {
      const response = await fetch(`/api/v1/something/${id}`)
    }
    fetchSomethingById()
  }, [id])

return (
     <div>
          stuff
     </div>
  )
}

This ensures that the API call isn't made until query id is defined.

[Pranav2612000]

Any downsides to using this approach?

[obolland]

I've only had to do this once, but no apparent downsides so far. It now works as I would have expected it to work initially

[StephenBitmovin]

Thanks I was looking for this. For me this is a very a common pattern that feels should have a more obvious way of handling rather than a hacky workaround

[bradenroper]

This is the same solution I came to, and I believe it to be the one that makes the most sense. The useEffect dependency list exists for situations just like this!

[tientaidev]

It works fine for me. However, when I refresh page, it won't work !

[antoinerousseau]

you can use isReady from the hook.

const { query, isReady } = useRouter()

if (!isReady) {
  return <Loading />
}

// read `query`

[goforbg]

you can use isReady from the hook.

const { query, isReady } = useRouter()

if (!isReady) {
  return <Loading />
}

// read `query`

This is the best solution IMO

[eric-hc]

router in this example did not work for me, always undefined. Next.js version 11.1.2, but using

const router = useRouter();

did work, however.

[ggicci]

Use isReady sometimes can avoid the rehydrated error in React. The warning message looks like the following:

Warning: Did not expect server HTML to contain a <div> in <div>

[cmaciasjimenez]

Thank you. This is exactly what I needed. I wanted to show a loading state only when I have a query param and if not go straight to the empty form.

[Aryan-mor]

I think this way is not SEO friendly
What do you think about this answer?
#11484 (comment)

[selbekk]

Is there a reason this wouldn't work out of the box? The query params are available while rendering the page as well, so unless there's an underlying technical reason, I don't see why this isn't filed as a bug?

[f0rr0]

Agreed, the query is available in asPath or maybe even pathname I guess. This should be a bug.

[vnctaing]

I think some other router library like react-router, decided to leave up to the user on how to parse the query object because there's many edge cases on serialization/deserialization params. Do you think it's a good idea to just avoid the query object from Next ?

Personnally I'm using the popular query-string npm package to normalize the parsing

import qs from "query-string";


 const router = useRouter();
 const paramsWithoutLeadingSlash = router.asPath.slice(1,router.asPath.length);
 const params = qs.parse(paramsWithoutLeadingSlash);


  const { data, error } = useSWR(
    `${process.env.MY_API}/Users?&search=${params.search}`,
    fetcher
  );

or in functional fashion with Ramda

import qs from "query-string";

const getParams = R.pipe(useRouter, R.prop("asPath"), R.tail, qs.parse);

const useItems = () => {
  const params = getParams();
  const { data, error } = useSWR(
    `${process.env.MY_API}/Items?&search=${params.search}`,
    fetcher
  );

  return {
    items: data,
    isLoading: !error && !data,
    isError: error,
  };
};

[amariani]

Hello guys, I could solve the undefined first fetch like this:

export function useCustomer(id: string) {
  const { isReady } = useRouter()
  return useSWR(isReady ? [`endpoint/to/customers/${id}`] : null, customersFetcher)
}

And then in my component/context I use it like this:

const {
    query: { customerId }
  } = useRouter()

const { data } = useCustomer(customerId as string)

console.log(data) // The customer data is returned and only one fetch is made 😃 

I hope it works for you. Happy new year!

[sannajammeh]

We decided to pause everything until router.isReady returns true. This pauses every request until hydration, however, but its not noticeable (for our project at least).

const awaitRouterMiddleware: Middleware = (useSWRNext) => {
  return (key, fetcher, config) => {
    const router = useRouter();
    const swr = useSWRNext(router.isReady ? key : null, fetcher, config);
    return swr;
  };
};

// _app.tsx
<SWRConfig value={{ use: [awaitRouterMiddleware] }}>
...rest
<SWRConfig />

[huksley]

@sannajammeh Could you follow up on this, are you still using this? I wanted to adopt this, but not sure about side-effects and how to test them.

[ryparker]

Here's a hook that returns the URL query params as an object (urlQueryParams) and a function to set new query params in the URL (setUrlQueryParams). It's worked out pretty well so far.

import { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/router';

/**
 * This hook is used to get and set the URL query parameters using
 * next/router.
 *
 * @see https://github.com/vercel/next.js/discussions/11484
 * @see https://nextjs.org/docs/routing/shallow-routing
 */
const useShallowRouting = <T extends Record<string, string | undefined>>(
  /**
   * The base path of the route. This will be prepended to the route path.
   *
   * @example
   * If URL is "mydomain.com/bills" then "/bills" is the base path.
   */
  basePath: string
) => {
  const router = useRouter();
  const [urlQueryParams, setParams] = useState<Record<string, any>>(
    router.query || {}
  );

  const getUrlQueryParams = useMemo(() => {
    const dummyUrl = new URL(`https://example.com${router.asPath}`);
    if (dummyUrl.search.length <= 0) return {} as T;
    return Object.fromEntries(
      new URLSearchParams(dummyUrl.search).entries()
    ) as T;
  }, [router.asPath]);

  useEffect(() => {
    if (!router.isReady) return;
    setParams(getUrlQueryParams);
  }, [router.asPath, router.isReady]);

  const setUrlQueryParams = (queryObj: Record<string, any>) => {
    let queryParamStrings = [];
    for (const key in queryObj) {
      if (queryObj[key]) {
        queryParamStrings.push(`${key}=${queryObj[key]}`);
      }
    }
    const path = `${basePath}?${queryParamStrings.join('&')}`;
    router.push(path, undefined, {
      shallow: true,
    });
  };

  return [urlQueryParams, setUrlQueryParams] as const;
};

export default useShallowRouting;

Usage:

const [urlQueryParams, setUrlQueryParams] = useShallowRouting('/bills');

useEffect(() => {
	if (urlQueryParams.chamber)
		setChamber((urlQueryParams.chamber as string) || '');
	if (urlQueryParams.offset)
		setOffset(parseInt(urlQueryParams.offset as string, 10) || 0);
	memoFetchData({chamber});
}, [urlQueryParams]);

useEffect(() => {
	setUrlQueryParams({ chamber, offset });
}, [chamber, offset]);

return(<Component {chamberData} />)

[ryparker]

@viclafouch Why the downvote?

[viclafouch]

Sorry for no comment @ryparker,

As I see, on the first mount, you will have router.query || {} value so it doesn't fix the original issue which is "router.query returns undefined parameter on first render in Next.js`."

That's not what we need :/

[dfliess]

Hi! What about this ? https://github.com/47ng/next-usequerystate

[Aryan-mor]

Hello, I fix this problem with this method.

First add getServerSideProps to your page

//MyPage.js
export async function getServerSideProps({req, query}) {

       return {
            props: {
                initQuery: query
            }
        }
}

Then created useQuery function like this

//useQuery.js
export let firstQuery = {}
export default function useQuery({slugKey = 'slug', initial = {}} = {}) {
    const {query = (initial || firstQuery)} = useRouter()

    useEffect(() => {
        if (_.isEmpty(initial) || !_.isObject(initial))
            return
        firstQuery = initial
    }, [initial])

    
return useMemo(() => {

    if (!_.isEmpty(query)) {
        return query
    }
    try {
        const qs = window.location.search.split('+').join(' ');

        const href = window.location.href
        const slug = href.substring(href.lastIndexOf('/') + 1).replace(/\?.*/gi, '')

        let params = {},
            tokens,
            re = /[?&]?([^=]+)=([^&]*)/g;
        if (slug)
            params[slugKey] = slug


        while (tokens = re.exec(qs)) {
            params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
        }


        return params
    } catch {
    }
}, [query])
}

And always use useQuery for receive query params

//MyPage.js
export default function MyPage({initQuery}) {
     const query = useQuery({initial: initQuery})

    return(
      <div>
           {query.myParam}
      </div>
    )
}

And in components like this

//MyComponent.js
export default function MyComponent() {
     const query = useQuery()

    return(
      <div>
           {query.myParam}
      </div>
    )
}

[tomitrescak]

You need to decide whether you are doing static page or server generated page. For the router to work properly on server, you need to evaluate the page on server. As a result you need to turn the page to SSG. The easiest way is to do this:

MyPage.getInitialProps = async (context: NextPageContext) => {
  return {};
};

[gtarsia]

Here's my workaround. In pages/app component:

  ...
  const [ready, setReady] = useState(false)
  const router = useRouter()
  useEffect(() => {
    if (router.isReady) {
      setReady(true)
    }
  }, [router.isReady])
  return ready && <Component {...pageProps} />

For some reason, just router.isReady && <Component {...pageProps} /> causes Expected server HTML to contain a matching <div> in <div> problems for me, but using useState makes the error disappear.

[Iykekelvins]

Omg!! This works!!! Thanks a lot!!

[LunarMelody]

Thank you very much, extremely useful piece of code! Wasted at least two days figuring out a workaround and had the same issue when tried using router.isReady, but I wasn't smart enough to utilize useState here hehe 😄

I ended up creating a wrapper component for such use cases when router must be ready

import { useRouter } from "next/router";
import { FC, Fragment, ReactNode, useEffect, useState } from "react";

interface Props {
 children: ReactNode;
}

export const RouterReady: FC<Props> = ({ children }) => {
 const router = useRouter();
 const [ready, setReady] = useState(false);

 useEffect(() => {
   if (router.isReady) {
     setReady(true);
   }
 }, [router.isReady]);

 if (!ready) {
   return null;
 }

 return <Fragment>{children}</Fragment>;
};

Then somewhere in pages/components code you'd simply use it like this

const HomePage: NextPage = () => {
  const router = useRouter();

  return (
    <Container>
      <RouterReady>{router.query.search}</RouterReady>
    </Container>
  );
};

[ihumentsev]

Вот мой обходной путь. В компонентах страниц/приложений:

  ...
  const [ready, setReady] = useState(false)
  const router = useRouter()
  useEffect(() => {
    if (router.isReady) {
      setReady(true)
    }
  }, [router.isReady])
  return ready && <Component {...pageProps} />

По какой-то причине у меня просто router.isReady && <Component {...pageProps} />возникают Expected server HTML to contain a matching <div> in <div>проблемы, но при использовании useStateошибка исчезает.

Это работает! Спасибо!

[GoPro16]

For anyone wanting to do the with wrapper approach I went in and made an identical withRouter called withReadyRouter with the intention that the wrapped component only gets rendered when the isReady is true on the router. Also is nice since it gets injected as well like withRouter does so you don't have to again call the hook after rendering the wrapped component after the check.

import React from 'react';
import { NextRouter, useRouter } from 'next/router';
import { NextComponentType, NextPageContext } from 'next';

export type WithRouterProps = {
  router: NextRouter;
};

export type ExcludeRouterProps<P> = Pick<
  P,
  Exclude<keyof P, keyof WithRouterProps>
>;

export default function withReadyRouter<
  P extends WithRouterProps,
  C = NextPageContext
>(
  ComposedComponent: NextComponentType<C, any, P>
): React.ComponentType<ExcludeRouterProps<P>> {
  function WithReadyRouterWrapper(props: any): JSX.Element {
    const router = useRouter();
    if (!router.isReady) {
      return <></>;
    }
    return <ComposedComponent router={router} {...props} />;
  }

  WithReadyRouterWrapper.getInitialProps = ComposedComponent.getInitialProps;
  // This is needed to allow checking for custom getInitialProps in _app
  (WithReadyRouterWrapper as any).origGetInitialProps = (
    ComposedComponent as any
  ).origGetInitialProps;
  if (process.env.NODE_ENV !== 'production') {
    const name =
      ComposedComponent.displayName || ComposedComponent.name || 'Unknown';
    WithReadyRouterWrapper.displayName = `withReadyRouter(${name})`;
  }

  return WithReadyRouterWrapper;
}

Which in turn lets you do this.

const ReadyComponent = ({ router }) => {
//  ... my router.query is ready!
}
export default withReadyRouter(ReadyComponent)

[EddyVinck]

My solution is to conditionally render the page that needs the variable.

(Don't do this if you need to be SEO friendly)

import type { NextPage } from "next";
import { useRouter } from "next/router";
import MyPageAsAComponent from './MyPage';
import Loader from './Loader';

const Home: NextPage = () => {
  const router = useRouter();
  const id = router.query.id; // undefined at first on page load =(

  return id ? (
    <MyPageAsAComponent id={id} />
  ) : (
    <Loader />
  );
};

[tsogi]

This is how I could make it work using isReady suggested by @antoinerousseau above

[giulianok]

is it safe to use isReady to conditionally render? Per the docsShould only be used inside of useEffect methods and not for conditionally rendering on the server. (https://nextjs.org/docs/api-reference/next/router#router-object)

[reqyo]

For anyone using react query, you can use something like this with the enabled flag.

const router = useRouter();
const { userId } = router.query as { userId: string };
const { data, isLoading } = api.ptusers.getOne.useQuery(
    {
      id: userId,
    },
    {
      enabled: userId !== undefined,
    }
  );

Wanted to share this because quite a few of these suggestions involve conditional rendering which if you have a few hooks in your pages can give you a headache. 🤕

No more 404s! 😁

[leonmeka]

love this!

[sannajammeh]

Same with SWR:

const router = useRouter();
const { userId } = router.query as { userId: string };

useSWR(userId ? `api/users/${userId}` : null, fetcher)

[eqqi33]

ah, you give me a clue after 4 years, using skip for RTK 🤕

[revoltez]

in Next 13 router.query has been removed (due to the new app router) and replaced with useSearchParams(); hook instead, so you can use it like this:

import { useSearchParams } from "next/navigation";
const query = useSearchParams();

[ivan-kleshnin]

Does it still suffer from the same issue of double evalution?
UPDATE: figured out myself – it does not 👍

[adifsgaid]

I've encountered a challenge while using Next.js with RTK (Redux Toolkit) Query.

The issue arises when I attempt to fetch data based on a dynamic route parameter. At the time of the initial render, the router.query is empty which results in calling my query hook with an undefined argument.

This, in turn, results in a failed network request.

I've tried to use a conditional check to determine when to call the query, but the issue persists.

Below is a simplified version of my code to illustrate a solution that I found for this type of problem:

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useMyApiQueryHook } from "../path/to/my/api/hooks";

const useDataFetcher = () => {
  const router = useRouter();
  const initialParam = router.query.myParam;

  // State for storing the fetched data
  const [queryData, setQueryData] = useState(null);

  // Ensure the argument is string or undefined
  const { data } = useMyApiQueryHook(
    typeof initialParam === 'string' ? initialParam : undefined,
    { skip: typeof initialParam !== 'string' }
  );

  useEffect(() => {
    if (data) {
      setQueryData(data);
    }
  }, [data]);

  return queryData;
}

export default useDataFetcher;

Here is the documentation for the RFK library.

[sannajammeh]

 useEffect(() => {
    if (data) {
      setQueryData(data);
    }
  }, [data]);

The data is already null or undefined from RQ or SWR or even handrolled hook, this will cause double rendering every time hook re-renders. I recommend simply returning data here.

[1mehdifaraji]

Somehow someway the asPath function from useRouter is ok and has the queries on initial page load but the query function is not. I've found a workaround by using asPath from useRouter and parsing the url queries with another library called queryString like this :

import queryString from "query-string";
import { useRouter } from 'next/router';

const { asPath } = useRouter();

const [dateTo, setDateTo] = useState(
    queryString.parseUrl(asPath)?.query?.setDateTo
      ? convertTimestampToDate(
          queryString.parseUrl(asPath)?.query?.setDateTo
        )
      : ""
);

[Sajithrajan03]

Dynamic Routing in Next JS

We can use useParams to get the parameters in the URL.
Use 'next/navigation' instead of 'next/router'.

'use client';
import { useParams } from 'next/navigation'; 

const Page = () => {
    const {tripId}  = useParams();
    console.log(tripId)
    return (
        <div className='text-white'>{tripId}</div>
    );
};
export default Page;

This returns the trip Id in the URL with is specified in parent folder. Next JS

[ImtiazNayeemShawon]

What if we use like this?

` 'use client';

const Page = ({params}) => {
const {tripId} = params
console.log(tripId)
return (

{tripId}

);
};
export default Page; `
we don't need useParams hook now . if we have to get multiple params then we can use file name [...tripid]

[huksley]

Hmm, that might be the best way to do it. I just checked, and useParams<{ param: string }() does not require new app pages router. 👍

It also supports nice, non-undefined, typed deconstruction, i.e.

const {
    tab: [tab, id]
  } = useParams<{
    tab:
      | ["contact" | "company" | "list" | "import", string]
      | ["contact" | "company" | "list" | "import"];
  }>();
// /contacts/[...tab] => for URLs like /contacts/contact or /contacts/company or /contacts/contact/ID
console.info("Params", tab, id)