How to get absolute URL in production?

In Next.js, you can utilize the useRouter hook provided by Next.js or employ getServerSideProps, getStaticProps, or getInitialProps (not recommended as it is no longer the primary rendering method of Next.js) to obtain the current page URL. Below are different methods to retrieve the page URL in a production environment:

Using useRouter

If you are developing a function component, you can use the useRouter hook to retrieve the current page URL.

jsx
import { useRouter } from 'next/router';

function PageComponent() {
  const router = useRouter();
  
  console.log('Current page URL:', router.asPath); // Retrieve path and query string
  console.log('Full current URL:', `${window.location.origin}${router.asPath}`); // Valid only in client-side code

  return (
    <div>
      <p>Current page URL: {router.asPath}</p>
    </div>
  );
}

export default PageComponent;

Note: window.location.origin is only accessible in the browser environment, so it cannot be directly used in server-side rendered code. Attempting to use the window object directly in Next.js server-side rendering will result in errors.

Using getServerSideProps

If you need to retrieve the page URL on the server side and pass it as a prop to the page component, you can use getServerSideProps.

jsx
export async function getServerSideProps(context) {
  const { req } = context;
  const host = req.headers.host; // Retrieve hostname and port
  const protocol = req.headers['x-forwarded-proto'] || 'http'; // Retrieve protocol, or assume HTTP
  const url = `${protocol}://${host}${req.url}`; // Construct full URL

  return {
    props: { url }, // Pass URL as a prop to the page component
  };
}

function PageComponent({ url }) {
  return (
    <div>
      <p>Current page URL: {url}</p>
    </div>
  );
}

export default PageComponent;

Note: When using getServerSideProps, the req object represents the HTTP request object, from which you can obtain details such as the hostname, port, and path. This approach operates solely on the server side as it involves the Node.js HTTP request object.

Using Environment Variables

Sometimes, you may have a fixed production URL that can be set as an environment variable. Then, you can use it in your code via process.env.

jsx
// .env.production
NEXT_PUBLIC_BASE_URL=https://your-production-site.com

// In your page or component code
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

function PageComponent() {
  const router = useRouter();
  const fullPath = `${baseUrl}${router.asPath}`;

  return (
    <div>
      <p>Current page URL: {fullPath}</p>
    </div>
  );
}

export default PageComponent;

Here, NEXT_PUBLIC_BASE_URL is defined in the .env.production file and contains your production URL. Note that any environment variable prefixed with NEXT_PUBLIC_ is exposed to the browser.

These methods allow you to retrieve the page URL in your Next.js application, whether on the server side or client side. Choose the method that best suits your specific requirements.