<p style=";text-align:right;direction:rtl">في هذا البرنامج التعليمي ، سننشئ مدونة بدعم متعدد اللغات باستخدام Next.js.
ستكون المدونة باللغتين الإنجليزية والإسبانية قابلة للتوسيع إلى العديد من اللغات كما تريد.
<p style=";text-align:right;direction:rtl"> لنبدأ بفتح المحطة وإنشاء تطبيق Next.js أساسي باستخدام تطبيق create-next-app.
استبدل travel-blog باسم مدونتك.
<pre style=";text-align:right;direction:rtl"> <code class="language-bash">npx create-next-app@latest travel-blog
```
<p style=";text-align:right;direction:rtl"> قم بتغيير الدليل للدخول إلى مجلد المدونة.
<pre style=";text-align:right;direction:rtl"> <code class="language-bash">cd travel-blog
```
<p style=";text-align:right;direction:rtl"> ابدأ خادم تطوير Next.js:
<pre style=";text-align:right;direction:rtl"> <code class="language-bash">npm run dev
```
<p style=";text-align:right;direction:rtl"> افتح المتصفح وقم بزيارة [http: // localhost: 3000](http://localhost:3000) لمشاهدة موقع ويب Next.js الأساسي.
سنقوم بتمكين الترجمة في Next.js.
افتح /travel-blog/next.config.js في المحرر الخاص بك وهذا الرمز واحفظ الملف:
<pre style=";text-align:right;direction:rtl"> <code class="language-jsx">module.exports = {
reactStrictMode: true,
i18n: {
locales: ['en', 'es'],
defaultLocale: 'en',
},
}
```
<p style=";text-align:right;direction:rtl"> أوقف وابدأ تشغيل خادم Next.js dev مرة أخرى حتى يسري هذا التغيير:
<pre style=";text-align:right;direction:rtl"> <code class="bash">npm run dev
```
<p style=";text-align:right;direction:rtl"> يدعم Next.js الآن عناوين url ذات الإعدادات المحلية المكونة من رموز لغة مكونة من حرفين مثل: [http: // localhost: 3000 / es](http://localhost:3000/es) و [http: // localhost: 3000 / en](http://localhost:3000/en) .
<p style=";text-align:right;direction:rtl"> بعد ذلك سنقوم بإضافة بعض المحتوى إلى الصفحة الرئيسية.
سنحتاج بعض المقالات لتظهر في المدونة. دعنا نثبت Polyblog للحصول على بعض المقالات بالحجم الطبيعي بسرعة:
<pre style=";text-align:right;direction:rtl"> <code class="language-bash">npm install @polyblog/polyblog-js-client
```
<p style=";text-align:right;direction:rtl"> الصق هذه الشفرة في nextjs-blog-example / pages / index.js واحفظ:
<pre style=";text-align:right;direction:rtl"> <code class="language-jsx">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>
)
}
```
<p style=";text-align:right;direction:rtl"> اشترك على [https://app.polyblog.io/signup](https://app.polyblog.io/signup) للحصول على معرف مدونتك لإدخال الرمز أعلاه.
بعد التسجيل ، قم بزيارة الصفحة "إعدادات" للعثور على معرف مدونتك (على سبيل المثال 1234567890abcdef12345678)
<p style=";text-align:right;direction:rtl"> يمكنك الآن زيارة [http: // localhost: 3000 / en](http://localhost:3000/en) للاطلاع على المقالات باللغة الإنجليزية. يمكنك زيارة [http: // localhost: 3000 / es](http://localhost:3000/es) لمشاهدة نفس المقالات باللغة الإسبانية.
<p style=";text-align:right;direction:rtl"> رائع. كان هذا سريعا.\
نصحنا مارك زوكربيرج "بالتحرك بسرعة وكسر الأشياء". نحن نفتقد جزء كسر الأشياء بالرغم من ذلك. ارمي شيئًا ما على الأرض واقفز عليه بنشوة! لم يقصد هكذا؟ حسنًا ، حسنًا ، إذا كنت لا تريد التخلص من الغرفة ، فلنعد إلى المدونة.
<p style=";text-align:right;direction:rtl"> في الكود أعلاه ، يمكنك رؤية وظيفة getStaticProps وهي وظيفة خاصة يستخدمها Next.js لجلب البيانات وغيرها من الأشياء الرائعة مثل العرض المسبق.
<p style=";text-align:right;direction:rtl"> قم بإنشاء ملف travel-blog / pages / [slug] .js والصق هذا:
<pre style=";text-align:right;direction:rtl"> <code class="language-jsx">
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>
)
}
```
<p style=";text-align:right;direction:rtl"> يمكنك النقر فوق إحدى المقالات الموجودة في الصفحة الرئيسية ويجب أن تقودك إلى صفحة المقالة.
هناك الكثير من السحر هنا. الكثير من السحر ، نحن نستدعي مدونة من فراغ.
دعنا نحاول فهم ما يحدث.
لبدء هذا الملف المضحك المظهر [slug] .js يبدو مريبًا.
إنها ليست خطأ ، إنها ميزة ويطلق عليها Next.js [ المسارات الديناميكية](https://nextjs.org/docs/routing/dynamic-routes) .
[slug] .js هي معلمة wild-card ستمرر جزءًا من عنوان url إلى مكون صفحتنا.
يمكنك أن ترى في الكود أعلاه أن الدالة getStaticProps تتلقى **معلمات** تحتوي على حقل يسمى **slug** .
هناك وظيفة أخرى خاصة لـ Next.js تسمى **getStaticPaths** تُستخدم لجلب جميع مقالات المدونة بأكملها بجميع اللغات لإنشاء صفحات html بشكل ثابت وتقديمها بسرعة فائقة عبر شبكة CDN.
