Next.js Get Current URL: Simple Methods for Developers

Ever wondered how to get the current URL in a Next.js app? 🌍

Whether you're building dynamic pages or working with routing, knowing how to fetch the current URL is a key skill.

In this blog, we’ll walk you through simple steps to use Next.js get current URL effectively, helping you streamline your development process.

Let’s get started! 🚀

Why Fetching the Current URL Matters

The current URL is not just a string representing the address bar content—it’s a gateway to contextual data like the query string, the current pathname, and even metadata tied to the current page. In Next.js, how you fetch this information depends on whether you're operating on the client side or the server side, which introduces concepts like client components, server components, and their respective hooks.

Getting the Current URL in Next.js with the App Router

The app router, introduced in Next.js 13, shifts routing logic to server components by default. To get the current URL in this context, you'll often combine server-side rendering with client components for interactivity.

Example 1: Fetching Current URL in a Server Component

In server components, you can extract the current pathname and other parameters directly from the context of a request. Here's an example:

Copy
1
2
3
4
5
6
7
8
9
10
11
export default async function Page({ params }) {
  const currentPath = params.slug || ""; // Extract path parameters
  const fullUrl = `https://example.com/${currentPath}`;

  return (
    <div>
      <h1>Current Path: {currentPath}</h1>
      <p>Complete URL: {fullUrl}</p>
    </div>
  );
}

Example 2: Combining Server Components and Client Components

If you need dynamic behavior, you'll use a client component to access the router object and log the current URL.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"use client";
import { useRouter } from "next/router";

export default function CurrentUrlComponent() {
  const router = useRouter();
  const currentPath = router.asPath;

  console.log("Current Path:", currentPath);

  return (
    <div>
      <h1>The current path is: {currentPath}</h1>
    </div>
  );
}

Getting Current URL in the Pages Router

If you're using the traditional pages directory, fetching the current URL requires slightly different steps. The pages router still heavily relies on client-side rendering, meaning you'll frequently use the userouter hook.

Example 3: Accessing Current URL in the Pages Directory

Here’s how you can get the current URL using the pages router:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useRouter } from "next/router";

const CurrentPage = () => {
  const router = useRouter();
  const currentPathname = router.pathname; // Get the current pathname
  const queryStringParsed = router.query; // Parse the query string

  console.log("Current Pathname:", currentPathname);
  console.log("Query Parameters:", queryStringParsed);

  return (
    <div>
      <h1>Path: {currentPathname}</h1>
      <h2>Query String: {JSON.stringify(queryStringParsed)}</h2>
    </div>
  );
};

export default CurrentPage;

In the above example, we’re leveraging the router object to extract both the current path and any query parameters.

Working with useRouter and Dynamic Routes

When you're dealing with dynamic routes, the useRouter hook is a powerful tool for client components. Let’s look at another example to see how it works with dynamic path values.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useRouter } from "next/router";

const DynamicPage = () => {
  const router = useRouter();
  const { slug } = router.query; // Access dynamic route parameters

  console.log("Dynamic Route Slug:", slug);

  return (
    <div>
      <h1>Dynamic Slug: {slug}</h1>
    </div>
  );
};

export default DynamicPage;

This method is perfect when building features like login pages, dashboards, or other dynamic components.

Handling URL Fetching on the Server Side

The server-side rendering approach can fetch the current URL even when JavaScript is disabled in the browser. Use the context.req object in getServerSideProps.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export async function getServerSideProps(context) {
  const currentUrl = `${context.req.headers.host}${context.resolvedUrl}`;
  console.log("Full URL:", currentUrl);

  return {
    props: {
      currentUrl,
    },
  };
}

const ServerRenderedPage = ({ currentUrl }) => {
  return (
    <div>
      <h1>Server-Rendered Current URL: {currentUrl}</h1>
    </div>
  );
};

export default ServerRenderedPage;

Common Errors When Fetching the Current URL

Fetching the current URL in Next.js can sometimes throw errors if you mix client-side and server-side methods improperly. Here are common pitfalls:

1. Error: Cannot access window in a Server Component

   • This happens when trying to access the browser object like window in a server component. Always wrap such logic in client components.

2. Error: Router not defined

   • Ensure you’ve imported the useRouter hook from next/router in your client component.

3. Incomplete URLs

   • To fetch the complete URL, include the domain manually as shown in the getServerSideProps example.

Best Practices for Fetching URLs in Next.js

1. Use client components sparingly for interactive features.

2. Leverage server components and static async getInitialProps for optimized data fetching.

3. Always test for edge cases, such as missing query parameters or unsupported routes.

The Bottom Line!

In this blog, we’ve walked through simple methods to get the current URL and how it can be used in your applications. From using built-in hooks like useRouter to leveraging server-side methods, these techniques will help you handle URLs efficiently.

Mastering how to get the current URL in Next.js is a valuable skill for any developer. By understanding these methods, you can build more dynamic and responsive applications. Keep practicing and experimenting to make the most of these URL handling techniques in your Next.js projects!

Happy coding! 💻🚀