How to access Next.js Application from a fixed Hostname in Local Environment?

Question

Let's say I have a Next.js Application. Which is working properly. The application is currently accessible through http://localhost:4000 or http://somehostname.local:4000

here, I have set

127.0.0.1 somehostname.local

in my hosts file.

But, I want this Next.js application to only be accessible from http://somehostname.local:4000 only, in my local environment.

How would I do it?

Answer 1

That's inevitable, in your hosts file the name localhost is referencing the loop IP (127.0.0.1), which means your local environment.

So even by using somehostname.local which is a new name for the local area, the localhost exists.

If you want to use localhost for another project, you can use a different port or default port (80) for another project.

If that's your utter decision to have got somehostname.local for the current NextJs project and localhost for another one even with the same port, you must install and use NGINX on your system to add policies that I won't proffer to you at all.

Answer 2

Did you tried using -H in nextjs scripts? i think this works fine for your situation. see the documentation.

Answer 3

This may be a bit fiddly, but you could try to accomplish this with an Express Server in the background.

Try it out with a server.js in the root folder of your project:

import express from 'express';
import next from 'next';

const port = process.env.PORT || 4000;

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {

  const server = express();

  server.get('*', (req, res) => {

    const hostname = req.hostname;

    if(hostname !== 'somehostname.local') {
      res.status(404).end();
      return;
    }

    return handle(req, res);

  });

  server.listen(port, () => {
    console.log(`Listening on port ${port}`);
  });

});

Then update your package.json like this:

"dev": "node server.js",

Have not verified this, but should work, if I'm not mistaken.

Answer 4

I can't figure out why you need to block localhost when serving locally? I'd love to hear your rationale.

You won't be able to achieve this with the default config since the default config is the same as using

npm run dev -H localhost

and localhost will by default resolve to 127.0.0.1 so localhost and somehostname.local are essentially the same alias in your scenario. In theory you could remove the localhost alias, but that breaks lots of things and is highly not recommended.

However you can achieve what you want with a firewall and using your local IP. This is kind of hacky and will break if your network or IP changes, but it's technically possible.

Alias somehostname.local to your local IP address in your hosts file:

xxx.xxx.xxx.xxx somehostname.local

Then run the next server on your alias with

npm run dev -H somehostname.local

or add it to your scripts or config file.

This will make the next app available on the local network so set your firewall to block lan access to port 4000 and allow local access:

iptables -A INPUT -p tcp --dport 4000 -s xxx.xxx.xxx.xxx -j ACCEPT
iptables -A INPUT -p tcp --dport 4000 -j DROP

This will serve on http://somehostname.local:4000 but not on http://localhost:4000.

I still can't imagine a scenario where blocking localhost is important, and since this solution breaks when your local IP changes it seems like a poor approach. I suppose you could script automatic updates of the firewall rules and hosts file, but why?