Next.js ile çok dilli bir blog nasıl oluşturulur?

Bu eğitimde, Next.js kullanarak çoklu dil desteğine sahip bir blog oluşturacağız. Blog, İngilizce ve İspanyolca olacak ve dilediğiniz kadar dile genişletilebilir.

Terminali açarak ve create-next-app ile temel bir Next.js uygulaması oluşturarak başlayalım. travel-blog'u blogunuzun adıyla değiştirin.

npx create-next-app@latest travel-blog

Blog klasörünün içine girmek için dizini değiştirin.

cd travel-blog

Next.js geliştirme sunucusunu başlatın:

npm run dev

Temel bir Next.js web sitesini görmek için tarayıcınızı açın ve http://localhost:3000 adresini ziyaret edin. Next.js'de yerelleştirmeyi etkinleştireceğiz. Editörünüzde /travel-blog/next.config.js dosyasını ve bu kodu açın ve dosyayı kaydedin:

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

Bu değişikliğin etkili olması için Next.js dev sunucusunu durdurun ve yeniden başlatın:

npm run dev

Next.js artık http://localhost:3000/es ve http://localhost:3000/en gibi 2 harfli dil kodlarından oluşan yerel ayarlara sahip url'leri destekliyor.

Ardından, ana sayfaya bazı içerikler ekleyeceğiz. Blogda göstermek için bazı makalelere ihtiyacımız olacak. Bazı maket makaleleri hızlı bir şekilde almak için Polyblog'u yükleyelim:

npm install @polyblog/polyblog-js-client

Bu kodu nextjs-blog-example/pages/index.js içine yapıştırın ve kaydedin:

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

Blog kimliğinizin yukarıdaki kodu girmesi için https://app.polyblog.io/signup adresinden kaydolun. Kaydolduktan sonra, blogunuzun kimliğini bulmak için Ayarlar sayfasını ziyaret edin (ör. 1234567890abcdef12345678) Artık İngilizce makaleleri görmek için http://localhost:3000/en adresini ziyaret edebilirsiniz. Aynı makaleleri İspanyolca olarak görmek için http://localhost:3000/es adresini ziyaret edebilirsiniz.

Vay. Bu kadar hızlı oldu.
Mark Zuckerberg bize “hızlı hareket etmemizi ve bir şeyleri kırmamızı” tavsiye etti. Yine de ara şeyler bölümünü kaçırıyoruz. Yere bir şey atın ve coşkuyla üzerine atlayın! Öyle demek istemedi mi? Tamam tamam, odayı çöpe atmak istemiyorsan bloğa geri dönelim.

Yukarıdaki kodda, Next.js'nin veri alma ve ön işleme gibi diğer harika güzellikler için kullandığı özel bir işlev olan getStaticProps işlevini görebilirsiniz.

Bir travel-blog/pages/[slug].js dosyası oluşturun ve şunu yapıştırın:

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

Ana sayfadaki makalelerden birine tıklayabilirsiniz ve sizi makale sayfasına yönlendirmelidir. Burada çok fazla sihir var. O kadar çok sihir ki, hiç yoktan bir blog çağırıyoruz. Neler olduğunu anlamaya çalışalım. Bu komik görünen dosya adını başlatmak için [slug].js şüpheli görünüyor. Bu bir hata değil, bir özelliktir ve Next.js buna Dinamik Rotalar adını verir. [slug].js, URL'nin bir bölümünü sayfa bileşenimize iletecek bir joker karakter parametresidir. Yukarıdaki kodda getStaticProps işlevinin slug adlı bir alan içeren bir param aldığını görebilirsiniz. Statik olarak html sayfaları oluşturmak ve bunları bir CDN üzerinden süper hızlı sunmak için blogun tamamındaki tüm makaleleri tüm dillerde getirmek için kullanılan getStaticPaths adlı başka bir özel Next.js işlevi vardır.