https://github.com/code-specialist/nextjs-nginx-app-router-subdomains
Example on how to host directories of the app router as subdomain using NextJS and NGINX
https://github.com/code-specialist/nextjs-nginx-app-router-subdomains
app-router app-router-nextjs approuter nextjs nginx
Last synced: 8 months ago
JSON representation
Example on how to host directories of the app router as subdomain using NextJS and NGINX
- Host: GitHub
- URL: https://github.com/code-specialist/nextjs-nginx-app-router-subdomains
- Owner: code-specialist
- Created: 2023-11-26T13:42:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-11T11:19:06.000Z (about 1 year ago)
- Last Synced: 2025-03-27T09:06:34.627Z (about 1 year ago)
- Topics: app-router, app-router-nextjs, approuter, nextjs, nginx
- Language: TypeScript
- Homepage: https://code-specialist.com/good-to-know/nextjs-approuter-subdomain
- Size: 27.3 KB
- Stars: 5
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NextJS App Router Directories as Subdomains
This repository demonstrates the integration of NGINX with Next.js to facilitate the routing of directories as subdomains.
It serves as supplementary material for the article [Subdomain Routing using directories in Next.js App Router (NGINX).](https://code-specialist.com/good-to-know/nextjs-approuter-subdomain)
## Objective and Anticipated Outcome
The primary goal is to showcase how specific app directories can be served as subdomains using NGINX with Next.js. Consider the following desired outcome:
```
.
└── app/
├── blog/
│ ├── page.tsx
├── home/
│ ├── page.tsx
└── admin/
│ ├── page.tsx
└── layout.tsx
```
- `/blog` on `blog.code-specialist.local`
- `/home` on `code-specialist.local`
- `/admin` on `admin.code-specialist.local`
## Hosts file
Ensure that the following entries are added to your hosts file:
```
127.0.0.1 admin.code-specialist.local
127.0.0.1 code-specialist.local
127.0.0.1 blog.code-specialist.local
```
The hosts file is located at `/etc/hosts` for MacOS and Linux-based systems and `C:\Windows\System32\drivers\etc\hosts` for Windows.
## Pre-requisites
- Docker
- Docker Compose
- NodeJS
- NPM
## How to use
### Set Up Reverse Proxy
1. Navigate to the nginx directory, e.g., cd nginx.
2. In a terminal, execute `docker-compose up` to launch the reverse proxy.
### Run Next.js Application
1. Move to the nextjs directory, e.g., cd nextjs.
2. Install the necessary dependencies using npm install.
3. Start the Next.js app by running npm run dev in a terminal.
4. Visit the following URLs in your browser:
- http://code-specialist.local
- http://admin.code-specialist.local
- http://blog.code-specialist.local
By following these steps, you'll successfully implement subdomain routing for specific app directories using NGINX and Next.js. For a detailed walkthrough, refer to the linked article