Construire un blog performant et multilingue avec Next.js, Tailwind et Docker

Création du blog avec Tailwind Next.js Starter Blog

Ce blog a été construit à partir du template Tailwind Next.js Starter Blog de Timlrx, un excellent point de départ pour créer un site moderne et performant.

Il repose sur les technologies suivantes :

• Next.js pour une expérience utilisateur fluide.
• Tailwind CSS pour un design personnalisable et rapide.
• Vercel pour un déploiement simple et efficace.
• Stockage et distribution des images via Amazon S3 et Amazon CloudFront.

Fonctionnalités principales

• Next.js avec TypeScript : pour un développement robuste.
• Contentlayer : gestion facile du contenu.
• MDX : mélangez Markdown et JSX dans vos articles.
• Tailwind CSS 3.0 : personnalisation rapide avec un attribut de couleur principale.
• Vue adaptée aux mobiles.
• Thème clair et sombre.
• Optimisation des polices avec next/font.

Performances optimales

• Score Lighthouse quasi parfait.
• Léger : seulement 85 kB pour le premier chargement JS.

Intégration avec Pliny

Ce blog bénéficie des fonctionnalités avancées offertes par Pliny, notamment :

• Analytique : choix entre Umami, Plausible, Simple Analytics, Posthog ou Google Analytics.
• Commentaires : via Giscus, Utterances ou Disqus.
• Newsletters : supporte Mailchimp, Convertkit, et plus encore.
• Recherche avancée : avec Kbar ou Algolia.
• Syntaxe mise en valeur : avec rehype-prism-plus pour numérotation et surlignage des lignes.
• Mathématiques : prises en charge via KaTeX.
• Citations et bibliographies : avec rehype-citation.
• Optimisation des images : grâce à next/image.

Fonctionnalités supplémentaires

• Pages par tag : chaque tag unique dispose d'une page dédiée.
• Support multi-auteurs.
• Mises en page variées pour blogs et listes d'articles.
• Routes imbriquées pour les articles de blog.
• Page de projets.
• En-têtes de sécurité préconfigurés.
• SEO optimisé : flux RSS, sitemaps, et plus encore.

Internationalisation (i18n)

Le blog est multilingue grâce à l'intégration d'i18next, avec l'aide de PxlSyl.

Docker : déployer facilement le blog

Pour ceux qui souhaitent utiliser Docker, voici un exemple de configuration. Retrouvez les fichiers complets dans mon dépôt GitHub.

Exemple de Dockerfile

FROM jitesoft/node-yarn:19

ADD package.json /package.json

ENV NODE_PATH=/node_modules
ENV PATH=$PATH:/node_modules/.bin
ENV YARN_VERSION 3.6.1

RUN yarn policies set-version $YARN_VERSION

WORKDIR /app
ADD . /app

RUN yarn

EXPOSE 3000

CMD ["yarn","dev"]

Nous utilisons une image yarn spécialisée, qui offre de meilleures performances par rapport à une image Node classique.

Exemple de docker-compose.yml

version: '3.8'
services:

  blog:
    build:
      context: .
      dockerfile: Dockerfile
    stdin_open: true
    restart: unless-stopped
    volumes:
      - '.:/app'
      - './node_modules:/app/node_modules:cached'
    environment:
      - NODE_ENV=development
    ports:
      - "3000:3000"

Instructions pour l'installation

1. Initialiser les dépendances Yarn :

Créez un container temporaire pour accéder à sa console :

docker-compose run --rm blog sh

Une fois dans le container, lancez :

yarn install

2. Démarrer la stack :

Après l'installation des dépendances, quittez le container et lancez :

docker-compose up -d

Ce blog, puissant et personnalisable, constitue une solution idéale pour les développeurs cherchant un environnement flexible et performant. N'hésitez pas à partager vos retours ou suggestions !