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
- Instale NodeJS.
- Instale el código de Visual Studio.
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.
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.