logo
Publié le

Configurer Waline sur un site Next.js déployé sur Vercel

Auteurs

💬 Introduction

Si tu veux permettre à tes lecteurs de laisser des commentaires sur ton blog Next.js, sans dépendre d’un service externe comme Disqus, Waline est une excellente solution.

Waline est :

  • 🧩 Auto-hébergé — tu gardes le contrôle des données
  • ⚡ Rapide — basé sur un backend serverless (idéal pour Vercel)
  • 🌍 Internationalisable
  • 🧠 Compatible Markdown, avatars, et réactionswq2

Dans cet article, on va configurer Waline étape par étape sur un site Next.js déployé sur Vercel.

Dans LeanCLoud

🧩 Configuration LeanCloud (Base de données)

  1. Connecte-toi ou inscris-toi sur LeanCloud Console.
  2. Clique sur Create app pour créer une nouvelle application.
    Donne-lui un nom et sélectionne le plan Developer.
conf-waline1
  1. Une fois dans ton app, va dans Settings → App Keys (en bas à gauche).
    Note les valeurs suivantes :
    • APP ID
    • APP Key
    • Master Key
    • Server Url
conf-waline2 Tu en auras besoin pour la configuration du serveur.

Vercel

Déployer sur Vercel (Serveur)

  1. Clique sur le bouton Deploy ci-dessus pour déployer le modèle Waline sur Vercel.

Deploy

Vous aurez besoin de vous connecter sur github pour crééer le dépôt.

  1. Donne un nom à ton projet puis clique sur Create et lancer le déploiement Vercel créera un nouveau dépôt basé sur le modèle Waline. conf-waline3 conf-waline4 conf-waline5

  2. Dès que le déploiement sera terminé, accéder au tableau de bord

    conf-waline6

  3. Ajouter les variables d'environnement dans l’onglet Settings → Environment Variables, :

    • LEAN_ID → valeur de APP ID
    • LEAN_KEY → valeur de APP Key
    • LEAN_MASTER_KEY → valeur de Master Key
    • LEAN_SERVER → valeur de REST API Server Url
    conf-waline7

    👉 Tu peux consulter les autres variables disponibles ici.

  4. Ensuite, redéploie ton aserver waline via Deployments → Redeploy.

conf-waline8
  1. Quand le statut passe à Ready, clique sur Visit pour ouvrir ton serveur Waline.

Récupération du serverURL pour le client

Dans Settings → Domains, récupére ton domaine qui représente le serverURL.

conf-waline9

Gestion des commentaires (Administration)

Une fois le déploiement terminé, veuillez visiter <serverURL>/ui/register pour vous enregistrer.

La première personne à s’enregistrer sera définie comme administrateur. Après vous être connecté en tant qu’administrateur, vous aurez accès à l’interface de gestion des commentaires. Vous pourrez y modifier, marquer ou supprimer des commentaires. Les utilisateurs peuvent également créer un compte via la boîte de commentaires, et ils seront redirigés vers leur page de profil après connexion.

Le panneau d'administration waline est accessible via <serverURL>/ui conf-waline10

🧱 Dans votre projet Côté client : intégrer Waline dans Next.js

Installe le client Waline :

npm install @waline/client

Puis crée un composant React WalineComments.tsx :

'use client'

import { useCallback, useEffect, useState } from 'react'
import { init } from '@waline/client'
import { useParams } from 'next/navigation'
import { useTranslation } from '@/app/i18n/client'
import siteMetadata from '@/data/siteMetadata'
import type { LocaleTypes } from '@/app/i18n/settings'
import type { ReactElement } from 'react'
import '@waline/client/style.css'

export default function WalineComments(): ReactElement {
  const locale = useParams()?.locale as LocaleTypes
  const { t } = useTranslation(locale, 'home')
  const [loadComments, setLoadComments] = useState<boolean>(false)

  const handleLoadComments = useCallback(() => {
    setLoadComments(true)
  }, [])

  useEffect(() => {
    if (loadComments) {
      init({
        el: '#waline',
        lang: locale,
        reaction: true,
        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'],
        serverURL: siteMetadata.walineServer,
      })
    }
  }, [loadComments, locale])

  return (
    <>
      {!loadComments && (
        <button
          className="bg-primary-500 mb-6 rounded p-2 text-white hover:opacity-80 dark:hover:opacity-80"
          onClick={handleLoadComments}
        >
          {t('comment')}
        </button>
      )}
      {loadComments ? <div className="mt-6 mb-6" id="waline" /> : null}
    </>
  )
}

📁 Configurer siteMetadata.js

Ajoute ton URL de serveur Waline :

// data/siteMetadata.js
const siteMetadata = {
  ...
  walineServer: '<serverURL>', //
}
export default siteMetadata

🌐 Afficher les commentaires dans tes articles

Dans ton template d’article :

import WalineComments from '@/components/WalineComments'

export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <WalineComments />
    </article>
  )
}

✅ Résultat

Tu as maintenant :

💬 Un système de commentaires fonctionnel et multilingue

☁️ Une base de données LeanCloud gratuite

🚀 Un serveur hébergé sur Vercel

🔐 Une configuration sécurisée via variables d’environnement

PARTAGER