"Post",

Comment je file Sanity CMS Contenu multilingue à Next.js avec next-intl

Présentation

Sanity CMS, ainsi que Next.js App Router et next-intl, offrent une solution de gestion de contenu multilingue robuste. Cependant, la connexion transparente de ces composants peut être très difficile. Ce post documente le processus d'intégration du support multilingue de Sanity CMS dans un projet de production utilisant la prochaine intl.

Responsabilités

D'abord, clarifions qui est responsable de quoi :

• Sanité: Gère le stockage de contenu via le plugin d'internationalisation de document.
• Suivant: Gère le routage et la livraison des messages [locale] segment dynamique dans les URLs.
• Vous (le développeur): agit comme couche de pont pour assurer une bonne intégration.

Conception du schéma

Pour obtenir une fonctionnalité multilingue transparente, il est crucial de concevoir votre schéma avec soin. Commencez par installer le plugin d'internationalisation du document Sanity:

npm i @sanity/document-internationalization

Ensuite, configurer dans sanity.config.ts:

// sanity.config.ts
import { defineConfig } from 'sanity';
import { documentInternationalization } from '@sanity/document-internationalization';

export default defineConfig({
  // ... existing configurations
  plugins: [
    documentInternationalization({
      supportedLanguages: [
        { id: 'en', title: 'English' },
        { id: 'fr', title: 'French' },
        { id: 'de', title: 'German' },
      ],
      schemaTypes: ['page', 'post'],
    }),
  ],
});

Concevoir votre schéma pour garder des champs neutres sur un type de document partagé et placer tous les champs translatables sur le document local:

// schemas/post.ts
import { defineType, defineField } from 'sanity';

export const post = defineType({
  name: 'post',

  type: 'document',
  fields: [
    defineField({ name: 'language', type: 'string', readOnly: true, hidden: true }),
    defineField({ name: 'slug', type: 'slug' }),
    // ... other fields
  ],
});

Patterns de requête GROQ

Pour récupérer un seul message par slug et locale, utilisez le modèle de requête GROQ suivant :

// Fetch a single post by slug and locale
*[ _type == "post" && language == $locale && slug.current == $slug && !(_id in path("drafts.**")) ][0]
{
  _id,
  title,
  slug,
  language,

}

Pour lister les pages qui nécessitent des URLs alternées (alternatives canoniques pour SEO hreflang), récupérer toutes les variantes de langue via le _translations Référence des métadonnées:

// Get all locale versions of a document to build hreflang
*[ _type == "translation.metadata" && references($id) ][0]
{
  translati...

Conclusion

En suivant ces étapes et en maintenant des responsabilités claires, vous pouvez intégrer efficacement le contenu multilingue de Sanity CMS avec Next.js et next-intl. Cette configuration garantit que votre projet est bien structuré, évolutif et prêt à l'internationalisation.

[Titre]: "Comment je télécharge le contenu multilingue de Sanity CMS vers Next.js avec next-intl" [Description]: "Sanity CMS support multilingue avec next-intl dans l'App Router Next.js est l'une de ces configurations où chaque pièce fonctionne bien en isolement mais le câblage entre eux est difficile. Ce message documente exactement comment je relie les deux sur les projets de production." [Tags]: "Suivant.js, Sanity CMS, Contenu multilingue, Internationalisation"

---

Source : DEV Community. Synthèse éditoriale assistée par IA — TechnoExpress.