Encountering challenges in seamlessly serving app router directories from dedicated subdomains in Next.js? This article will guide you through a robust solution to this problem. Let's dive into the intricacies of subdomain routing and how to implement it effectively.
App Structure
📦app
┣ 📂blog
┃ ┗ 📜page.tsx
┣ 📂home
┃ ┗ 📜page.tsx
┣ 📂admin
┃ ┗ 📜page.tsx
┗ 📜layout.tsx
Now, the goal is to serve the following paths on dedicated subdomains:
/blog
onblog.code-specialist.local
/home
oncode-specialist.local
/admin
onadmin.code-specialist.local
Roadblocks in Existing Solutions
Despite multiple methods described in the Next.js documentation, issues, and discussions, finding a solution without limitations can be challenging. This article aims to provide a clear and effective approach to overcome these hurdles.
Hosts file
To ensure seamless local development, add the following entries to your /etc/hosts
file:
127.0.0.1 admin.code-specialist.local
127.0.0.1 code-specialist.local
127.0.0.1 blog.code-specialist.com
For Windows users, locate the file at %windir%\system32\drivers\etc
.
NGINX Configuration
The key to successful subdomain routing lies in the NGINX configuration. Below is an exemplary configuration for routing the blog subdomain:
server {
listen 80;
listen [::]:80;
keepalive_timeout 60;
server_name blog.code-specialist.local;
# Exclude resource requests from being rewritten
location ~* \.(js|css|svg|jpg|jpeg|png|gif|ico|json|woff|woff2|ttf|eot)$ {
proxy_pass http://host.docker.internal:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# Exclude requests to /_next from being rewritten
location ^~ /_next {
proxy_pass http://host.docker.internal:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location / {
proxy_pass http://host.docker.internal:3000/blog;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# Named location for non-root paths
location ~ ^/(?<path>.+)$ {
proxy_pass http://host.docker.internal:3000/blog/$path;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
Note the crucial lines at 7
, 26
, and 35
that facilitate the routing. Similar configurations can be applied for the other subdomains. Make sure that rewrites are disabled for both _next
resources and media assets.
You can find a comprehensive example of this configuration in action at https://github.com/code-specialist/nextjs-nginx-app-router-subdomains.