Construire pour l’avenir : intégration de Next.js et de KendoReact

Prêt à profiter pleinement de Next.js tout en utilisant la bibliothèque de composants d’interface utilisateur conçue par des professionnels de KendoReact ? C’est un jeu d’enfant : voyez par vous-même.

Suivant.js, un puissant framework React, remodèle le paysage du développement Web moderne. Il introduit une approche transparente et intuitive pour créer des applications Web qui sont non seulement performantes mais également conviviales pour les développeurs. Et maintenant vous pouvez l’intégrer avec des composants entièrement compatibles de Progress KendoRéagir. Nous allons jeter un coup d’oeil.

Pourquoi Next.js ?

Souhaitez-vous bénéficier d’un meilleur référencement, d’un rendu côté serveur, d’un FCP/TTFB plus rapide, d’une génération de sites statiques, d’un fractionnement automatique du code et d’une mise en cache automatique ? Si tel est le cas, Next.js est le framework parfait pour vous. Développé par VercelNext.js facilite le processus de développement en vous fournissant un environnement prêt pour la production utilisant une seule ligne dans le terminal :npx create-next-app@latest.

Composants KendoReact

KendoReact rend votre processus de développement encore plus facile en vous fournissant plus de 120 composants natifs de l’interface utilisateur React entièrement compatibles avec Next.js. Ces composants sont hautement personnalisables en termes d’apparence visuelle et de fonctionnalités et, à partir de la version 7.0.1ils sont tous testés et adaptés pour bien fonctionner avec le rendu côté serveur et le framework Next.js.

Intégration de KendoReact avec Next.js

Généralement, pour intégrer des composants client dans les composants serveur dans Next.js, vous devez importer les composants client à partir d’un fichier séparé, puis les restituer dans les composants serveur.

C’est un peu compliqué si vous travaillez avec des composants clients tiers car cela nécessite la création d’un fichier distinct pour eux, en le marquant avec 'use client'puis en l’important dans le composant serveur.

Cependant, KendoReact rend cette intégration sans effort. Avec un interne 'use client' directive, vous pouvez importer directement les composants client KendoReact sans ajouter la directive lorsque les écouteurs d’événements et les hooks ne sont pas nécessaires.

Si vous vous demandez ce que fait cette directive, elle inclut les modules importés dans le composant dans le cadre du bundle client. Next.js pré-affichera d’abord le composant sur le serveur, puis effectuera le processus d’hydratation, qui attachera les écouteurs React aux nœuds HTML DOM déjà existants.

D’un autre côté, le rendu des composants du serveur à l’intérieur de ceux du client peut être effectué en les passant comme enfants :

return (
<ClientComponent>
  <ServerComponent />
</ClientComponennt> 
)

Dans le composant client, vous les recevrez comme accessoires :

const ClientComponent = ({children}) => {
    return children;
}

Avec une application Next.js plus complexe, vous vous retrouverez avec plusieurs composants serveur et client profondément imbriqués les uns dans les autres et, dans certains cas, il ne sera possible de transmettre des données qu’entre des composants très éloignés via Contexte.

Ce nouveau paradigme de travail avec React est un peu difficile au début, mais vous finirez par vous y habituer. Et ça vaut le coup ! La possibilité d’imbriquer les composants serveur et client de cette manière est impressionnante : elle vous donne la liberté de charger autant de composants sur le serveur que vous le souhaitez, réduisant ainsi la taille du bundle et offrant une meilleure expérience utilisateur.

Le graphique ci-dessus a été généré par le Organigramme de KendoReact composant.

Examinons maintenant plus en détail certaines implémentations de Next.js avec les composants KendoReact. Dans la section suivante, nous montrerons comment :

• Utiliser les actions du serveur avec le KendoReact Formulaire
• Charger des données asynchrones du serveur vers la Data Grid
• Déployez votre application sur Vercel avec la licence KendoReact

Pour un guide de configuration plus simple avec des instructions étape par étape sur la façon d’importer les composants KendoReact, d’ajouter un thème Kendo UI et d’activer votre licence KendoReact, vous pouvez consulter le article pour démarrer avec Next.js.

Actions du serveur avec le formulaire KendoReact

Actions du serveurintroduit dans la version 13.4 en tant que version alphaont été le point culminant du Next.js 14ème version. Les actions serveur permettent de muter les données sur le serveur sans aucun client JavaScript, et donc sans bloquer l’interface utilisateur.

De plus, ne vous souciez plus de la création de points de terminaison d’API ! Sans actions du serveur, vous devrez créer un point de terminaison d’API dans un framework backend et lui envoyer une requête depuis l’application React.

Créons une page de connexion avec le composant KendoReact Form où nous appelons une action serveur après avoir soumis le formulaire.

Tout d’abord, créez un fichier « actions.tsx » dans lequel vous stockerez les fonctions du serveur. Il est obligatoire de les avoir dans un fichier séparé lors de leur appel dans les composants clients. De plus, ces fonctions doivent être exécutées sur le serveur et utilisées dans le composant client, et c’est pourquoi nous ajoutons le 'use server' directive en haut du fichier.

'use server';
 
interface signInPropsInterface {
  email: string;
  password: string;
}
export const signInValidation = async (signInProps: signInPropsInterface) => {
    const email = signInProps.email;
    const password = signInProps.password; 
    //make an API call 
 };

Dans le composant Form, importez le signInValidation fonction et appelez-la dans le onSubmit gestionnaire d’événements à l’intérieur du startTransition crochet.

Le startTransition hook vous permet de mettre à jour l’état sans bloquer l’interface utilisateur et doit être utilisé lors de l’appel d’une action du serveur en dehors de la propriété d’action du formulaire, comme dans notre cas. (Cependant, l’équipe Progress KendoReact est impatiente de faire fonctionner le composant Form avec la propriété action dans une prochaine version.)

const onSubmit= (dataItem: { [name: string]: any }) => {
    const signInData = {
      email: dataItem.email,
      password: dataItem.password,
    };
    startTransition(() => {
      signInValidation(signInData);
    });
  };

Et voilà, l’événement submit appelle maintenant le signInValidation qui est exécuté sur le serveur. Vous pouvez également définir cookies et effectuez une redirection de page en utilisant redirect à l’intérieur de signInValidation méthode.

Pour un exemple complet, vous pouvez vérifier ceci Démo StackBlitz.

Chargement de données de serveur asynchrone avec la grille de données et le squelette KendoReact

Lorsque vous utilisez Next.js, vous souhaiterez charger les données sur le serveur et afficher un squelette ou un chargeur jusqu’à ce que les données soient prêtes, ainsi qu’une erreur en cas d’échec des données. Faisons cela avec le KendoReact Grille de données et Squelette Composants. Voici la structure que nous aurons à la fin de cette section :

Tout d’abord, créez le « page.tsx » en tant que composant serveur. Voici l’endroit où nous allons charger les données et les transmettre à la grille.

export default async function Page() {
  const fetchData = async () => {
    const products = await getProducts();  //fetch data from api
  return products;
}
  const data = await fetchData();
  return (
  <KendoGrid data={data}/>
)
}

Assurez-vous que « page.tsx » et la fonction de récupération de données sont asynchrones.

En remarque, les fonctions asynchrones ne sont actuellement prises en charge que dans les composants serveur.

Le problème ici est que la page se chargera sans aucun contenu jusqu’à ce que les données soient prêtes. Ici, vous avez deux options. Vous pouvez soit envelopper le composant KendoGrid avec Réagir.Suspense et définissez sa propriété de secours ou créez un « chargement.tsx » et restituez la solution de secours à l’intérieur de celui-ci. Choisir entre les deux est une question de préférence personnelle.

