Cómo crear un blog multilingüe con Next.js

En este tutorial vamos a crear un blog con soporte multilenguaje usando Next.js. El blog estará en inglés y español extensible a tantos idiomas como desees.

Comencemos abriendo la terminal y creando una aplicación Next.js básica con create-next-app. Reemplace travel-blog con el nombre de su blog.

npx create-next-app@latest travel-blog

Cambia de directorio para entrar en la carpeta del blog.

cd travel-blog

Inicie el servidor de desarrollo Next.js:

npm run dev

Abra su navegador y visite http://localhost:3000 para ver un sitio web básico de Next.js. Vamos a habilitar la localización en Next.js. Abra /travel-blog/next.config.js en su editor y este código y guarde el archivo:

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

Detenga y vuelva a iniciar el servidor de desarrollo Next.js para que este cambio surta efecto:

npm run dev

Next.js ahora admite URL con configuraciones regionales hechas de códigos de idioma de 2 letras como: http://localhost:3000/es y http://localhost:3000/en .

A continuación vamos a añadir algo de contenido a la página de inicio. Necesitaremos algunos artículos para mostrar en el blog. Instalemos Polyblog para obtener algunos artículos de maqueta rápidamente:

npm install @polyblog/polyblog-js-client

Pegue este código en nextjs-blog-example/pages/index.js y guarde:

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>
 )
 }

Regístrese en https://app.polyblog.io/signup para obtener su ID de blog para ingresar el código anterior. Después de registrarse, visite la página Configuración para encontrar la identificación de su blog (ej. 1234567890abcdef12345678) Ahora puede visitar http://localhost:3000/en para ver artículos en inglés. Puede visitar http://localhost:3000/es para ver los mismos artículos en español.

Guau. Eso fue rápido.
Mark Zuckerberg nos aconsejó “moverse rápido y romper cosas”. Sin embargo, nos falta la parte de romper cosas. ¡Tira algo al suelo y salta sobre él con euforia! ¿Él no quiso decir eso? Vale, vale, si no quieres destrozar la habitación, volvamos al blog.

En el código anterior, puede ver una función getStaticProps, que es una función especial que utiliza Next.js para la obtención de datos y otras ventajas increíbles, como la renderización previa.

Crea un archivo travel-blog/pages/[slug].js y pega esto:

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>
 )
 }

Puede hacer clic en uno de los artículos en la página de inicio y debería llevarlo a la página del artículo. Hay mucha magia aquí. Tanta magia, estamos convocando un blog de la nada. Tratemos de entender lo que está pasando. Para comenzar, ese nombre de archivo de aspecto divertido [slug].js parece sospechoso. No es un error, es una función y Next.js lo llama Dynamic Routes . [slug].js es un parámetro comodín que pasará una parte de la URL a nuestro componente de página. Puede ver en el código anterior que la función getStaticProps está recibiendo parámetros que contienen un campo llamado slug . Hay otra función especial de Next.js llamada getStaticPaths que se usa para obtener todos los artículos de todo el blog en todos los idiomas para generar estáticamente páginas html y servirlas súper rápido a través de un CDN.