Integración de Ignite UI for React con Next.js

Explora la perfecta integración de Ignite UI for React en tu proyecto Next.js. Este tema está diseñado para ayudar a los desarrolladores a aprovechar al máximo los componentes Infragistics React y, al mismo tiempo, aprovechar las características de Next.js para crear aplicaciones de pila completa sólidas y de alto rendimiento.

Prerequisites

1. Instale NodeJS.
2. Instale el código de Visual Studio.

DESCARGAR NODO

DESCARGAR VS CÓDIGO

Creating New Next.js Project

Con los requisitos previos anteriores instalados, podemos crear una nueva aplicación Next.js.

1 - Abra VS Code, seleccione el menú Terminal y luego la opción Nueva Terminal.

2 - Escriba los siguientes comandos en la ventana de terminal:

npx create-next-app@latest MyAppName
cd MyAppName

Updating Existing Next.js App

Si desea utilizar Ignite UI for React en un proyecto de Next.js existente (uno que tenga de antes). ¡Te tenemos cubierto! Todo lo que tienes que hacer es ejecutar estos comandos:

npm install --save igniteui-react
npm install --save igniteui-react-charts igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-gauges igniteui-react-core
npm install --save igniteui-react-grids igniteui-react-core
npm install --save igniteui-react-maps igniteui-react-core
npm install --save igniteui-react-spreadsheet igniteui-react-core

O

yarn add igniteui-react-charts igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-gauges igniteui-react-core
yarn add igniteui-react-grids igniteui-react-core
yarn add igniteui-react-maps igniteui-react-core
yarn add igniteui-react-spreadsheet igniteui-react-core

Esto instalará automáticamente los paquetes para Ignite UI for React, junto con todas sus dependencias, importaciones de fuentes y referencias de estilos al proyecto existente.

Importing Component Modules

Primero tenemos que importar los módulos requeridos de los componentes que queremos usar. Continuaremos y haremos esto para el componente GeographicMap.

"use client"
import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

[!Note] It's important to note that Ignite UI for React components are using client-only features like state and browser events. Infragistics' components will work as expected within Client Next.js Components since they have the "use client" directive, but they won't work within Server Components.

Using Components

¡Ahora estamos listos para usar el componente de mapa Ignite UI for React en nuestro componente Next.js! Sigamos adelante y definámoslo:

function App() {
  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGeographicMap
        width="800px"
        height="500px"
        zoomable="true" />
    </div>
  );
}

Running Application

Finalmente, podemos ejecutar nuestra nueva aplicación usando uno de los siguientes comandos:

npm run dev

Después de ejecutar este comando, su proyecto se construirá y se entregará localmente en su computadora. Se abrirá automáticamente en su navegador predeterminado y podrá usar Ignite UI for React en su proyecto.

El resultado final debería parecerse a esta captura de pantalla:

Using React in Next.js Server Components

Como se mencionó anteriormente, la mayoría de los componentes de React se basan en eventos de estado y navegador, lo que los hace incompatibles con el uso directo dentro de los componentes del servidor. Sin embargo, si encuentra la necesidad de usarlos de esta manera, los componentes Infragistics' se pueden envolver dentro de sus respectivos componentes de cliente.

'use client'
import { IgrGeographicMap } from 'igniteui-react-maps';
IgrGeographicMapModule.register();

export default IgrGeographicMap;

A continuación, en un componente de servidor Next.js, el IgrGeographicMap se puede utilizar directamente:

import IgrGeographicMap from './wrapped-geographic-map';

function App() {
  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGeographicMap
        width="800px"
        height="500px"
        zoomable="true" />
    </div>
  );
}

[!Note] The majority of Ignite UI for React components may remain unwrapped as they are expected to be utilized within other Client Components. Therefore, there is no need to wrap all Infragistics' components.

Dynamic import of Ignite UI for React components

La mejora del rendimiento de carga inicial de una aplicación se ve facilitada por la carga diferida, que reduce la cantidad necesaria de JavaScript para representar una ruta. Le permite aplazar la carga de las bibliotecas importadas e incluirlas solo en el paquete de cliente cuando sea necesario. Usando next/dynamic puede implementar la carga diferida:

"use client";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import dynamic from "next/dynamic";

export default function DynamicButtonComponent() {
  const IgButton = dynamic(
    async () => {
      const { IgrButton, IgrButtonModule } = await import("igniteui-react");
      IgrButtonModule.register();
      return IgrButton;
    }
  );
  
  return (
      <IgButton variant="contained">
        <span key="title">Click me</span>
      </IgButton>
  );
}

Sin embargo, si se utiliza un componente más complejo como IgrGrid, que normalmente contiene componentes secundarios, es esencial no importar dinámicamente todos y cada uno de los componentes secundarios. El componente debe usarse de la siguiente manera:

"use client";
import dynamic from "next/dynamic";
import CustomersDataLocal from "./CustomersDataLocal.json";
import "igniteui-react-grids/grids/combined";
import "igniteui-react-grids/grids/themes/light/bootstrap.css";

export default function GridDynamicComponent() {
  const IgnGrid = dynamic(
    async () => {
      const {
        IgrGrid,
        IgrGridModule,
        IgrColumn,
        IgrGridToolbar,
        IgrGridToolbarTitle,
        IgrGridToolbarActions,
        IgrGridToolbarPinning,
      } = await import("igniteui-react-grids");
      IgrGridModule.register();

      const IgGrid = ({ ...props }) => {
        return (
          <IgrGrid {...props}>
            <IgrGridToolbar>
              <IgrGridToolbarTitle></IgrGridToolbarTitle>
              <IgrGridToolbarActions>
                <IgrGridToolbarPinning></IgrGridToolbarPinning>
              </IgrGridToolbarActions>
            </IgrGridToolbar>
            <IgrColumn field="ID" header="ID" hidden="true"></IgrColumn>
            <IgrColumn
              field="CompanyName"
              header="Company Name"
              width="300px"
            ></IgrColumn>
            <IgrColumn
              field="ContactName"
              header="Contact Name"
              width="200px"
              pinned="true"
            ></IgrColumn>
            <IgrColumn
              field="ContactTitle"
              header="Contact Title"
              width="200px"
              pinned="true"
            ></IgrColumn>
            <IgrColumn
              field="Address"
              header="Address"
              width="300px"
            ></IgrColumn>
            <IgrColumn field="City" header="City" width="120px"></IgrColumn>
            <IgrColumn field="Region" header="Region" width="120px"></IgrColumn>
            <IgrColumn
              field="PostalCode"
              header="Postal Code"
              width="150px"
            ></IgrColumn>
            <IgrColumn field="Phone" header="Phone" width="150px"></IgrColumn>
            <IgrColumn field="Fax" header="Fax" width="150px"></IgrColumn>
          </IgrGrid>
        );
      };
      return IgGrid;
    }
  );

  return <IgnGrid data={CustomersDataLocal}></IgnGrid>;
}

[!Note] Implementing lazy loading for components can enhance performance, but it is advisable to use it exclusively when the components are not immediately visible on the page.

Limitations

• Si su proyecto Next.js utiliza el enrutamiento de páginas, debe transpilar los paquetes Ignite UI for React utilizando las next.config.js opciones. La configuración debe contener lo siguiente:

const nextConfig = {
    transpilePackages: ['igniteui-react'],
    experimental: {
        esmExternals: "loose",
    }
}

Additional Resources

• Ignite UI for React
• Descripción general de la cuadrícula
• Next.js Documentation

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for React Forums
• Ignite UI for React GitHub