get ip in nextjs

How to Get IP in NextJS

If you are trying to get the IP address of the user who is visiting your NextJS website, there are a few ways to do it.

Using the Request Object

One way to get the IP address is by using the request object in NextJS. The request object contains information about the incoming request, including the IP address of the user.

export default function Home({ ip }) {
  return (
    <div>
      <p>Your IP address is: {ip}</p>
    </div>
  )
}

export async function getServerSideProps({ req }) {
  const ip = req.headers['x-real-ip'] || req.socket.remoteAddress;
  return { props: { ip } }
}

In this example, we are using the getServerSideProps function to fetch the IP address from the request object. We are checking for two different headers that may contain the IP address. The first header is 'x-real-ip', which is often used by reverse proxies. If that header is not present, we fallback to using req.socket.remoteAddress.

Using a Third-Party API

If you are unable to get the IP address using the request object, you can use a third-party API to fetch the user's IP address. One popular API for this is ipify.org.

export default function Home({ ip }) {
  return (
    <div>
      <p>Your IP address is: {ip}</p>
    </div>
  )
}

export async function getServerSideProps() {
  const res = await fetch('https://api.ipify.org?format=json');
  const { ip } = await res.json();
  return { props: { ip } }
}

In this example, we are fetching the user's IP address from the ipify.org API. We are using the fetch function to make a GET request to the API, and then parsing the JSON response to extract the IP address.

Conclusion

Getting the IP address in NextJS can be done in a few different ways, depending on your requirements. If you have access to the request object, that is the easiest way to get the IP address. Otherwise, you can use a third-party API like ipify.org to fetch the IP address.