Next.js - useRouter() Hook

useRouter hook is used to access the ‘router’ object inside any functional component of your application. Following is an example of useRouter() hook.

import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
  <button type="button" onClick={() => router.push('/about')}>
    About
  </button>
)
}

We have used the router.push() method, it navigates to the defined path.
useRouter is a react hook, so we can not use it in the class component; instead, you have to either use withRouter or wrap your class in a functional component. useRouter() returns definition of the router object. It returns the following properties in the router object.

  • query: It should be an ‘object’ type. The query string is parsed to the object, including the dynamic route. In prerendering, it is an empty object. Default is {}.
  • pathname: It returns the pathname extracted from the page directory. You can create a nested folder structure in the page directory like `pages/blog/nextjs.js`. Pathname will return `blog/nextjs`. It is extracted from a directory.

import { useRouter } from 'next/router'

export default function Page() {
const router = useRouter();
const { pathname } = useRouter();
console.log(pathname);
return ()

}

Output :

  • asPath: asPath property returns pathname extracted from URL.

import { useRouter } from 'next/router'

export default function Page() {
const router = useRouter();
const { asPath } = useRouter();
console.log(asPath);
return ()
}


Output:

  • fallBack: Its boolean type tells whether the page is in fallback mode. In fallback mode, page props are empty. Router. fallback is used to check whether fallback is rendered or not. router. fallback === true, then we can say that fallback is being rendered and vice versa.
  • basePath: It activates the basepath if it is enabled. To deploy the Next.js app within the sub-path of the domain, you can use the basePath property.

It allows us to set the prefix in the app.

module.exports = {
  basePath: '/prefix'
}

  • locale: locale are the UTS Locale Identifiers, a standardized format to define locale. Locale identifiers consist of languages, regions, and scripts and the dash separates them.

Format:   language-region-script

If the user locale is nl-BE and it is not present in your configuration, they will be redirected to nl if available or to the default locale otherwise. If you don't want to support all regions of a country, it is a good practice to include country locales that will act as fallbacks.

// next.config.js
module.exports = {
i18n: {
   // locals will support in our application
  locales: ['en-US', 'fr', 'nl-NL'],

  // This is the default locale
  defaultLocale: 'en-US',
  // list of locale domains and the default locale they should handle  

 domains: [
    {
      domain: 'example.com',
      defaultLocale: 'en-US',
      // an optional http field 

       http: true,
    },
    {
      domain: 'example.nl',
      defaultLocale: 'nl-NL',
    },
  ],
},
}

  • domainLocales:  Any configured domain locales.
  • isReady: Whether the router fields are updated client-side and ready for use.
  • isPreview: Whether the application is currently in preview mode.
Dnyaneshwari Abuj

Dnyaneshwari Abuj

Beed.