Como criar um blog multilíngue com o Next.js

Neste tutorial, vamos criar um blog com suporte a vários idiomas usando o Next.js. O blog será em inglês e espanhol extensível a quantos idiomas você desejar.

Vamos começar abrindo o terminal e criando um aplicativo Next.js básico com create-next-app. Substitua travel-blog pelo nome do seu blog.

npx create-next-app@latest travel-blog

Altere o diretório para entrar na pasta do blog.

cd travel-blog

Inicie o servidor de desenvolvimento Next.js:

npm run dev

Abra seu navegador e visite http://localhost:3000 para ver um site básico do Next.js. Vamos habilitar a localização em Next.js. Abra /travel-blog/next.config.js em seu editor e este código e salve o arquivo:

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

Pare e reinicie o servidor Next.js dev para que esta alteração entre em vigor:

npm run dev

O Next.js agora oferece suporte a urls com códigos de idioma de 2 letras como: http://localhost:3000/es e http://localhost:3000/en .

Em seguida, vamos adicionar algum conteúdo à página inicial. Vamos precisar de alguns artigos para mostrar no blog. Vamos instalar o Polyblog para obter alguns artigos de maquete rapidamente:

npm install @polyblog/polyblog-js-client

Cole este código em nextjs-blog-example/pages/index.js e salve:

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

Inscreva-se em https://app.polyblog.io/signup para obter o seu blogId para inserir o código acima. Depois de se inscrever visite a página Configurações para encontrar o id do seu blog (ex. 1234567890abcdef12345678) Agora você pode visitar http://localhost:3000/en para ver artigos em inglês. Você pode visitar http://localhost:3000/es para ver os mesmos artigos em espanhol.

Uau. Isso foi rápido.
Mark Zuckerberg nos aconselhou a “agir rápido e quebrar as coisas”. No entanto, estamos perdendo a parte das coisas do intervalo. Jogue algo no chão e pule sobre ele com euforia! Ele não quis dizer isso? Tudo bem, se você não quer estragar a sala, vamos voltar ao blog.

No código acima, você pode ver uma função getStaticProps, que é uma função especial que o Next.js usa para buscar dados e outros recursos incríveis, como pré-renderização.

Crie um arquivo travel-blog/pages/[slug].js e cole isto:

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

Você pode clicar em um dos artigos na página inicial e isso o levará à página do artigo. Há muita magia aqui. Tanta magia, estamos convocando um blog do nada. Vamos tentar entender o que está acontecendo. Para começar, esse nome de arquivo engraçado [slug].js parece suspeito. Não é um bug, é um recurso e o Next.js o chama de Dynamic Routes . [slug].js é um parâmetro curinga que passará uma parte da url para nosso componente de página. Você pode ver no código acima que a função getStaticProps está recebendo um params que contém um campo chamado slug . Há outra função especial do Next.js chamada getStaticPaths que é usada para buscar todos os artigos do blog inteiro em todos os idiomas para gerar estaticamente páginas html e servi-las super rápido em um CDN.