Présentation du Starter Blog Tailwind Next-js V 2.0

Introduction

Bienvenue dans le nouveau modèle de Starter Blog Tailwind Nextjs v2.0. Cette version est une refactorisation majeure de la base de code pour prendre en charge le répertoire Nextjs App et les composants React Server. Lisez la suite pour découvrir les nouvelles fonctionnalités et comment migrer depuis la V1.

• De la V1 à la V2
• Répertoire d'application Next.js et composants Server React
• Typescript First
• Contentlayer
• Pliny
• Nouveau composant de recherche
  • Algolia
  • Kbar
• Mises à jour du style et de la mise en page
  • Thème
  • Nouvelles mises en page
• Recommandations de migration
• Conclusion
• Support
• Licence

De la V1 à la V2

Le modèle a été publié pour la première fois en janvier 2021 et a depuis été utilisé par des milliers d'utilisateurs. Il a été présenté sur Modèles Next.js, [Tailwind Awesome](https://www.tailwindawesome.com/resources /tailwind-nextjs-starter-blog) parmi d'autres sites de référencement. Il attire chaque jour plus de 200 visiteurs uniques, avec entre 1 500 et 2 000 pages vues, avec 13 000 forks et de nombreux autres clones.

Un grand merci à la communauté d'utilisateurs et de contributeurs pour avoir fait de ce modèle un succès ! J'ai créé un petit montage vidéo des blogs (tout en nettoyant la liste dans le readme) pour mettre en valeur la diversité des blogs créés grâce au modèle et célébrer cette étape importante:

La version 2 s'appuie sur le succès de la version précédente et introduit de nombreuses nouvelles fonctionnalités et améliorations. La base de code a été refactorisée pour prendre en charge l'app router de Next.js et les composants React server. Markdown / MDX est désormais traité à l'aide de Contentlayer, un SDK de contenu "typesafe" grâce à typescript, qui valide et transforme votre contenu en données JSON de type sécurisé. Il s'intègre à Pliny, une nouvelle bibliothèque qui fournit des composants Next.js prêts à l'emploi pour améliorer votre site statique avec des analyses, des commentaires et un abonnement à la newsletter. Un nouveau composant de recherche avec palette de commandes (⌘-k) a également été ajouté au modèle.

Plongeons dans les nouvelles fonctionnalités et améliorations de la V2.

Répertoire d'application Next.js et composants Server React

Maintenant que l'app router de Next.js est enfin stable et est principalement compatible avec Page Router, la base de code a été migrée vers une nouvelle configuration. Cela permet une approche de rendu hybride, avec l'utilisation de composants React Server générés côté serveur pour des chargements de pages plus rapides et des tailles de bundle plus petites, tout en conservant la possibilité d'intégrer les composants React côté client pour l'interactivité.¹

Avec des possibilités supplémentaires survient un nouveau paradigme et son lot d'apprentissage. J'ai migré la base de code pour utiliser au maximum les nouvelles fonctionnalités. Cela inclut des modifications dans la structure des dossiers, la division des composants en composants serveur et clients, l'exploitation de la récupération de données côté serveur et l'utilisation des [métadonnées] recommandées (https://nextjs.org/docs/app/building-your-application/optimizing/metadata ), API pour le SEO.

Bien que cela simplifie dans une certaine mesure la base de code, cela rend aussi la migration à partir de l'ancienne base de code plus difficile. Si vous souhaitez migrer, je vous recommande de partir d'un nouveau modèle et de copier vos personnalisations et votre contenu existant. Consultez la section recommandations de migration pour plus de détails.

Typescript First

La base de code a été migrée vers Typescript. Alors que la version précédente du modèle était disponible en Javascript et Typescript, j'ai décidé de réduire la charge de maintenance et de me concentrer sur Typescript. Cela permet également une meilleure vérification de type et une meilleure complétion du code dans les IDE.

Typescript correspond également parfaitement à notre nouveau processeur remark sécurisé - Contentlayer.

Contentlayer

Contentlayer est un SDK de contenu qui valide et transforme votre contenu en données JSON de type sécurisé que vous pouvez facilement importer dans votre application. Cela facilite le travail avec des fichiers markdown locaux ou MDX. Cela permets de remplacer «MDX-bundler» et notre propre workflow de traitement markdown.

Tout d'abord, une source de contenu est définie, spécifiant le nom du type de document, la source où il se trouve ainsi que les champs de premier plan et tous les champs calculés supplémentaires qui doivent être générés dans le cadre du processus.

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'blog/**/*.mdx',
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
    tags: { type: 'list', of: { type: 'string' }, default: [] },
    ...
  },
  computedFields: {
    readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath.replace(/^.+?(\/)/, ''),
    }
    ...
  },
}))

