How To Get The Current URL Domain In Next.js

When building a Next.js app, one of the common tasks developers face is determining the current URL domain. Whether you need this information for analytics, dynamic rendering, or creating SEO-friendly meta tags, understanding how to access the current path or full domain dynamically is crucial.

This blog explains step-by-step how to fetch the current URL in Next.js using both server components and client components, ensuring your approach fits the context of your application.

Why Fetch the Current URL Domain in Next.js?

Fetching the current URL is vital in scenarios where your Next.js app needs to:

• Generate dynamic meta tags for SEO.

• Redirect users based on their current path or hostname.

• Dynamically load content based on the protocol, domain, or route.

• Integrate with third-party APIs requiring the full URL.

In Next.js, this can be achieved using both client components and server components, depending on where you need the data.

Understanding the Context: Server vs. Client Side

Before diving into code, let’s clarify where and how you can access the current URL:

1. Client Side: On the client side, you can use the window object to fetch the location details. However, client components are required to access browser-specific APIs like the window object.

2. Server Side: On the server, you don’t have access to the window object, but you can extract the hostname and protocol from the headers or context during the request lifecycle.

How to Get the Current URL in Next.js

1. Getting the Current URL in Client Components

To fetch the current URL on the client side, you’ll rely on the window object. Since accessing window is specific to the browser, you must ensure the code runs in a client component.

Example Code: Fetching the URL in a Client Component

Copy
"use client";

import { useEffect, useState } from "react";

export default function CurrentURL() {
  const [currentUrl, setCurrentUrl] = useState("");

  useEffect(() => {
    if (typeof window !== "undefined") {
      // Access the current URL using the window object
      setCurrentUrl(window.location.href);
    }
  }, []);

  return (
    <div>
      <h1>Current URL</h1>
      <p>{currentUrl ? `The current URL is: ${currentUrl}` : "Loading..."}</p>
    </div>
  );
}

Key Notes:

• Use typeof window to ensure safe access to the window object.

• Wrap the logic in a useEffect hook to prevent server-side execution.

2. Getting the Current URL in Server Components

In server components, the window object is not available, but you can fetch the current URL using the headers object from the request.

Example Code: Fetching the URL in a Server Component

Copy
export default async function ServerURL({ headers }) {
  const host = headers["x-forwarded-host"] || headers.host;
  const protocol = headers["x-forwarded-proto"] || "https";

  const fullUrl = `${protocol}://${host}`;

  return (
    <div>
      <h1>Server-Side Current URL</h1>
      <p>The full URL is: {fullUrl}</p>
    </div>
  );
}

Key Notes:

• Use the x-forwarded-host and x-forwarded-proto headers to fetch the hostname and protocol.

• This approach is ideal for SSR (Server-Side Rendering) and API routes.

3. Using the next/router in Pages Directory

For apps built using the pages directory, you can utilize the next/router library to get the current path and query parameters.

Example Code: Using next/router

Key Notes:

• The useRouter hook provides the pathname and asPath properties.

• Ideal for routing and working within the pages directory.

4. Creating a Helper Function to Get the URL

If you frequently need to get the current URL, a helper function can streamline your code. Here’s how you can create one:

Example Code: Helper Function

Usage Example:

Common Pitfalls to Avoid

1. Accessing window on the server: If you attempt to access window in a server component, you'll encounter an error since the window object is undefined on the server.

2. Undefined Headers: Always ensure headers are properly passed when working on the server. Missing headers can lead to incomplete URLs.

3. Default Protocol Assumption: Ensure you handle cases where the protocol is not defined in the headers, defaulting to https when necessary.

The Bottom Line!

Fetching the current URL domain in a Next.js app requires understanding the context (client vs. server) and the tools available, such as the window object, next/router, and request headers. By using client components for client-side operations and server components for server-side rendering, you can handle dynamic URLs efficiently.

Whether you need the current path for routing, the full URL for analytics, or the hostname for API requests, Next.js provides robust mechanisms to achieve your goals. Mastering this will enhance your Next.js app's performance, SEO, and user experience.

import { useRouter } from "next/router";

export default function CurrentPath() {
  const router = useRouter();

  return (
    <div>
      <h1>Current Path</h1>
      <p>The current path is: {router.pathname}</p>
      <p>Full URL: {router.asPath}</p>
    </div>
  );
}

export function getCurrentUrl(headers) {
  const protocol = headers["x-forwarded-proto"] || "https";
  const host = headers["x-forwarded-host"] || headers.host;

  return `${protocol}://${host}`;
}

import { getCurrentUrl } from "./helpers";

export default function ServerSideExample({ headers }) {
  const fullUrl = getCurrentUrl(headers);

  return <p>The full server URL is: {fullUrl}</p>;
}