Come creare un blog multilingue con Next.js

In questo tutorial creeremo un blog con supporto multilingue utilizzando Next.js. Il blog sarà in inglese e spagnolo estendibile a tutte le lingue che desideri.

Iniziamo aprendo il terminale e creando un'app Next.js di base con create-next-app. Sostituisci travel-blog con il nome del tuo blog.

npx create-next-app@latest travel-blog

Cambia directory per entrare nella cartella del blog.

cd travel-blog

Avvia il server di sviluppo Next.js:

npm run dev

Apri il browser e visita http://localhost:3000 per vedere un sito Web Next.js di base. Abiliteremo la localizzazione in Next.js. Apri /travel-blog/next.config.js nel tuo editor e questo codice e salva il file:

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

Arrestare e riavviare il server di sviluppo Next.js affinché questa modifica abbia effetto:

npm run dev

Next.js ora supporta gli URL con locali composti da codici lingua di 2 lettere come: http://localhost:3000/es e http://localhost:3000/en .

Successivamente aggiungeremo alcuni contenuti alla home page. Avremo bisogno di alcuni articoli da mostrare nel blog. Installiamo Polyblog per ottenere velocemente alcuni articoli di mockup:

npm install @polyblog/polyblog-js-client

Incolla questo codice in nextjs-blog-example/pages/index.js e salva:

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

Iscriviti su https://app.polyblog.io/signup per ottenere il tuo blogId da inserire nel codice sopra. Dopo esserti registrato visita la pagina Impostazioni per trovare l'id del tuo blog (es. 1234567890abcdef12345678) Ora puoi visitare http://localhost:3000/en per vedere gli articoli in inglese. Puoi visitare http://localhost:3000/es per vedere gli stessi articoli in spagnolo.

Oh. È stato veloce.
Mark Zuckerberg ci ha consigliato di "andare veloci e rompere le cose". Tuttavia, ci manca la parte delle cose di rottura. Getta qualcosa per terra e saltaci sopra euforicamente! Non intendeva così? Va bene va bene, se non vuoi buttare via la stanza torniamo al blog.

Nel codice sopra puoi vedere una funzione getStaticProps che è una funzione speciale che Next.js usa per il recupero dei dati e altre fantastiche chicche come il pre-rendering.

Crea un file travel-blog/pages/[slug].js e incollalo:

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

Puoi fare clic su uno degli articoli nella home page e dovrebbe portarti alla pagina dell'articolo. C'è molta magia qui. Tanta magia, stiamo evocando un blog dal nulla. Proviamo a capire cosa sta succedendo. Per iniziare quel nome di file dall'aspetto divertente [slug].js sembra sospetto. Non è un bug, è una funzionalità e Next.js la chiama Dynamic Routes . [slug].js è un parametro con caratteri jolly che passerà una parte dell'URL al nostro componente della pagina. Puoi vedere nel codice sopra la funzione getStaticProps sta ricevendo un parametro che contiene un campo chiamato slug . C'è un'altra speciale funzione Next.js chiamata getStaticPaths che viene utilizzata per recuperare tutti gli articoli dell'intero blog in tutte le lingue per generare staticamente pagine html e servirle molto velocemente su un CDN.