Implementación de sitios híbridos de Next.js en Azure Static Web Apps

En este tutorial, aprenderá a implementar un sitio web de Next.js en Azure Static Web Apps, aprovechando así la compatibilidad con las características de Next.js, como la representación del lado servidor (SSR) las y rutas de API.

Prerrequisitos

Características no admitidas en versión preliminar

Durante la versión preliminar, no se admiten las siguientes características de Static Web Apps para Next.js con la representación del lado servidor:

  • API que usan Azure Functions, Azure AppService, Azure Container Apps o Azure API Management.

  • Implementación a través de la CLI de SWA.

  • Static Web Apps autenticación y autorización proporcionadas.

    • En su lugar, puede usar la característica autenticación de Next.js.
  • Archivo staticwebapps.config.json.

    • Las características como los encabezados personalizados y el enrutamiento se pueden controlar mediante el archivo next.config.js.
  • skip_app_build y skip_api_build no se pueden usar.

  • El tamaño máximo de la aplicación para la aplicación Next.js híbrida es de 100 MB. Considere la posibilidad de usar HTML estático exportado Next.js aplicaciones si su requisito es superior a 100 MB.

  • La regeneración estática incremental (ISR) no admite el almacenamiento en caché de imágenes

Configuración de una aplicación de Next.js

Empiece por inicializar una nueva aplicación de Next.js.

  1. Inicialice la aplicación mediante npm init. Si se le pide que instale create-next-app, haga clic en Sí.

    npm init next-app@latest -- --typescript
    
  2. Cuando se le solicite un nombre de aplicación, escriba nextjs-app.

  3. Vaya a la carpeta que contiene la aplicación nueva:

    cd nextjs-app
    
  4. Inicie la aplicación de Next.js en el entorno de desarrollo:

    npm run dev
    

    Vaya a http://localhost:3000 para abrir la aplicación, donde debería ver el siguiente sitio web abierto en su explorador:

    Captura de pantalla de una aplicación de Next.js que se ejecuta en el explorador.

  5. Detenga el servidor de desarrollo presionando CMD/CTRL + C.

Implementación del sitio web estático

En los pasos siguientes, se muestra cómo vincular la aplicación a Azure Static Web Apps. Una vez que esté en Azure, podrá implementar la aplicación en un entorno de producción.

Creación de un repositorio de GitHub

Antes de realizar la implementación en Azure, deberá crear un repositorio de GitHub e insertar la aplicación.

  1. Vaya a https://github.com/new y asígnele el nombre nextjs-app.

  2. Desde el terminal de la máquina, inicialice un repositorio de Git local y confirme los cambios mediante el comando siguiente.

    git init && git add -A && git commit -m "initial commit"
    
  3. Agregue el repositorio como un elemento remoto e inserte los cambios en el servidor.

    git remote add origin https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-app && git push -u origin main
    

    Cuando ejecute este comando, asegúrese de reemplazar <YOUR_GITHUB_USERNAME> por el nombre de usuario de GitHub.

Creación de una aplicación web estática

Ahora que se ha creado el repositorio, puede crear una aplicación web estática desde Azure Portal.

  1. Acceda a Azure Portal.
  2. Seleccione Crear un recurso.
  3. Busque Static Web Apps.
  4. Seleccione Static Web Apps.
  5. Seleccione Crear.

En la sección Aspectos básicos, configure la nueva aplicación y vincúlela a un repositorio de GitHub.

Captura de pantalla de la pestaña Aspectos básicos de Static Web Apps en Azure Portal.

  1. Seleccione la suscripción de Azure.
  2. Junto a Grupo de recursos, seleccione el vínculo Crear nuevo.
  3. Escriba static-web-apps-test en el cuadro de texto.
  4. En Detalles de la aplicación web estática, escriba my-first-static-web-app en el cuadro de texto.
  5. En Azure Functions and staging details (Azure Functions y detalles de almacenamiento provisional), seleccione la región más cercana.
  6. En Detalles de implementación, seleccione GitHub.
  7. Seleccione el botón Sign-in with GitHub (Iniciar sesión con GitHub) y autentíquese con GitHub.

Tras iniciar sesión con GitHub, escriba la información del repositorio.

