Next.js 13 current URL

When working with Next.js 13, you may come across the need to access the current URL in your application. Whether you want to display it to the user or use it for some other purpose, there are a few ways to achieve this. In this blog post, we will explore two solutions to get the current URL in Next.js 13.

Solution 1: Using the useRouter hook

The useRouter hook provided by Next.js allows you to access the current URL among other router-related information. Here’s how you can use it:

import { useRouter } from 'next/router';

export default function MyComponent() {
  const router = useRouter();
  const currentUrl = router.asPath;

  return (
    
      Current URL: {currentUrl}
    
  );
}

In the above code snippet, we import the useRouter hook from the ‘next/router’ package. We then use this hook to access the current URL using the ‘asPath’ property. Finally, we display the current URL to the user.

Solution 2: Using the window.location object

If you prefer a more traditional approach, you can also use the window.location object to get the current URL. Here’s an example:

export default function MyComponent() {
  const currentUrl = window.location.href;

  return (
    
      Current URL: {currentUrl}
    
  );
}

In the code snippet above, we directly access the window.location.href property to get the current URL. This approach works well if you don’t need to handle server-side rendering or if you are working with Next.js in a client-only environment.

Now that we have explored two solutions to get the current URL in Next.js 13, you can choose the one that best suits your needs. Whether you prefer using the useRouter hook or the window.location object, both methods will provide you with the current URL of your Next.js application.

Happy coding!

Next.js 13 current URL