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?? — juliomalves
– juliomalves, Commented Feb 26, 2022 at 1:11

barrilocho · Accepted Answer · 2022-02-26 15:53:06Z

1

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

edited Feb 26, 2022 at 15:53

answered Feb 26, 2022 at 15:45

barrilocho

1393 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon · Accepted Answer · 2022-02-25 23:00:13Z

0

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>
  )
}

answered Feb 25, 2022 at 23:00

Jon

4452 gold badges12 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related