Detalles del repositorio

  1. Escriba los siguientes valores de GitHub.

    Propiedad Value
    Organización Seleccione la organización de GitHub adecuada.
    Repositorio Seleccione nextjs-app.
    Rama Seleccione main (principal).
  2. En la sección Detalles de la compilación, seleccione Next.js en Valores preestablecidos de compilación y conserve los valores predeterminados.

Revisar y crear

  1. Seleccione el botón Revisar y crear para comprobar que todos los detalles sean correctos.

  2. Seleccione Crear para comenzar la creación de la aplicación web estática de App Service y aprovisionar una Acción de GitHub para la implementación.

  3. Cuando finalice la implementación, seleccione Ir al recurso.

  4. En la ventana Información general, seleccione el vínculo Dirección URL para abrir la aplicación implementada.

Si el sitio web no se carga inmediatamente, la compilación todavía se está ejecutando.

Para comprobar el estado del flujo de trabajo Acciones, vaya al panel Acciones del repositorio:

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-app/actions

Una vez que se complete el flujo de trabajo, puede actualizar el explorador para ver la aplicación web.

A continuación, los cambios realizados en la rama main inician una nueva compilación e implementación del sitio web.

Sincronización de cambios

Al crear la aplicación, Azure Static Web Apps creó un archivo de Acciones de GitHub en el repositorio. Sincronice con el servidor mediante la extracción de la versión más reciente en el repositorio local.

Vuelva al terminal y ejecute el siguiente comando: git pull origin main.

Incorporación de datos de representados en el servidor

Para insertar datos representados en el servidor de datos en una página de Next.js, primero debe exportar una función especial.

  1. Abra el archivo pages/index.ts y agregue una función exportada denominada getServerSideProps.

    export async function getServerSideProps() {
        const data = JSON.stringify({ time: new Date() });
        return { props: { data } };
    }
    
  2. Actualice el componente Home para recibir los datos representados en el servidor.

    export default function Home({ data }: { data: { time: string } }) {
        const serverData = JSON.parse(data);
    
        return (
            <div className={styles.container}>
                <Head>
                    <title>Create Next App</title>
                    <meta name="description" content="Generated by create next app" />
                    <link rel="icon" href="/favicon.ico" />
                </Head>
    
                <main className={styles.main}>
                    <h1 className={styles.title}>
                        Welcome to <a href="https://nextjs.org">Next.js! The time is {serverData.time}</a>
                    </h1>
                // snip
    
  3. Confirme e inserte los cambios.

Una vez insertados los cambios, se inicia un nuevo flujo de trabajo de Acciones de GitHub y los cambios se implementan en el sitio.

Incorporación de una ruta de API

Next.js tiene rutas de API, que son una alternativa a Azure Functions para crear la API de la aplicación cliente de Next.js.

Comience agregando una ruta de API.

  1. Cree un nuevo archivo en pages/api/time.ts.

  2. Agregue una función de controlador para devolver los datos de la API.

    import type { NextApiRequest, NextApiResponse } from "next";
    
    export default async function handler(req: NextApiRequest, res: NextApiResponse) {
        res.status(200).json({ time: new Date() });
    }
    
  3. Abra pages/index.ts para agregar una llamada a la API y muestre el resultado.

    export default function Home({ data }: { data: { time: string } }) {
        const [time, setTime] = useState<Date | null>(null);
        useEffect(() => {
            fetch('/api/time')
            .then(res => res.json())
            .then(json => setTime(new Date(json.time)));
        }, []);
        return (
            <div className={styles.container}>
                <Head>
                    <title>Create Next App</title>
                    <meta name="description" content="Generated by create next app" />
                    <link rel="icon" href="/favicon.ico" />
                </Head>
    
                <main className={styles.main}>
                    <h1 className={styles.title}>
                    Welcome to{" "}
                    <a href="https://nextjs.org">
                        Next.js!{" "}
                        {time &&
                        `The time is ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`}
                    </a>
                    </h1>
                    // snip
    }
    
  4. El resultado de la ruta de API se mostrará en la página.

Visualización de la salida de la ruta de API

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar la instancia de Azure Static Web Apps mediante los siguientes pasos:

  1. Abra Azure Portal.
  2. Busque my-nextjs-group en la barra de búsqueda superior.
  3. Seleccione el nombre del grupo.
  4. Seleccione el botón Eliminar.
  5. Seleccione para confirmar la acción de eliminación.