CODEWITHSUNDEEP
ipnext.jsserver-side-renderingclientip
EverStarck
EverStarck

Reputation: 53

Get the client IP on NextJS and use SSR

I'm making a weather app, and I get the client IP with IPIFY, but this loses SSR, or I use SSR and I get the server IP. Someone told me that I could use the header x-forwarded-for and then, with this value, make the weather API call with SSR.

The problem is I'm using only nextjs, no backend here, and second, I don't know how to call or use x-forwarded-for in the front to get the client IP.

  1. Is this possible?

  2. How I can implement that?

I'm using vercel to deploy the app.

Upvotes: 4

Views: 15950

Answers (3)

Merlo
Merlo

Reputation: 761

Here you go:

export async function getServerSideProps({ req }) {
  const forwarded = req.headers["x-forwarded-for"]
  const ip = forwarded ? forwarded.split(/, /)[0] : req.connection.remoteAddress
  return {
    props: {
      ip,
    },
  }
}

Upvotes: 4

Diogo Capela
Diogo Capela

Reputation: 6570

Updated answer as request.connection is deprecated since Node.js v13.0.0. So we should now use request.socket instead.

export const getServerSideProps = async ({ req }) => {
  const forwarded = req.headers['x-forwarded-for'];

  const ip = typeof forwarded === 'string' ? forwarded.split(/, /)[0] : req.socket.remoteAddress;

  console.log(ip);

  return {
    props: { ip },
  };
};

Upvotes: 10

Ryan W
Ryan W

Reputation: 6173

I think you can get them through getServerSideProps.

export async function getServerSideProps({ req }) {
  console.log(req.headers) //see if you have those headers
  return {
    props: {
      headers
    },
  }
}

function Page({ headers }) {
  // Render data...
}

Upvotes: 0

Related Questions