--- title: "cms multisite amb payload: la web d'iaeste espanya i una web per a cada comitè local" description: "un cms multisite amb payload i next.js: iaeste espanya i cada comitè local tenen la seva web, amb el mateix disseny, sense codi i pensades per sortir a google." date: 2026-10-12 author: "joel taylor pedrós" lang: ca url: https://joeltaylor.business/blog/cms-multisite-payload-iaeste-espanya translations: es: https://joeltaylor.business/blog/cms-multisitio-payload-iaeste-espana en: https://joeltaylor.business/blog/multi-site-cms-payload-iaeste-spain image: https://joeltaylor.business/_next/static/media/cover.3hgrv7g86ddoj.webp --- # cms multisite amb payload: la web d'iaeste espanya i una web per a cada comitè local ![diagrama d'un sol payload cms connectat a sis webs: iaeste.es i lleida.iaeste.es, ja fetes, i madrid, valencia, zaragoza i bilbao, en línia discontínua, pendents.](https://joeltaylor.business/_next/static/media/cover.3hgrv7g86ddoj.webp) iaeste és una xarxa d'estudiants que aconsegueix pràctiques remunerades a l'estranger per a estudiants d'enginyeria, ciències i altres carreres tècniques. a espanya funciona gràcies als comitès locals: grups d'estudiants voluntaris, un per universitat. n'he fet la web nova: una sola instal·lació que serveix la web nacional i una web per a cada comitè que en vulgui una, totes editables des d'un cms i sense tocar codi. encara no ha substituït la web antiga d'iaeste.es. mentrestant es pot veure a [iaeste-spain.joeltaylor.business](https://iaeste-spain.joeltaylor.business/ca), i la del comitè de lleida a [lleida.iaeste-spain.joeltaylor.business](https://lleida.iaeste-spain.joeltaylor.business/ca). ## per què una web per comitè algú que busca "iaeste" i algú que busca "iaeste lleida" o "pràctiques a l'estranger udl" volen coses diferents. el primer vol saber què és el programa; el segon vol saber on és el despatx del comitè, quan és la propera xerrada i qui ha marxat des de la seva universitat. una sola web nacional respon bé la primera cerca i malament la segona. la idea és tenir moltes webs en lloc d'una: la nacional per a les cerques generals, i una per a cada comitè per a les de la seva ciutat i la seva universitat. cada una publica el seu blog, els seus esdeveniments i les seves experiències. el risc d'això és que cada comitè acabi amb una web diferent, feta per qui hi havia aquell any i abandonada quan se'n va. per evitar-ho, totes surten del mateix codi i del mateix cms. ![dues captures de la capçalera de dues webs, una sobre l'altra. a dalt, iaeste.es, amb el títol pràctiques remunerades a l'estranger. a sota, lleida.iaeste.es, amb el logo d'iaeste lc lleida, un menú propi i el títol pràctiques a l'estranger des de lleida sobre una foto de la ciutat.](https://joeltaylor.business/_next/static/media/dues-webs.0ewvpuh5dpxb-.webp) _mateixa tipografia, mateixos colors i mateixa estructura: el comitè hi posa els textos, les fotos i el menú. captures de la versió provisional, el 12 d'octubre de 2026._ ## tot el contingut, des del cms el projecte és un monorepo amb tres aplicacions: la web, en next.js 16; el cms, en [payload](https://payloadcms.com) 3; i una api petita en hono per als formularis i els correus. cada una té la seva base de dades postgres, i es despleguen com a tres imatges docker en un servidor propi amb coolify. al cms hi ha tot el que es veu a la web: notícies, esdeveniments, experiències d'estudiants, preguntes freqüents, l'equip, els comitès amb les seves universitats i les fotos. les pàgines nacionals (portada, estudiants, empreses, universitats…) tenen camps fixos, i no un constructor de blocs lliure, perquè l'equip de màrqueting canviï els textos sense poder trencar el disseny. el que fa que el puguin fer servir persones que no programen: - els esborranys es desen sols cada 2 segons, i es pot programar quan es publiquen. - la vista prèvia mostra l'esborrany dins la web real, a 390, 820 i 1.440 px d'amplada. - en publicar, el cms avisa la web perquè refaci només les pàgines afectades, sense tornar a compilar res. - cada text existeix en castellà, anglès i català, i un panell lateral diu quina part de la pàgina falta traduir a cada idioma. - els permisos van per rols. un editor nacional ho pot tocar tot; un editor de comitè només veu els documents del seu comitè, i el camp que diu de quin comitè és cada document es posa sol i no el pot canviar. per a l'equip hi ha 14 guies pas a pas en castellà, amb 111 captures que es tornen a fer amb un script cada cop que canvia el cms. ## una web per a cada comitè local, sense codi crear la web d'un comitè és omplir un document al cms. l'oficina nacional va a «webs de comités», crea la del comitè, marca «web activada» i publica. a partir d'aquí, el comitè escriu els seus textos amb el seu propi usuari. no hi ha cap desplegament per comitè: tota la xarxa és una sola aplicació. la web del comitè surt a un subdomini, com `lleida.iaeste.es`, que li donem nosaltres. no cal que el comitè compri cap domini, tot i que si en té un, com `iaestelleida.cat`, li recomano fer-lo servir i el pot connectar a la mateixa web. ![diagrama de tres peticions que passen per proxy.ts. iaeste.es/ca/blog es renderitza com a /national/ca/blog. lleida.iaeste.es/ca/blog es renderitza com a /lleida/ca/blog. girona.iaeste.es/ca/blog, que no té web publicada, es redirigeix al cercador de comitès.](https://joeltaylor.business/_next/static/media/hosts.1n-4ver2gkf4-.webp) _un sol desplegament per a tota la xarxa: un comitè nou és un host més, no un servidor més._ el que decideix quina web es veu és el host de la petició. `proxy.ts`, el que next.js 16 anomena ara el middleware, llegeix el host, en treu el comitè (`siteKeyFromHost`) i reescriu la ruta a `/[site]/[locale]/…`. així la ruta de cada web és diferent per a next.js i cada una es desa a la memòria cau per separat. si algú entra al subdomini d'un comitè que no té web, va a parar al cercador de comitès. el disseny compartit s'aconsegueix limitant què es pot canviar. la portada i les pàgines d'un comitè es fan amb 14 tipus de secció: xifres, propers esdeveniments, últimes notícies, experiències, equip, contacte, formulari, com funciona l'intercanvi, una crida a l'acció, targetes, text i imatge, carrusel de fotos, logos i una cita. l'única decisió visual és a quin costat va la imatge i si el fons és clar o blau marí. no hi ha colors, ni tipografies, ni css. ![captura del cms payload amb la finestra «añadir sección» oberta: catorze tipus de secció en una graella, de cifras a cita.](https://joeltaylor.business/_next/static/media/blocs.1f8q-_0sj56qj.webp) _els 14 tipus de secció que un comitè pot afegir a una pàgina. el cms està en castellà, que és com el fa servir l'equip. captura de les guies del cms, octubre de 2026._ algunes regles més ho mantenen endreçat: com a molt una secció de xifres i un formulari per pàgina, com a molt dues pàgines pròpies al menú, i una pàgina nova no pot fer servir l'adreça d'una de fixa. el compilador de typescript avisa si algú afegeix un tipus de secció i s'oblida de dibuixar-lo. ## seo amb moltes webs alhora amb una web per comitè publicant contingut, el problema és que google vegi la mateixa notícia a dos llocs i no sàpiga quin ha de mostrar. la regla és que cada document té una sola casa: - una notícia, un esdeveniment o una experiència d'un comitè amb web viu a la web del comitè. - si un editor nacional marca «mostrar también en iaeste.es», també surt a la nacional, però l'enllaç porta a la web del comitè i l'etiqueta canònica apunta allà. - si algú obre aquell document des de l'altra web, el redirigeix a casa seva. - el sitemap, el robots.txt i el llms.txt són per host, i cada web només hi posa els documents que són seus. la resta és el que faria a qualsevol web, però per a cada web i cada idioma: - les rutes i els slugs estan traduïts (`/es/estudiantes`, `/en/students`, `/ca/estudiants`), amb `hreflang` per a cada idioma i `x-default` en castellà. - dades estructurades en json-ld: `NGO` a cada pàgina, amb el comitè com a part d'iaeste espanya i iaeste espanya com a part d'iaeste, i també `Article`, `Event` i `FAQPage`. - cada pàgina té la seva imatge per compartir, generada amb el títol i la foto de la pàgina i recomprimida perquè quedi per sota dels 300 kb que accepten whatsapp i linkedin. - cada pàgina existeix també en markdown, afegint `.md` a l'adreça, per als assistents d'ia. - les adreces de la web antiga en wordpress redirigeixen amb un 301 a les noves. - un script, `check:seo`, recorre el sitemap d'una web en marxa i comprova títols, descripcions, canòniques, que els `hreflang` es corresponguin, les imatges per compartir i el json-ld. ## si a la teva universitat no hi ha iaeste dels 12 comitès que hi ha a la llista, avui només 7 són actius. vol dir que molta gent que busca iaeste estudia en una universitat on no n'hi ha cap. la web els tracta com a possibles fundadors d'un comitè nou. ![captura del cercador de comitès amb la cerca girona. sota el camp diu cap comitè per a «girona», i un requadre blau pregunta «no hi ha cap comitè a la teva ciutat?» amb el botó deixa'ns les teves dades. a la dreta, el mapa d'espanya.](https://joeltaylor.business/_next/static/media/cercador.3ckfw0b_8jpf7.webp) _una cerca sense resultats no acaba en una pàgina buida: demana les dades per obrir-hi un comitè. versió provisional, 12 d'octubre de 2026._ el recorregut és aquest: 1. al cercador de comitès, una cerca sense resultats mostra «no hi ha cap comitè a la teva ciutat?» amb el nom que has buscat. el cercador funciona també sense javascript, perquè filtra al servidor. 2. el botó baixa al formulari amb «una altra universitat» ja triada, i entre els interessos hi ha «unir-me a un comitè o fundar-ne un». 3. l'api mira si la universitat que has escrit és d'algun comitè actiu. si ho és, avisa aquell comitè; si no, el contacte va a l'oficina nacional. 4. al cms, l'oficina nacional té un informe, «universidades sin comité», amb els contactes agrupats per universitat. serveix per decidir on obrir el comitè següent. ![captura de la taula universidades sin comité del cms, amb quatre files de dades de prova: universidad de salamanca, amb 2 contactes i 1 de confirmat, i extremadura, granada i oviedo, amb 1 i 1, totes de l'11 d'octubre de 2026.](https://joeltaylor.business/_next/static/media/sense-comite.3-qrcgzv-_tas.webp) _l'informe d'universitats sense comitè, amb dades de prova d'un entorn local. a la versió real, cada fila és gent d'una universitat on encara no hi ha iaeste._ a més, les analítiques registren cada cerca del cercador amb el nombre de resultats, i les de zero resultats diuen quines ciutats busquen iaeste sense trobar-lo. el pas següent és una pàgina per a cada universitat que no té comitè, perquè qui busqui "iaeste" i el nom de la seva universitat trobi una pàgina que li expliqui que encara no n'hi ha i com fundar-lo. ## el que no esperava - els filtres de correu de les universitats i les empreses obren tots els enllaços d'un missatge per comprovar-los. si confirmar la subscripció fos només obrir l'enllaç, el filtre confirmaria tothom. la confirmació és un post: la pàgina l'envia sola amb javascript, cosa que un filtre no fa, i si no hi ha javascript hi ha un botó. - el límit de formularis és de 60 per adreça ip cada 15 minuts, perquè en una xerrada a la universitat tota una aula envia el formulari des de la mateixa xarxa. - satori, el que dibuixa les imatges per compartir, no sap llegir les webp que serveix el cms, i totes les targetes amb foto donaven un error 500. ara la foto es retalla i es passa a jpeg amb sharp abans. - la imatge docker del cms pesa uns 1,7 gb i la de la web uns 400 mb: el mode standalone de next.js deixa fora l'ordre `payload migrate`, que és la que aplica les migracions abans d'arrencar. - la validació del formulari, amb zod, només es carrega quan algú el comença a omplir, i això va treure uns 90 kb comprimits de les pàgines que el tenen. ## en xifres - 7 comitès actius de 12 a la llista, en 3 idiomes, amb 14 tipus de secció. - unes 41.000 línies de typescript sense comptar el codi generat ni les migracions: 17.800 a la web, 12.100 al cms, 2.900 a l'api i 7.800 als paquets compartits. - 452 tests en 67 fitxers, que corren a cada canvi contra una base de dades postgres real. comptat sobre el repositori el 12 d'octubre de 2026.