In Next.js, we can get current url domain with the help of built-in methods like window and document location. In this article, we’ll explore different approaches and best practices for obtaining the current URL domain in Next.js applications.

The approaches to get the URL of the current domain in next.js are given below:

Why Accessing the Current URL Domain is Important ?

Obtaining the current URL domain is useful for various purposes in web development, such as:

1. Dynamic Content: Displaying content based on the current domain or subdomain.
2. Analytics and Tracking: Tracking user behavior or performing analytics based on the domain.
3. Localization: Determining the user’s location or language preference based on the domain.
4. SEO (Search Engine Optimization): Customizing meta tags or content based on the domain for better search engine visibility.

Steps to Create the Next.js Application

Step 1: Set up React Project using the Command:

npx create-next-app url-domain

Step 2: Navigate to the Project folder using:

cd url-domain

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.1"
}

Approach 1: Using window.location

To get the current URL domain in Next.js using window.location, use the useEffect hook to access window.location.origin on the client side, ensuring the code runs only after the component mounts. When the button is clicked, the handleGetDomain function updates the state with window.location.origin, dynamically displaying the current URL domain in the component.

Syntax:

window.location.origin

Example: The below example uses window.location to Get The Current URL Domain in NextJS.

//src/app/page.js

"use client";
import { useState } from 'react';
const HomePage = () => {
    const [currentDomain, setCurrentDomain] = useState('');
    const handleGetDomain = () => {
        setCurrentDomain(window.location.origin);
    };
    return (
        <div>
            <h1>Using window.location</h1>
            <button onClick={handleGetDomain}>Get Current Domain</button>
            {currentDomain && <h2>Current URL Domain: {currentDomain}</h2>}
        </div>
    );
};
export default HomePage;

Step to run the application: Now run the application with the below command:

npm run dev

Output:

Approach 2: Using document.location

In this approach, we are using the useState hook in a Next.js page component (HomePage) to manage states for the current URL’s hostname, protocol, port, and the full URL itself (currHostName, currProtocol, currPort, and currURL). By invoking document.location and window.location properties within the handleGetURLDetails function, we dynamically fetch and display the corresponding URL details when the “Get URL Details” button is clicked.

Syntax:

document.location.href

Example: The below example uses document.location to Get The Current URL Domain in NextJS.

//src/app/page.js

"use client";
import React, { useState } from 'react';
const HomePage = () => {
    const [currHostName, setCurrentHostname] = useState('');
    const [currProtocol, setCurrentProtocol] = useState('');
    const [currPort, setCurrentPort] = useState('');
    const [currURL, setCurrentURL] = useState('');

    const handleGetURLDetails = () => {
        setCurrentHostname(document.location.hostname);
        setCurrentProtocol(document.location.protocol);
        setCurrentPort(document.location.port || 'Default');
        setCurrentURL(document.location.href);
    };
    return (
        <div>
            <h1>Using document.location</h1>
            <button onClick={handleGetURLDetails}>Get URL Details</button>
            <div>
                <p>Current URL: {currURL}</p>
                <p>Hostname: {currHostName}</p>
                <p>Protocol: {currProtocol}</p>
                <p>Port: {currPort}</p>
            </div>
        </div>
    );
};
export default HomePage;

Step to run the application: Now run the application with the below command:

npm run dev

Output: