ThemeBuilder + Next.js

ThemeBuilder + Next.js est une excellente approche pour le développement de nouvelles applications React, surtout maintenant que KendoReact déploie de nouveaux composants serveur avec une architecture RSC, qui trouveront leur place dans Next.js !

Avec la publication de les documents React mis à jour l’année dernière, l’utilisation de frameworks – avec Next.js en tête de liste – est la recommandation officielle de l’équipe React lorsqu’il s’agit de lancer un nouveau projet.

Je n’avais pas eu l’occasion d’explorer Suivant.js avec beaucoup de détails, j’ai donc décidé de faire d’une pierre deux coups : retravailler mon site Web personnel (toujours sur la liste de choses à faire d’un développeur, n’est-ce pas ?) et soyez au courant de cette nouvelle approche suggérée pour les projets React. Bien sûr, j’ai également profité du Progress KendoRéagir bibliothèque et Générateur de thèmes pour mes composants et mon style, parce que pourquoi pas ? Rapide, facile, accessible : comment ne pas aimer ?

Configuration et installation

L’écosystème Next.js privilégie vraiment les modules CSS, avec un support intégré simplement en incluant le module.css extension dans vos noms de fichiers. Ils disposent également d’un support intégré pour Sass, après un rapide npm install. Puisque je voulais découvrir l’expérience Next.js « standard », j’ai continué et j’ai suivi leurs recommandations, en utilisant les deux. Alors je installé mes composants KendoReact et configurer ma licence.

Création et exportation de styles personnalisés avec ThemeBuilder

Comme je travaillais simplement sur mon site Web personnel (pas une application ultra-complexe et complète), je n’avais pas vraiment besoin d’un système de conception approprié. J’ai juste apporté quelques modifications rapides à la typographie et à la palette de couleurs du Kendo Default. thème dans ThemeBuilder et l’a appelé bon!

Je savais que je voulais que mon site utilise le prefers-color-scheme media query, afin qu’il puisse basculer automatiquement entre les modes clair et sombre pour correspondre aux paramètres système de l’utilisateur. Cependant, comme ma conception était si simple, je n’ai pas pris la peine de créer deux thèmes entièrement différents pour cela : je ne voulais pas m’embêter à basculer entre les feuilles de style juste pour échanger quelques codes hexadécimaux.

Au lieu de cela, j’ai ajouté un supplément variables personnalisées à mon projet ThemeBuilder : variables en mode sombre pour l’arrière-plan du corps, l’arrière-plan des composants, la couleur du texte et les versions ajustées en fonction de l’accessibilité de mes deux couleurs principales (pour garantir que j’ai toujours un contraste de couleur suffisamment élevé). Ainsi, au total, cinq variables personnalisées supplémentaires ont été exportées vers mon _tokens.scss ainsi que ceux standard du thème par défaut.

Styles globaux

ThemeBuilder propose des exportations en CSS Vanilla, ainsi qu’en Sass ; dans ce cas, je savais déjà que je voulais utiliser ceux de Sass. Cela signifiait que la première chose que je devais régler était de savoir où placer mes fichiers Sass exportés par ThemeBuilder. Dans Next.js, cela nécessitait l’ajout de styles globaux, en plus des styles étendus au module CSS par défaut.

Étant donné que j’utilisais la version stable la plus récente de Next.js (14.0, au moment de la rédaction de ce blog), cela signifiait que le routeur d’applications était la structure par défaut, par opposition au routeur de pages utilisé dans Next.js 13.3 et versions antérieures. Il s’avère que cela fait une légère différence en ce qui concerne l’endroit où vivront vos styles globaux. Je vais aborder les deux manières : comment je l’ai fait dans la version actuelle de Next.js à l’aide d’App Router et comment vous devrez peut-être configurer des éléments pour une application héritée à l’aide de Page Router.

Styles globaux avec App Router

Si vous utilisez cette approche plus récente, les styles globaux peuvent être importés dans n’importe quelle mise en page, page ou composant du app annuaire. Pour plus de clarté et une facilité de recherche, j’ai renommé mon ThemeBuilder-exported index.scss fichier à global.scss. Ensuite, je l’ai importé dans le fichier de mise en page racine—app/layout.tsx (ou app/layout.jssi vous n’utilisez pas TypeScript).

Styles globaux avec le routeur de pages

Si vous utilisez cette ancienne approche, vous devrez créer un nouveau fichier appelé _app.js au sein de pages répertoire et incluez ce code :

import '../styles/global.scss';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Ensuite, redémarrez votre serveur de développement et vous devriez être prêt à partir ! N’oubliez pas que ce fichier est le seulement endroit où les styles globaux peuvent être importés à l’aide du Pages Router !

Mode sombre

Puisque je savais que je voulais un mode sombre super simple (comme mentionné précédemment), j’ai fait un petit ajout à la fin de mon global.scss fichier pour inclure le prefers-color-scheme requête médiatique. Là, j’ai utilisé les variables personnalisées que j’ai créées dans ThemeBuilder, importées du _tokens.scss fichier, pour redéfinir quelques styles clés. Dans mon projet actuel, il y en avait un peu plus, mais vous voyez l’idée.

@media (prefers-color-scheme: dark) {
 body {
    background-color: $tb-kendo-body-bg-dark;
  }

  a {
    color: $tb-kendo-accessible-link-text;
  }
}

C’est tout!

Si je suis tout à fait honnête, j’ai parfois du mal à écrire des blogs comme celui-ci parce que j’ai l’impression qu’il n’y a pas grand-chose à dire : tout fonctionne ! Dans ce cas, lorsque j’ai démarré le projet, j’étais un peu nerveux quant à la facilité avec laquelle les feuilles de style ThemeBuilder exportées fonctionneraient avec la structure Next.js. D’autres développeurs m’avaient dit que Next.js était très opiniâtre et j’avais une petite hésitation quant aux ajustements qui pourraient être nécessaires pour que ces deux technologies fonctionnent et fonctionnent bien ensemble.

Ma conclusion est la suivante : s’il est vrai que Next.js est opiniâtre, ils ont également intégré des solutions pour les principales situations dans lesquelles les développeurs étaient le plus susceptibles d’avoir besoin de quelque chose en dehors de la configuration par défaut. Suivant.js n’a pas inclure la prise en charge des styles globaux dès le départ, de sorte que vous ne pouvez pas littéralement glisser-déposer les fichiers ThemeBuilder dans le dossier de l’application, comme vous le pouvez avec une application de l’ARC. Cependant, la configuration des styles globaux dans Next.js était bien documentée et n’était pas très difficile. Une fois cela en place, nous étions quasiment de retour dans la zone du glisser-déposer en ce qui concerne la mise en œuvre.

Ce sera presque certainement mon approche pour le développement de nouvelles applications, surtout maintenant que KendoReact déploie de nouvelles applications. Composants serveur avec architecture RSC, qui trouvera sa place dans Next.js ! Et bien sûr, si vous n’utilisez pas déjà KendoRéagirvous pouvez l’essayer, en combinaison avec ton cadre de choix – entièrement gratuit pendant 30 jours.