How to get the current full URL in Next.js/Typescript component?

Question

I have a component that I need to get the current full URL in, here's the simplied version:

/**
 * Share dropdown component
 */
export const ShareDropdown: React.FC<{ className: string }> = ({
  className,
}) => {
  return (
    <div className={className}>{currentURL}</div>
  )
}

Did some Googling and saw some say use Next's router (but didn't see that return the domain), other using getInitialProps but didn't see how to incorporate into a functional component.

New to all of this, so just trying to find the best way, seems like it should be simple.

Does this answer your question: [How to get page URL or hostname in NextJs Project?](https://stackoverflow.com/questions/65199051/how-to-get-page-url-or-hostname-in-nextjs-project)? — juliomalves, Feb 26 '22 at 01:11

barrilocho · Accepted Answer · 2022-02-26T15:53:06.790

You can use simply useRouter from nextjs just like this

import { useRouter } from 'next/router';
...
const { asPath } = useRouter();
...
return (
   <div className={className}>http://example.com{asPath}</div>
)

Additionally you can save http://example.com in your environment variables

If you have configured a base path you need to get it

 import { useRouter, basePath } from 'next/router';

More info about useRouter here

score 0 · Answer 2 · answered Feb 25 '22 at 23:00

Store window.location.href as a variable. so, like: const URL = window.location.href and then simply put {URL} here:

/**
 * Share dropdown component
 */
export const ShareDropdown: React.FC<{ className: string }> = ({
  className,
}) => {
const URL = window.location.href
  return (
    <div className={className}>{URL}</div>
  )
}

How to get the current full URL in Next.js/Typescript component?

2 Answers2