Contentlayer traite ensuite les fichiers MDX avec les plugins de Remark ou de Rehype de markdown souhaités, valide le schéma, génère des définitions de type et génère des fichiers json qui peuvent être facilement importés dans nos pages. Le rechargement à chaud est prêt à l'emploi, de sorte que les modifications apportées aux fichiers markdown seront immédiatement reflétées dans le navigateur!

Pliny

La popularité du modèle s'explique en grande partie par sa personnalisation et son intégration avec d'autres services, des fournisseurs d'analyse aux solutions de commentaires. Cependant, cela signifie qu'une grande partie du code passe-partout doit être colocalisé dans le modèle même si l'utilisateur n'utilise pas la fonctionnalité. Les mises à jour et les corrections de bugs devaient être copiées manuellement dans la base de code de l'utilisateur.

Pour résoudre ce problème, j'ai résumé la logique dans un répertoire séparé - Pline. Pliny fournit des composants Next.js prêts à l'emploi pour améliorer les sites statiques :

• Analytique
  • Google Analytics
  • Plausible Analytics
  • Simple Analytics
  • Umami Analytics
  • Posthog
• Commentaires
  • Disqus
  • Giscus
  • Utterances
• Newsletter (utilise l'API de routage de Next 13 )
  • Buttondown
  • Convertkit
  • Email Octopus
  • Klaviyo
  • Mailchimp
  • Revue
• Recherche de palette de commandes avec feuille de style tailwind
  • Algolia
  • Kbar (local search)
• Composants utilitaires de l'interface utilisateur
  • Bleed
  • Newsletter / Blog Newsletter
  • Pre / Code block
  • Table of Contents

Choisissez votre service préféré en modifiant « siteMetadata.js » et en changeant les champs appropriés. Par exemple pour passer d'Umami Analytics à Plausible, on peut modifier les champs suivants :

analytics: {
-   umamiAnalytics: {
-     // We use an env variable for this site to avoid other users cloning our analytics ID
-     umamiWebsiteId: process.env.NEXT_UMAMI_ID, // e.g. 123e4567-e89b-12d3-a456-426614174000
-   },
+    plausibleAnalytics: {
+      plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    },
},

Les modifications apportées au fichier de configuration sont automatiquement propagées aux composants. Aucune modification du modèle n'est requise.

Sous le capot, Pliny exporte des composants de haut niveau tels que <Analytics AnalyticsConfig={analyticsConfig}/> et <Comments commentsConfig={commentsConfig}/> qui intègrent un objet de configuration et restituent le composant approprié. Étant donné que les mises en page sont définies côté serveur, Next.js est capable d'utiliser l'objet de configuration pour déterminer quel composant restituer et envoyer uniquement le paquet de composants requis au client.

Nouveau composant de recherche

Qu'est-ce qu'un blog en 2023 sans barre de recherche avec palette de commandes?

L'une des fonctionnalités les plus demandées a été ajoutée 🎉! Le composant de recherche prend en charge 2 fournisseurs de recherche: Algolia et la recherche locale avec Kbar.

Algolia

Algolia Docsearch est un service gratuit populaire utilisé sur de nombreux sites Web de documentation. Il supprime automatiquement le site Web soumis à l'indexation et rend le résultat de la recherche disponible via une belle boîte de dialogue modale. Le composant Pliny s'inspire grandement de l'implémentation de Docusaurus et est livré avec une feuille de style compatible avec le thème CSS Tailwind.

Kbar

Kbar est une interface cmd+k rapide, portable et extensible. L'implémentation de Pliny utilise kbar pour créer une boîte de dialogue de recherche locale. Le composant charge un fichier JSON, « search.json » par défaut, qui a été créé lors du processus de création de la couche de contenu. Essayez d'appuyer sur ⌘-k ou ctrl-k pour voir la barre de recherche en action !

Mises à jour du style et de la mise en page

Thème

tailwind.config.js a été mis à jour pour utiliser les valeurs par défaut de la typographie tailwind lorsque cela est possible et pour utiliser la prise en charge intégrée du mode sombre via la classe prose-invert. Cela remplace la classe et la configuration « prose-dark » précédentes.

La couleur du thème principal est mise à jour de « teal » à « pink » et le thème gris principal de « neutral » à « gray ».

Inter est désormais remplacé par Space Grotesk comme police par défaut.

Nouvelles mises en page

Les composants de mise en page disponibles dans le répertoire « layouts » fournissent un moyen simple de personnaliser l'apparence du blog.²

L'inconvénient de créer un modèle populaire est que vous commencez à voir plusieurs sites similaires partout 😆. Bien que les utilisateurs soient encouragés à personnaliser les mises en page à leur guise, le fait de disposer de plus d'options de mise en page facilement commutables favorise la diversité et peut peut-être constituer un bon point de départ pour des personnalisations supplémentaires.

Dans la v2, j'ai ajouté une nouvelle mise en page de publication - PostBanner. Il comporte une grande image de bannière et un conteneur de contenu centré. Consultez le billet de blog « Photos du Canada » qui a été mis à jour pour utiliser la nouvelle mise en page.

La présentation par défaut de la liste des blogs a également été mise à jour pour inclure une barre latérale avec des balises de blog. La barre de recherche dans la présentation précédente a été remplacée par la nouvelle recherche par palette de commandes. Pour revenir à l'ancienne mise en page, remplacez simplement les pages qui utilisent le composant ListLayoutWithTags par la ListLayout d'origine.

Recommandations de migration

En raison des changements importants dans la structure des répertoires, la configuration et les outils, je recommande de partir d'un nouveau modèle et de copier le contenu existant, puis de migrer progressivement les modifications vers le nouveau modèle.

Les modifications de style doivent être relativement mineures et peuvent être copiées de l'ancien « tailwind.config.js » vers le nouveau. En cas de copie, vous devrez peut-être rajouter la classe « prose-dark » aux composants qui optent pour le style typographique tailwind. Modifiez l'importation de polices dans le composant de mise en page racine pour utiliser la police souhaitée.

Les modifications apportées au pipeline et au schéma de traitement MDX peuvent être facilement transférées vers la nouvelle configuration Contentlayer. S'il y a des modifications dans les champs frontmatter, vous pouvez modifier le type de document dans « contentlayer.config.ts » pour inclure les nouveaux champs. Des plugins personnalisés peuvent être ajoutés aux propriétés remarkPlugins et rehypePlugins dans l'exportation makeSource de contentlayer.config.ts.

Les mises en page Markdown ne proviennent plus automatiquement du répertoire « layouts ». Au lieu de cela, ils doivent être spécifiés dans l'objet layouts défini dans blog/[...slug]/page.tsx.³

Pour porter sur des composants ou des pages plus grandes, je recommande d'abord de le spécifier en tant que composant client en utilisant la directive "use client". Une fois le rendu correct, vous pouvez diviser les composants interactifs (parties qui reposent sur des hooks «use») en tant que composant client et conserver le code restant en tant que composant serveur. Consultez le [guide de migration] Next.js complet (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app) pour plus de détails .

Conclusion

J'espère que vous apprécierez les nouvelles fonctionnalités et améliorations de la V2. Si vous avez des commentaires ou des suggestions, n'hésitez pas à ouvrir un problème ou à me contacter sur Twitter.

Support

Vous utilisez le modèle? Soutenez cet effort en attribuant une étoile sur GitHub, en partageant votre propre blog et en criant sur Twitter ou en devenant un [sponsor] du projet (https://github.com/sponsors/timlrx).

Licence

MIT © Timothy Lin