How to get page URL or hostname in NextJs Project?

reactjs next.js hostname domain-name base-url
Raju Ahammad picture Raju Ahammad · Dec 8, 2020 · Viewed 13.3k times · Source

I want to get the page's full URL or site hostname like the image below on Static Site Generator.

I will try with window.location.hostname, but it doesn't work.

The error: window not defined.

enter image description here

Answer

Aadil Mehraj picture Aadil Mehraj · Dec 8, 2020

The place where you are accessing the window make sure you add a check so that code is executed only on the browser and no during SSG"

if (typeof window !== 'undefined') {
   const hostname = window.location.hostname;
}

Update: If you have specified basePath in next.config.js:

module.exports = {
  basePath: 'https://www.example.com/docs',
}

Then using useRouter, you can access the base path:

import { useRouter } from 'next/router'

function Component() {
   const router = useRouter();
   
   console.log({ basePath: router.basePath}); 
   // { basePath: 'https://www.example.com/docs' }

   ...
}

But if you have a relative base path then you can use the first approach

Related questions

Window is not defined in Next.js React app

In my Next.js app I can't seem to access window: Unhandled Rejection (ReferenceError): window is not defined componentWillMount() { console.log('window.innerHeight', window.innerHeight); }

Read More
Next.js Redirect from / to another page

I'm new in Next.js and I'm wondering how to redirect from start page ( / ) to /hello-nextjs for example. Once user loads a page and after that determine if path === / redirect to /hello-nextjs In react-router we do something like: <Switch&…

Read More
What's the right way to float right or left using the material-ui appbar with material-ui-next?

I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",) It seems they removed iconElementRight= from the api. Do we have to use the <…

Read More