Dos subdominios diferentes en un enrutamiento Next.js

Ya no tienes que buscar más por otras webs ya que estás al lugar perfecto, contamos con la respuesta que quieres y sin complicaciones.

Solución:

No puede dividir 1 aplicación Next.js entre subdominios por varias razones. A partir de una experiencia, tenía un requisito similar (3 áreas) Comencé con una aplicación dividida en 3 (usando rutas secundarias)

1. Fugas de activos (css, js libs) entre “áreas”.
2. una gran aplicación con 3 áreas significa que cada cambio requerirá volver a implementar todas las áreas (una gran implementación)
3. El tiempo de construcción para construir 3 áreas será mucho más grande
4. Cada área puede presentar requisitos diferentes, como componentes de interfaz de usuario para el administrador, pero componentes de interfaz de usuario personalizados para el área “frontal”, autenticación, traducciones y muchos más.

Terminó con 3 aplicaciones Next.js separadas que se administraron dentro de los espacios de trabajo de yarn y se implementaron en un área específica.

Después de explicar mi experiencia, puede lograr una configuración con un proxy inverso como nginx para asignar un subdominio a una subruta en su próxima aplicación.

Digamos que tiene 3 áreas, frontal, administrador, usuarios.

www.domain.com/some-page => debe asignarse a localhost:3000/front/some-page.
users.domain.com/some-page => debe asignarse a localhost:3000/users/some-page.
admin.domain.com/some-page => debe asignarse a localhost:3000/admin/some-page.

// www.domain.com.conf 

server 
    listen       80;
    server_name  www.domain.com;
    access_log   /var/log/nginx/access.log  main;
    root         html;

    location / 
      proxy_pass   http://127.0.0.1:3000/front/; // <-- the last slash is important
    

  

users.domain.com.conf

server 
    listen       80;
    server_name  users.domain.com;
    access_log   /var/log/nginx/access.log  main;
    root         html;

    location / 
      proxy_pass   http://127.0.0.1:3000/users/; // <-- the last slash is important
    

  

Presta atención
1. tendrás que volver a escribir static activos también.

Logro crear subdominios usando un servidor expreso personalizado. Esta es una aplicación en blanco sin activos, aún no la he probado en una aplicación real con activos (CSS, imágenes, etc.)

Tengo la siguiente estructura de carpetas de páginas:

pages/
├── admin/
│   ├── index.js
│   └── sample-page.js
└── member/
    ├── index.js
    └── accounts/
        └── dashboard.js

cuando estas usando next dev que es el predeterminado. Esto producirá las siguientes rutas:

• http://lvh.me:3000/admin
• http://lvh.me:3000/admin/página-de-muestra
• http://lvh.me:3000/miembro
• http://lvh.me:3000/member/accounts/dashboard

Pero usando la costumbre server.js archivo y ejecutar nuestro servidor dev usando node server.js esto producirá las siguientes rutas:

• http://admin.lvh.me:3000
• http://admin.lvh.me:3000/muestra-página
• http://lvh.me:3000
• http://lvh.me:3000/cuentas/tablero

El contenido de nuestro server.js expediente:

const express = require('express')
const next = require('next')
const vhost = require('vhost')

const port = process.env.PORT || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next( dev )
const handle = app.getRequestHandler()

app.prepare().then(() => 
  const mainServer = express()
  const adminServer = express()
  const memberServer = express()

  adminServer.get('/', (req, res) => 
    return app.render(req, res, '/admin', req.query)
  )

  adminServer.get('/*', (req, res) => 
    return app.render(req, res, `/admin$req.path`, req.query)
  )

  adminServer.all('*', (req, res) => 
    return handle(req, res)
  )

  memberServer.get('/', (req, res) => 
    return app.render(req, res, '/member', req.query)
  )

  memberServer.get('/*', (req, res) => 
    return app.render(req, res, `/member$req.path`, req.query)
  )

  memberServer.all('*', (req, res) => 
    return handle(req, res)
  )

  mainServer.use(vhost('admin.lvh.me', adminServer))
  mainServer.use(vhost('lvh.me', memberServer))
  mainServer.use(vhost('www.lvh.me', memberServer))
  mainServer.listen(port, (err) => 
    if (err) throw err

    console.log(`> Ready on http://lvh.me:$port`)
  )
)

Vea el repositorio para ver esto en acción.

Repositorio: https://github.com/dcangulo/nextjs-subdomain-example

Te mostramos reseñas y calificaciones

Si estás contento con lo expuesto, tienes la habilidad dejar una reseña acerca de qué le añadirías a este post.

---

---

Utiliza Nuestro Buscador