Next.js: How to Get User’s IP Address

Updated: January 14, 2023 By: Khue One comment

There might be cases where you want to get the IP address from where the user is viewing the current page of your Next.js app (e.g., you want to serve different content for each region or just for analytics purposes). You can do so on the server side by using the getServerSideProps() function or in API routes.


// pages/index.js

export default function Home(props) {
  const ip = props.ip;
  return (
    <div style={{ width: '100vw', height: '100vh', padding: 30 }}>
        IP Address <span style={{ color: 'blue' }}>{ip}</span>

export async function getServerSideProps(context) {
  let ip;

  const { req } = context;

  if (req.headers['x-forwarded-for']) {
    ip = req.headers['x-forwarded-for'].split(',')[0];
  } else if (req.headers['x-real-ip']) {
    ip = req.connection.remoteAddress;
  } else {
    ip = req.connection.remoteAddress;

  return {
    props: {

If you run the code above in production mode on a real server, you’ll get the real IP address. If you run it in development mode on your computer, you’ll get the result as follows:

Note: Modern computers use IPv6 by default when available. ::1 is a shortened notation of the IPv6 loopback address. The equivalent of IPv4 loopback

Getting the client IP address in API routes is similar:

// pages/api/hello.js
export default function handler(req, res) {
  let ip;

  if (req.headers["x-forwarded-for"]) {
    ip = req.headers["x-forwarded-for"].split(',')[0]
  } else if (req.headers["x-real-ip"]) {
    ip = req.connection.remoteAddress
  } else {
    ip = req.connection.remoteAddress


  res.status(200).json({ name: 'John Doe' })

Hope this helps.

1 Comment
Newest Most Voted
Inline Feedbacks
View all comments