Unlock the Power of Next.js Zones

As frontend developers, we’re constantly on the lookout for innovative solutions to streamline our workflow and boost productivity. That’s where Next.js comes in – a revolutionary tool that has taken the development world by storm. With its incredible features, Next.js enables us to build production-ready apps quickly and efficiently.

The Challenge of Monolithic Apps

In real-world scenarios, multiple teams often work on individual pages or components, making it impractical to expect them to commit to a monolithic codebase. This is where Next.js zones come into play. According to the Next.js documentation, a zone is a single deployment of a Next.js app, allowing multiple zones to be accessed under a single URL.

How Next.js Zones Work

Unlike other Next.js features, zones don’t have specific APIs; instead, they rely on HTTP proxies. You can implement multiple zones using inbuilt support or create your own custom HTTP proxy. While some platforms make it easy to deploy zones, they don’t provide examples for custom proxies, leaving developers to explore alternative solutions.

Implementing Zones with Vercel

Using Vercel, implementing zones is a breeze. Simply list the builds of your individual apps and the routes for serving them in vercel.json, and you’re good to go.

{
  "version": 2,
  "builds": [
    {
      "src": "home/**",
      "dest": "home"
    },
    {
      "src": "about/**",
      "dest": "about"
    }
  ]
}

Custom Proxy Implementation

For a custom proxy, create a proxy server (like an Nginx server) that redirects internally to the respective Next.js apps. This approach requires careful consideration of two critical factors:

• Unique Page Names: Ensure that all pages across all zones have unique names, as Next.js doesn’t allow duplicate page names.
• Static File Conflicts: Leverage the assetPrefix to enable unique paths for all static files, avoiding potential conflicts.

Sample Implementation

Let’s explore a sample implementation using an HTTP proxy. Create two Next.js apps (home and about), run them independently on different ports, and then create an Nginx reverse proxy to access both apps through a single URL.

# Run home app on port 3000
npx next start --port 3000 &

# Run about app on port 3001
npx next start --port 3001 &

# Nginx reverse proxy configuration
http {
   ...
    upstream home {
        server localhost:3000;
    }

    upstream about {
        server localhost:3001;
    }

    server {
        listen 80;

        location /home {
            proxy_pass http://home;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

        location /about {
            proxy_pass http://about;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
}

Unlocking the Full Potential of Next.js Zones

By decoupling applications, Next.js zones offer a promising solution for larger teams. When combined with webpack module federation, this feature has the potential to revolutionize micro-frontends. Share your thoughts on how you’re using Next.js zones in the comments below!