Comment créer un blog multilingue avec Next.js

Dans ce didacticiel, nous allons créer un blog avec prise en charge multilingue à l'aide de Next.js. Le blog sera en anglais et en espagnol extensible à autant de langues que vous le souhaitez.

Commençons par ouvrir le terminal et créer une application Next.js de base avec create-next-app. Remplacez travel-blog par le nom de votre blog.

npx create-next-app@latest travel-blog

Changez de répertoire pour accéder au dossier du blog.

cd travel-blog

Démarrez le serveur de développement Next.js :

npm run dev

Ouvrez votre navigateur et visitez http://localhost:3000 pour voir un site Web Next.js de base. Nous allons activer la localisation dans Next.js. Ouvrez /travel-blog/next.config.js dans votre éditeur et ce code et enregistrez le fichier :

module.exports = {
 reactStrictMode: true,
 i18n: {
 locales: ['en', 'es'],
 defaultLocale: 'en',
 },
 }

Arrêtez et redémarrez le serveur de développement Next.js pour que cette modification prenne effet :

npm run dev

Next.js prend désormais en charge les URL avec des paramètres régionaux composés de codes de langue à 2 lettres comme : http://localhost:3000/es et http://localhost:3000/en .

Ensuite, nous allons ajouter du contenu à la page d'accueil. Nous aurons besoin de quelques articles à afficher dans le blog. Installons Polyblog pour obtenir rapidement des articles de maquette :

npm install @polyblog/polyblog-js-client

Collez ce code dans nextjs-blog-example/pages/index.js et enregistrez :

import Link from 'next/link'
 import { getArticles } from '@polyblog/polyblog-js-client'

 export async function getStaticProps({locale}) {
 // signup at https://app.polyblog.io/signup to get your blogId
 const articles = await getArticles({
 blogId: 'YOUR_BLOG_ID',
 locale,
 published: true,
 sortDirection: 'DESC',
 })

 return {
 props: {
 articles
 }
 }

 }

 export default function Blog({articles}) {
 return (
 <div>
 <h1>Blog</h1>
 {articles?.map(article => (
 <Link key={article._id} href={article.slug}>
 <a>
 <h4>{article.title}</h4>
 </a>
 </Link>
 ))}
 </div>
 )
 }

Inscrivez-vous sur https://app.polyblog.io/signup pour obtenir votre blogId à saisir dans le code ci-dessus. Après votre inscription, visitez la page Paramètres pour trouver l'identifiant de votre blog (ex. 1234567890abcdef12345678) Vous pouvez maintenant visiter http://localhost:3000/en pour voir des articles en anglais. Vous pouvez visiter http://localhost:3000/es pour voir les mêmes articles en espagnol.

Ouah. C'était rapide.
Mark Zuckerberg nous a conseillé « d'aller vite et de casser les choses ». Il nous manque cependant la partie casser les choses. Lancez quelque chose par terre et sautez dessus de manière euphorique ! Il ne voulait pas dire comme ça ? Bon d'accord, si vous ne voulez pas saccager la salle, revenons au blog.

Dans le code ci-dessus, vous pouvez voir une fonction getStaticProps qui est une fonction spéciale que Next.js utilise pour la récupération de données et d'autres avantages impressionnants comme le pré-rendu.

Créez un fichier travel-blog/pages/[slug].js et collez ceci :

import { getArticles } from '@polyblog/polyblog-js-client'

 export async function getStaticPaths({locales}) {
 let articles = await getArticles({
 blogId: 'YOUR_BLOG_ID',
 published: true,
 })
 articles = articles.filter(({locale}) => locales.includes(locale))

 const paths = articles.map((article) => ({
 locale: article.locale,
 params: { slug: article.slug },
 }))

 return { paths, fallback: 'blocking' }
 }

 export async function getStaticProps({locale, params}) {

 const { slug } = params
 const articles = await getArticles({
 blogId: 'YOUR_BLOG_ID',
 locale,
 slug,
 })

 return {
 props: {
 article: articles[0],
 }
 }

 }

 export default function Article({article}) {
 return (
 <div>
 {article && (
 <div>
 <h1>{article.title}</h1>
 <div>{article.description}</div>
 <div dangerouslySetInnerHTML={{ __html: article.content }} />
 </div>
 )}
 </div>
 )
 }

Vous pouvez cliquer sur l'un des articles de la page d'accueil et cela devrait vous conduire à la page de l'article. Il y a beaucoup de magie ici. Tant de magie, nous convoquons un blog à partir de rien. Essayons de comprendre ce qui se passe. Pour commencer, ce nom de fichier amusant [slug].js semble suspect. Ce n'est pas un bogue, c'est une fonctionnalité et Next.js l'appelle Dynamic Routes . [slug].js est un paramètre générique qui transmettra une partie de l'URL à notre composant de page. Vous pouvez voir dans le code ci-dessus que la fonction getStaticProps reçoit un params qui contient un champ nommé slug . Il existe une autre fonction spéciale Next.js appelée getStaticPaths qui est utilisée pour récupérer tous les articles de l'ensemble du blog dans toutes les langues pour générer statiquement des pages html et les servir très rapidement sur un CDN.