Intégrer Waline avec Next.js
Waline: Un système de commentaires léger et moderne
Waline est un système de commentaires open-source conçu pour être léger, rapide et facile à intégrer. Il est particulièrement adapté aux blogs et sites web générés statiquement, ce qui est également possible avec Next.js.
Contrairement à d'autres systèmes de commentaires qui peuvent alourdir vos pages, Waline utilise une architecture bases de données sans serveur, garantissant ainsi des performances optimales.
Même si à un moment donné je voulais créer mon propre système de commentaires avec l'orm Prisma, c'est finalement la solution que j'ai choisi pour mon propre site web, celui que vous visitez en ce moment!
Les avantages de Waline
- Léger et rapide : Waline est conçu pour minimiser l'impact sur les performances de votre site.
- Open Source : Vous pouvez personnaliser Waline selon vos besoins et contribuer à son développement.
- Sans serveur : Utilise des fonctions lambda pour gérer les commentaires, ce qui signifie que vous n'avez pas à gérer de serveurs dédiés.
- Support Markdown : Permet aux utilisateurs de formater leurs commentaires avec Markdown.
- Personnalisable : Vous pouvez facilement personnaliser l'apparence et le comportement de Waline pour l'adapter à votre site.
Intégrer Waline à votre projet Next.js
Dans cet exemple, nous utiliserons également Typescript et Tailwind.css.
Voici un guide étape par étape pour intégrer Waline à votre projet Next.js.
Si besoin, voisi les liens officiels pour Waline:
- Préparer votre Environnement
Assurez-vous d'avoir un projet Next.js en place. Si ce n'est pas le cas, vous pouvez créer un nouveau projet en utilisant create-next-app :
npx create-next-app my-nextjs-blog
cd my-nextjs-blog
- Installer Waline
Waline fournit une interface JavaScript simple que vous pouvez ajouter à votre projet. Vous devez d'abord installer le package Waline :
npm, pnpm ou yarn:
npm install @waline/client
pnpm i @waline/client
yarn add @waline/client
- Configurer le Backend:
Waline nécessite une backend et une base de données pour stocker les commentaires.
Les instructions complètes pour déployer le backend sont disponibles dans la documentation de Waline, vous pouvez suivre le guide officiel.
Pour plus d'options concernant votre base de données, jetez un oeil à cette page
Pour plus d'options concernant le déploiement à proprement parler du backend, regardez dans "Deploy" sur la page de leur documentation.
- Ajouter Waline à votre Projet Next.js:
Créez un nouveau composant pour intégrer Waline. Ajoutez un fichier WalineComments.tsx dans votre dossier "components":
// components/WalineComments.tsx
'use client'
import { useEffect } from 'react';
import Waline from '@waline/client';
interface WalineCommentsProps {
className?: string;
}
const WalineComments: React.FC<WalineCommentsProps> = ({ className }) => {
useEffect(() => {
init({
el: '#waline',
lang: 'fr', // changez selon la langue utilisée
reaction: true,
serverURL: 'https://votre-serveur-waline.vercel.app', // changez l'url de votre serveur ici
emoji: [
'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus',
],
requiredMeta: ['nick'],
})});
return <div id="waline" className={`${className}`} />;
};
export default WalineComments;
- Customisez le css:
Créez un fichier walinecustom.css, copiez-collez le code suivant, et adaptez le selon vos goûts/thèmes ou besoins.
#waline {
--waline-theme-color: #677DE1;
--waline-active-color: #7790ff;
/* Regular color */
--waline-white: #fff;
--waline-light-grey: #b3b3b3;
--waline-dark-grey: #383838;
/* Information */
--waline-info-font-size: 0.625em;
/* Layout Color */
--waline-color: #c47676;
--waline-bg-color: #fff;
--waline-bg-color-light: #f8f8f8;
--waline-bg-color-hover: #f0f0f0;
--waline-border-color: #ddd;
--waline-disable-bg-color: #f8f8f8;
--waline-disable-color: #bbb;
--waline-code-bg-color: #282c34;
}
#waline .wl-comment {
@apply gap-x-4;
}
#waline .wl-panel {
margin: 0;
}
#waline .wl-editor {
width: calc(100% - 2.4rem);
}
Importez ce fichier .css dans votre fichier tailwind.css principal:
@import 'walinecustom.css';
- Utiliser le Composant Waline dans vos pages:
Utilisez ce composant dans les pages où vous souhaitez afficher les commentaires. Par exemple, dans une page de blog post.tsx :
import { FC } from 'react';
import WalineComments from '@/components/WalineComments';
interface PostProps {
params: {
slug: string;
};
}
const Post: FC<PostProps> = ({ params }) => {
const { slug } = params;
// Simulez une récupération des données de votre post ici
const post = { title: 'Mon Premier Post', content: 'Ceci est le contenu de mon premier post.' };
return (
<div className='flex flex-col items-center justify-center'>
<h1>{post.title}</h1>
<p>{post.content}</p>
<WalineComments className=''/>
</div>
);
};
export default Post;
- Déployez votre projet:
Après avoir configuré Waline et mis à jour vos pages, déployez votre projet Next.js sur votre plateforme d'hébergement préférée. Assurez-vous que votre backend Waline est également déployé et configuré correctement.
Ajouter un compteur de vues
Créez un composant icon.tsx pour le compteur de vues :
// components/icon.tsx
import { SVGProps } from 'react'
export function Eye(svgProps: SVGProps<SVGSVGElement>) {
return (
<svg
{...svgProps}
xmlns="http://www.w3.org/2000/svg"
height="18"
width="18"
fill="currentColor"
viewBox="0 0 576 512"
>
<path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" />
</svg>
)
}
Créez un nouveau composent PageViews.tsx, puis ajoutez le code suivant:
// components/PageViews.tsx
'use client'
import React, { useEffect } from 'react'
import { useParams } from 'next/navigation'
import { pageviewCount } from '@waline/client'
import { Eye } from './icons'
interface PageviewProps {
path: string;
className?: string;
}
export const Pageview: React.FC<PageviewProps> = ({ path, className }) => {
const handlePageviewDataFetch = async () => {
pageviewCount({
serverURL: 'https://votre-serveur-waline.vercel.app', // changez l'url de votre serveur ici
path: path,
})
}
useEffect(() => {
handlePageviewDataFetch()
}, [path])
return (
<div className={`${className} flex flex-row items-center`}>
<Eye className={'mr-2'} />
<p className="mr-2">Vu</p>
<span className="waline-pageview-count mr-2" data-path={path} />
<p>fois</p>
</div>
)
}
Modifiez votre page de test ainsi:
import { FC } from 'react';
import WalineComments from '@/components/WalineComments';
import PageViews from '@/components/PageViews';
interface PostProps {
params: {
slug: string;
};
}
const Post: FC<PostProps> = ({ params }) => {
const { slug } = params;
// Simulez une récupération des données de votre post ici
const post = { title: 'Mon Premier Post', content: 'Ceci est le contenu de mon premier post.' };
return (
<div className='flex flex-col iems-center justify-center'>
<h1>{post.title}</h1>
<PageViews className=''/>
<p>{post.content}</p>
<WalineComments className=''/>
</div>
);
};
export default Post;
Note: vous verrez sûrement des erreurs en développement local, mais cela est normal, n'en tenez pas compte. Si vous avez tout configuré comme il se doit, il n'y aura aucun problème en production.
Bien sûr, n'oubliez pas de styliser ces composants, et vous serez fin prêt à partager vos articles avec votre public. En adaptant le code fourni, une intégration avec i18n (supporté par la librairie Waline) est également possible! Toutes les langues ne sont néammoins pas disponibles, mais Waline étant open-source, vous pouvez demandez une mise à jour en fournissant les traductions.
Conclusion
Waline est une solution de commentaires moderne, innovante et légère qui s'intègre parfaitement avec Next.js. En suivant ces étapes, vous pouvez facilement ajouter un système de commentaires performant et personnalisable à votre blog ou site web. Pour plus de détails et de configurations avancées, consultez leur documentation officielle!
