So erstellen Sie einen mehrsprachigen Blog mit Next.js

In diesem Tutorial erstellen wir mit Next.js einen Blog mit mehrsprachiger Unterstützung. Der Blog wird auf Englisch und Spanisch sein und kann auf beliebig viele Sprachen erweitert werden.

Beginnen wir damit, das Terminal zu öffnen und mit create-next-app eine einfache Next.js-App zu erstellen. Ersetzen Sie Reiseblog durch den Namen Ihres Blogs.

npx create-next-app@latest travel-blog

Ändern Sie das Verzeichnis, um in den Ordner des Blogs zu gelangen.

cd travel-blog

Starten Sie den Next.js-Entwicklungsserver:

npm run dev

Öffnen Sie Ihren Browser und besuchen Sie http://localhost:3000 , um eine einfache Next.js-Website anzuzeigen. Wir werden die Lokalisierung in Next.js aktivieren. Öffnen Sie /travel-blog/next.config.js in Ihrem Editor und diesen Code und speichern Sie die Datei:

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

Beenden Sie den Next.js-Entwicklungsserver und starten Sie ihn erneut, damit diese Änderung wirksam wird:

npm run dev

Next.js unterstützt jetzt URLs mit Gebietsschemas, die aus Sprachcodes mit zwei Buchstaben bestehen, wie: http://localhost:3000/es und http://localhost:3000/en .

Als nächstes werden wir einige Inhalte zur Homepage hinzufügen. Wir benötigen einige Artikel, die im Blog angezeigt werden sollen. Lassen Sie uns Polyblog installieren, um schnell einige Modellartikel zu erhalten:

npm install @polyblog/polyblog-js-client

Fügen Sie diesen Code in nextjs-blog-example/pages/index.js ein und speichern Sie:

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

Melden Sie sich unter https://app.polyblog.io/signup an, um Ihre blogId zur Eingabe in den obigen Code zu erhalten. Besuchen Sie nach der Anmeldung die Seite Einstellungen, um die ID Ihres Blogs zu finden (z. B. 1234567890abcdef12345678). Sie können jetzt http://localhost:3000/en besuchen, um Artikel auf Englisch anzuzeigen. Sie können http://localhost:3000/es besuchen, um dieselben Artikel auf Spanisch anzuzeigen.

Wow. Das war schnell.
Mark Zuckerberg riet uns, „sich schnell zu bewegen und Dinge zu zerbrechen“. Wir vermissen jedoch den Break-Things-Teil. Werfen Sie etwas auf den Boden und springen Sie euphorisch darauf! Er meinte das nicht so? Okay okay, wenn du den Raum nicht verwüsten willst, lass uns zurück zum Blog gehen.

Im obigen Code sehen Sie eine Funktion getStaticProps, eine spezielle Funktion, die Next.js zum Abrufen von Daten und für andere tolle Extras wie das Vorab-Rendering verwendet.

Erstellen Sie eine Datei travel-blog/pages/[slug].js und fügen Sie diese ein:

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

Sie können auf einen der Artikel auf der Homepage klicken und es sollte Sie zur Artikelseite führen. Hier steckt viel Magie drin. So viel Magie, wir beschwören einen Blog aus dem Nichts. Versuchen wir zu verstehen, was los ist. Zu Beginn sieht dieser komisch aussehende Dateiname [slug].js verdächtig aus. Es ist kein Fehler, es ist ein Feature und Next.js nennt es Dynamic Routes . [slug].js ist ein Platzhalterparameter, der einen Teil der URL an unsere Seitenkomponente weitergibt. Sie können im obigen Code sehen, dass die Funktion getStaticProps einen Parameter empfängt, der ein Feld namens slug enthält. Es gibt eine weitere spezielle Next.js-Funktion namens getStaticPaths , die verwendet wird, um alle Artikel des gesamten Blogs in allen Sprachen abzurufen, um HTML-Seiten statisch zu generieren und sie superschnell über ein CDN bereitzustellen.