How to get page URL or hostname in NextJs Project?
<p>To obtain the page URL or hostname in a Next.js project, you can utilize various approaches depending on your specific requirements. Here are some common solutions:</p>
<h3>1. Using the <code>window.location</code> Object:</h3>
<p>This method involves accessing the <code>window.location</code> object, which is available in the browser environment. Make sure to enclose the code within a conditional check to ensure execution only on the client side:</p>
<pre>
<code>
if (typeof window !== 'undefined') {
const hostname = window.location.hostname;
}
</code>
</pre>
<p>Note: When using <code>window.location</code>, you must ensure that the code is executed only on the client-side and not during server-side rendering (SSR), where <code>window</code> is not available.</p>
<h3>2. Utilizing the <code>useRouter</code> Hook:</h3>
<p>Next.js provides the <code>useRouter</code> hook, which offers access to information about the current routing state. You can employ this hook to obtain the page's URL or hostname:</p>
<pre>
<code>
import { useRouter } from 'next/router'
function Component() {
const router = useRouter();
console.log({ basePath: router.basePath}); // { basePath: 'https://www.example.com/docs' }
...
}
</code>
</pre>
<h3>3. Leveraging the <code>next-absolute-url</code> Package:</h3>
<p>You can utilize the <code>next-absolute-url</code> package to conveniently obtain the absolute URL of the current page. This is particularly useful when working with dynamic routing:</p>
<pre>
<code>
import absoluteUrl from 'next-absolute-url'
const { origin } = absoluteUrl(req)
const apiURL = `${origin}/api/job.js`
</code>
</pre>
<h3>4. Combining <code>useRouter</code> and <code>useEffect</code> Hooks:</h3>
<p>You can combine the <code>useRouter</code> and <code>useEffect</code> hooks to dynamically update the URL or hostname based on routing changes:</p>
<pre>
<code>
function Component() {
useEffect(() => {
console.log(window.location.hostname)
console.log(window.location.href) // Logs `http://localhost:3000/blog/incididunt-ut-lobare-et-dolore`
}, [])
// Remaining code of the component
}
</code>
</pre>
<h3>5. Accessing the URL Parameters with <code>useSearchParams</code>: </h3>
<p>To retrieve the URL parameters (query string) in Next.js, you can utilize the <code>useSearchParams</code> hook. This hook provides a convenient way to interact with the query string parameters:</p>
<pre>
<code>
import { useSearchParams } from "next/router";
function Component() {
const [searchParams] = useSearchParams();
const id = searchParams.get("id");
// Use the variable as needed within the component
}
</code>
</pre>