NightSpire/web-next/app/[locale]/page.tsx

import { setRequestLocale } from 'next-intl/server'
import { ServerClock } from '@/components/ServerClock'
import { getNoticias, getServerStatus, type Noticia, type ServerStatus } from '@/lib/home'

const SERVER_NAME = 'NovaWoW'

// SSR por petición: los datos se leen DIRECTAMENTE de MySQL desde el servidor Next.
export const dynamic = 'force-dynamic'

async function getData(): Promise<{ noticias: Noticia[]; status: ServerStatus | null }> {
  const [news, status] = await Promise.allSettled([getNoticias(), getServerStatus()])
  return {
    noticias: news.status === 'fulfilled' ? news.value : [],
    status: status.status === 'fulfilled' ? status.value : null,
  }
}

function formatFecha(iso: string | Date | null): string {
  if (!iso) return ''
  const d = new Date(iso)
  if (isNaN(d.getTime())) return String(iso)
  return d.toLocaleString('es-ES', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const { noticias, status } = await getData()

  const online = status ? status.online_characters : 0
  const loginStatus = status ? status.status : 'Offline'
  const loginClass = loginStatus === 'Online' ? 'green-info' : 'red-info'

  return (
    <div className="main-page">
      <div className="middle-content middle-content-index">
        <div className="body-content">
          <div className="title-content">
            <h1>{SERVER_NAME} WOTLK 3.4.3</h1>
          </div>
          <div className="box-content">
            <div className="raf-index-holder">
              <div className="right-content" id="right-content-min">
                <div className="right-body">
                  {/* Estado del servidor + reloj en vivo (réplica de la isla React de Django) */}
                  <table className="max-center-table">
                    <tbody>
                      <tr>
                        <td className="yellow-info">
                          {status?.server_name ?? '—'}{' '}
                          <span className="blue-info small-font">{status?.expansion ?? ''}</span>
                        </td>
                        <td className="real-info-box green-info">{online}</td>
                      </tr>
                      <tr>
                        <td>Login</td>
                        <td className={`real-info-box ${loginClass}`}>{loginStatus}</td>
                      </tr>
                      <tr>
                        <td>Hora</td>
                        <td className="real-info-box">
                          <ServerClock />
                        </td>
                      </tr>
                      <tr>
                        <td colSpan={2}>
                          <hr />
                        </td>
                      </tr>
                      <tr className="centered">
                        <td colSpan={2}>
                          <p>
                            <span>{status?.address ?? ''}</span>
                          </p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div className="raf-index-responsive">
                  <a href="/recruit">¡RECLUTA A UN AMIGO!</a>
                </div>
              </div>
              <div className="raf-index">
                <a href="/recruit">¡RECLUTA A UN AMIGO!</a>
              </div>
            </div>
            <div className="body-box-content">
              <div className="body-box-content">
                <p>
                  {SERVER_NAME} es una comunidad enfocada en usuarios de habla hispana,
                  especialmente dirigida al público español y latino.
                </p>
                <p>
                  Atraemos a usuarios apasionados tanto por el PvE como por el PvP, y ofrecemos una
                  amplia variedad de contenido.
                </p>
                <br />
                <p>
                  Nuestro objetivo principal es mantener una comunidad de alto nivel, brindando un
                  ambiente agradable para que todos los miembros, nuevos y veteranos, encuentren aquí
                  un lugar donde puedan vivir momentos inigualables.
                </p>
                <p>¡Únete y disfruta de una experiencia única con miles de usuarios!</p>
              </div>
            </div>
          </div>
          <br />

          <div className="title-content-h3">
            <h3 className="big-font">NOTICIAS</h3>
          </div>
          <div className="box-content">
            <div className="body-box-content">
              {noticias.length === 0 ? (
                <p>No hay noticias disponibles en este momento.</p>
              ) : (
                <>
                  {noticias.map((n) => (
                    <div key={n.id} className="noticia-item">
                      <h3>{n.titulo}</h3>
                      <span className="date">{formatFecha(n.fecha)}</span>
                      <div
                        className="noticia-contenido"
                        dangerouslySetInnerHTML={{ __html: n.contenido }}
                      />
                      {n.enlace && (
                        <p>
                          Enlace:{' '}
                          <a href={n.enlace} target="_blank" rel="noopener noreferrer">
                            aquí
                          </a>
                        </p>
                      )}
                      <br />
                      <hr />
                      <br />
                    </div>
                  ))}
                  <p className="centered third-brown">
                    <i>* Mostrando las últimas 50 noticias</i>
                  </p>
                  <br />
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}