Créer un squelette ou un chargeur attrayant et personnalisable avec des animations n’est pas la chose la plus simple à mettre en œuvre, et ces composants de secours sont largement utilisés dans les applications basées sur serveur. C’est pourquoi nous vous suggérons de jeter un œil au KendoReact Squelette et Chargeur Composants.

Dans « loading.tsx », importez le composant Skeleton et effectuez le rendu, et vous êtes prêt à partir.

import { Skeleton} from "@progress/kendo-react-indicators";
export default function Loading() {
  return <Skeleton
        shape={'rectangle'}
        style={{ width: '100%', height: '400px' }}
      />
}

Cependant, que se passe-t-il si les données ne se chargent pas ? Habituellement, nous utiliserions Réagir aux limites d’erreurmais ce sont des composants de classe et leur utilisation n’est pas prise en charge dans Next.js.

Ici, vous pouvez utiliser le Convention du fichier error.tsx qui renvoie une méthode de réinitialisation via des accessoires qui vous permet de tenter de récupérer de l’erreur. Vous pouvez essayer ceci en lançant par programme une nouvelle erreur :throw new Error('error-name').

Dans l’exemple ci-dessous, nous appelons cette méthode dans le onClick gestionnaire d’événements du KendoReact Bouton composant, avec son thèmeCouleur propriété définie sur error. Le composant dispose également de plusieurs autres options pour personnalisations visuelles.

'use client'
import { useEffect } from 'react'
Import { Button } from ‘@progress/kendo-react-buttons"
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <Button
        themeColor=”error”
        onClick={
          () => reset()
        }
      >
        Try again
      </Button>
    </div>
  )
}

Pour un exemple complet, vous pouvez ouvrir ceci Démo StackBlitz.

Déploiement et activation de licence

Le déploiement d’une application Next.js sur Vercel est une option choisie par de nombreux développeurs, en raison de sa simplicité et des fonctionnalités impressionnantes qu’elle offre. Vous souhaitez également activer votre licence KendoReact dans le déploiement en définissant une variable d’environnement pour supprimer le filigrane et l’avertissement de licence des composants.

Si vous ne possédez pas de licence, vous pouvez en obtenir une en démarrant un essai gratuit et bénéficier d’un support technique gratuit de 30 jours : https://www.telerik.com/try/kendo-react-ui

En commençant par le déploiement sur Vercel, créez un compte sur vercel.com si vous n’en avez pas, et importez le dépôt GitHub de votre projet Next.js. Vous aurez désormais un déploiement après chaque commit dans les Pull Requests :

Et vous aurez un lien de déploiement principal dans la page d’index du référentiel GitHub :

Pour activer la licence dans les déploiements, ajoutez votre licence en tant que variable d’environnement dans la page Variables d’environnement de vos paramètres de projet. Le nom de la clé doit être KENDO_UI_LICENSE.

Et dans l’onglet général, ajoutez le script d’installation et d’activation de licence npm dans l’entrée Install Command :

Conclusion

Le monde JavaScript est en constante évolution et React est une bibliothèque JavaScript que vous pouvez utiliser dans n’importe quelle direction, ce qui la rend extrêmement dynamique. Progrès KendoReact s’efforce de rester à jour avec les derniers développements afin d’offrir à nos clients la meilleure expérience de développeur dans n’importe quelle direction qu’ils choisissent de prendre.

De plus, l’introduction de composants serveur dans Next.js rend le paradigme React vraiment différent. Dans ce blog, nous avons à peine effleuré la surface des fonctionnalités et des implémentations avec Next.js.

Par conséquent, si vous avez des questions ou si vous essayez de comprendre comment créer une certaine implémentation avec Next.js et KendoReact, n’hésitez pas à la partager dans notre forums publicsoù vous pouvez recevoir l’aide de la communauté KendoReact et de l’équipe KendoReact.

Et si vous n’avez pas encore essayé KendoReact, n’oubliez pas que vous pouvez le faire gratuitement pendant 30 jours.

Essayez KendoReact