useRouter/withRouter receive undefined on query in first render

Question

I got a problem with my dynamic route. It look like this

[lang]/abc

I am trying to get query value from [lang] but when I using useRouter/withRouter i got query during 2-3 render of page ( on first i got query.lang = undefined ). its possible to get in 1 render or use any technique ?

Answer 1

It isn't possible to get a query value at the first render.

Statically optimized pages are hydrated without provided route parameters. E.g. query is an empty object ({}).

After hydration, Next.js will fill the query object.

Next.js 10.0.5 and up

Use router.isReady inside useEffect hook to check if params are ready. See the answer by @doxylee for the example.

Before Next.js 10.0.5

At first render of a dynamic route router.asPath and router.route are equal. Once query object is available, router.asPath reflects it.

You can rely on the query value within a useEffect hook after asPath has been changed.

const router = useRouter();

useEffect(() => {
  if (router.asPath !== router.route) {
    // router.query.lang is defined
  }
}, [router])
Copy

GitHub Issue - Add a "ready" to Router returned by "useRouter"

Answer 2

I found something:

isReady: boolean - Whether the router fields are updated client-side and ready for use. Should 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

And the code would be like:

const router = useRouter();
useEffect(()=>{
    if(!router.isReady) return;

    // codes using router.query

}, [router.isReady]);
Copy

Answer 3

In NextJS 9+, one way to ensure route parameters are immediately available for page components is to get them from the context arg passed to getServerSideProps() and pass to the component as props.

For a page like [id].js,

export function getServerSideProps(context) {
  return {
    props: {params: context.params}
  };
}

export default ({params}) => {
  const {id} = params;
  return <div>You opened page with {id}</div>;
};
Copy

Answer 4

This is a great question and one that took a few days for me to figure out what the best approach is.

I have personally found three viable solutions to the problem of validating dynamic route path params or even just route path params in general.

The three solutions are

1. SSR (don't recommend) [Next >= 10]
2. useRouter
3. Middleware [Next 12 required]

In my examples a will use a route that requires a reset-token or it should be redirected.

SSR Firstly server side rending with getServerSideProps. Vercel recommends to use SSR as a last resort and I would highly recommend not using SSR when able (time to byte & cost).

We suggest trying Incremental Static Generation or Client-side Fetching and see if they fit your needs. https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation

But in the case that you do, say there is some server side api validation call you require to validate the query param.

export const getServerSideProps = async (context) => {
  const { token } = context.query;

  if (!token) {
    return {
      redirect: {
        permanent: false,
        destination: "/",
      }
    }
  }

  return {
    props: {}
    // props: { token }
    // You could do this either with useRouter or passing props
  }
}
Copy

useRouter Secondly the easiest useRouter. When I first did this I came across the problem when nextjs/react hydrates there will be a point when the query params are null. Luckily useRouter has isReady!

import Router, { useRouter } from "next/router";

const { query, isReady } = useRouter();

useEffect(() => {
  if (!isReady) return;
  if (!query.token) {
    Router.push("/")
  }
}, [isReady])
Copy

Middleware now this is my personal favourite as it seperates the functionality in a clean way imo. I found this based of a vercel example. I would highly recommend reading through a bunch of these to find best practices. https://github.com/vercel/examples/

import { NextResponse, NextRequest } from 'next/server'

export async function middleware(req) {
    const { pathname, searchParams } = req.nextUrl

    if (pathname == '/reset-token') {
        const index = searchParams.findIndex(x => x.key === "token")
        // You could also add token validation here.
        if (!index) {
          return NextResponse.redirect('/')
        }
    }
    return NextResponse.next()
}
Copy

Here is the repo which has some cool filtering of query parameters. This is a more soft approach instead of hard redirecting. https://github.com/vercel/examples/tree/main/edge-functions/query-params-filter

Nico also has a great answer on this, expect I wouldn't recommend using hooks like in his example, instead use isReady. https://stackoverflow.com/a/58182678/4918639

Answer 5

For NextJS version - 12.0.8

"If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps."

=async functions

refference:https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#getserversideprops

Simply putting that async function on the page notifies NextJS of its presence.During prerendering stage of the component, the query object of the router will be empty.

isReady: boolean - Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server.

refference: https://nextjs.org/docs/api-reference/next/router

solution:

import { useRouter } from 'next/router';

const Fn = () =>{

const router = useRouter();
const { param } = router.query;

const fetchData = async () => {
   await fetch();
} 

 useEffect(() => {
   fetchCat();
}, [router.isReady]);

}
Copy

Answer 6

? For Class Component Lovers

The even better approach is to listen for a dedicated event for this routeChangeComplete using this.props.router.events.on method, inside componentDidMount if you're using class component -

routeChangeComplete = () => {
    // this WILL have valid query data not empty {}
    console.log(this.props.router.query);
};
componentDidMount() {
    this.props.router.events.on("routeChangeComplete", this.routeChangeComplete);
}
componentWillUnmount() {
    this.props.router.events.off("routeChangeComplete", this.routeChangeComplete);
}
Copy

Ref: https://nextjs.org/docs/api-reference/next/router#routerevents

routeChangeComplete: Fires when a route changed completely.

Practically when isReady has become true or when router.query object has data.

Answer 7

I resolved my problem that I need it in Hoc component. I wrapped using withRouter(withLocale(Comp)) and create conditional in HOC

export default function withLocale(WrappedPage) {
    const WithLocale = ({ router, ...props }) => {
        const { lang } = router.query;
        if (!lang || !isLocale(lang)) {
            return <Error statusCode={404} />;
        }
        return (
            <LocaleProvider lang={lang}>
                <WrappedPage {...props} />
            </LocaleProvider>
        );
    };
   return WithLocale;
}
Copy

Answer 8

Next.js <= 10.0.5

This is a good work around, I found around from this comment

Add useQuery.ts helper file

// useQuery.js
import { useRouter } from 'next/router';

// Resolves query or returns null
export default function useQuery() {
  const router = useRouter();
  const ready = router.asPath !== router.route;
  if (!ready) return null;
  return router.query;
}
Copy

usage

// In your components (instead of useRouter)
const query = useQuery();

useEffect(() => {
  if (!query) {
    return;
  }
  console.log('my query exists!!', query);
}, [query]);
Copy