M

MLOG

فارسی

بیاموزید چگونه از لی‌اوت‌های Next.js برای ساخت برنامه‌های قدرتمند، مقیاس‌پذیر و جهانی استفاده کنید. با بهترین شیوه‌ها برای کامپوننت‌های UI مشترک آشنا شوید.

لی‌اوت‌های Next.js: تسلط بر الگوهای کامپوننت UI مشترک برای برنامه‌های جهانی

Next.js به یکی از سنگ بناهای توسعه وب مدرن تبدیل شده است که به دلیل توانایی‌اش در ساده‌سازی ساخت برنامه‌های کاربردی با عملکرد بالا و کاربرپسند شهرت دارد. محور این قابلیت، مدیریت مؤثر کامپوننت‌های UI است و در قلب آن، قدرت لی‌اوت‌های Next.js نهفته است. این راهنمای جامع به عمق پیچیدگی‌های بهره‌برداری از لی‌اوت‌های Next.js برای ساخت برنامه‌های قدرتمند، مقیاس‌پذیر و آگاه از مسائل جهانی می‌پردازد. ما بهترین شیوه‌ها را برای ایجاد کامپوننت‌های UI مشترک که قابلیت استفاده مجدد از کد، نگهداری‌پذیری و تجربه کاربری یکپارچه را برای کاربران در سراسر جهان ترویج می‌دهند، بررسی خواهیم کرد.

درک اهمیت لی‌اوت‌ها در Next.js

در حوزه توسعه وب، به‌ویژه با فریمورک‌هایی مانند Next.js، لی‌اوت‌ها به عنوان پایه‌های معماری عمل می‌کنند که رابط کاربری برنامه شما بر اساس آن ساخته می‌شود. آن‌ها طرح کلی برای عناصر UI سازگار و قابل استفاده مجدد هستند که تجربه کلی کاربر را شکل می‌دهند. فکر کردن به لی‌اوت‌ها در یک طراحی برنامه خوش‌ساختار به توسعه‌دهندگان این امکان را می‌دهد که از تکرار کد جلوگیری کرده و نگهداری را ساده‌تر کنند. در اصل، آن‌ها چارچوبی را برای موارد زیر فراهم می‌کنند:

مفاهیم کلیدی و مزایای لی‌اوت‌های Next.js

۱. فایل‌های `_app.js` و `_document.js`

در Next.js، دو فایل ویژه نقش حیاتی در تعریف لی‌اوت‌ها و پیکربندی‌های سراسری ایفا می‌کنند: `_app.js` و `_document.js`. درک هدف آن‌ها اساسی است.

۲. مزایای استفاده از لی‌اوت‌ها

استفاده از لی‌اوت‌ها مزایای بی‌شماری را ارائه می‌دهد، به ویژه هنگام ساخت برنامه‌های وب بزرگ و پیچیده:

پیاده‌سازی الگوهای کامپوننت UI مشترک

۱. ایجاد یک کامپوننت لی‌اوت پایه

بیایید یک کامپوننت لی‌اوت ساده ایجاد کنیم. این کامپوننت شامل یک هدر، ناحیه محتوای اصلی و یک فوتر خواهد بود. این کامپوننت برای استفاده مشترک در چندین صفحه طراحی شده است.

// components/Layout.js
import Head from 'next/head';

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | My App</title>
        <meta name="description" content="My Next.js App" />
      </Head>
      <header>
        <h1>My App Header</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} My App. All rights reserved.</p>
      </footer>
    </>
  );
}

export default Layout;

در این مثال، کامپوننت `Layout` پراپ‌های `children` و `title` را دریافت می‌کند. `children` نمایانگر محتوای صفحه‌ای است که در داخل لی‌اوت رندر می‌شود، در حالی که `title` تگ عنوان صفحه را برای سئو تنظیم می‌کند.

۲. استفاده از کامپوننت لی‌اوت در یک صفحه

حالا، بیایید این لی‌اوت را به یکی از صفحات خود (مثلاً `pages/index.js`) اعمال کنیم.

// pages/index.js
import Layout from '../components/Layout';

function HomePage() {
  return (
    <Layout title="Home">
      <h2>Welcome to the Home Page</h2>
      <p>This is the main content of the home page.</p>
    </Layout>
  );
}

export default HomePage;

در `pages/index.js`، ما کامپوننت `Layout` را وارد کرده و محتوای صفحه را درون آن قرار می‌دهیم. همچنین یک `title` مخصوص صفحه ارائه می‌دهیم. پراپ `children` در کامپوننت `Layout` با محتوای بین تگ‌های `<Layout>` در `index.js` پر خواهد شد.

۳. ویژگی‌های پیشرفته لی‌اوت

ملاحظات جهانی برای برنامه‌های بین‌المللی

هنگام ایجاد لی‌اوت برای مخاطبان جهانی، در نظر گرفتن چندین جنبه بین‌المللی‌سازی و جهانی‌سازی (i18n/g11n) بسیار مهم است. این شیوه‌ها تضمین می‌کنند که برنامه شما برای افراد با پیشینه‌های فرهنگی متنوع، قابل دسترس و کاربرپسند است.

۱. بین‌المللی‌سازی (i18n) و محلی‌سازی (l10n)

۲. پیاده‌سازی i18n در لی‌اوت‌های Next.js

برای پیاده‌سازی i18n در Next.js، می‌توانید از کتابخانه‌های مختلفی مانند `next-i18next` یا `next/router` داخلی برای راه‌حل‌های مبتنی بر مسیریابی استفاده کنید.

در اینجا یک مثال ساده با `next-i18next` با استفاده از فایل `_app.js` آورده شده است. این کار i18n را در سطح برنامه تنظیم می‌کند. اطمینان حاصل کنید که بسته‌های لازم را با استفاده از `npm install i18next react-i18next next-i18next` نصب کرده‌اید. این مثال یکپارچه‌سازی ساده‌شده‌ای را نشان می‌دهد و ممکن است بر اساس نیازهای خاص به تنظیمات بیشتری نیاز داشته باشد.

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // استایل‌های سراسری خود را وارد کنید

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

در این `_app.js`، `appWithTranslation` کانتکست بین‌المللی‌سازی را برای برنامه فراهم می‌کند.

سپس، در لی‌اوت خود، از هوک `useTranslation` ارائه‌شده توسط `react-i18next` استفاده کنید:

// components/Layout.js
import { useTranslation } from 'react-i18next';
import Head from 'next/head';

function Layout({ children, title }) {
  const { t } = useTranslation(); // تابع ترجمه را دریافت کنید

  return (
    <>
      <Head>
        <title>{t('layout.title', { title })}</title>
        <meta name="description" content={t('layout.description')} />
      </Head>
      <header>
        <h1>{t('layout.header')}</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>{t('layout.footer', { year: new Date().getFullYear() })}</p>
      </footer>
    </>
  );
}

export default Layout;

سپس فایل‌های ترجمه خود را خواهید داشت که معمولاً در ساختار `public/locales/[locale]/[namespace].json` ذخیره می‌شوند. به عنوان مثال، `public/locales/fa/common.json` ممکن است شامل موارد زیر باشد:

{
  "layout": {
    "title": "{{title}} | برنامه من",
    "description": "توضیحات برنامه Next.js من",
    "header": "هدر برنامه من",
    "footer": "© {{year}} برنامه من. تمامی حقوق محفوظ است."
  }
}

و `public/locales/fr/common.json` (برای زبان فرانسوی) ممکن است شامل موارد زیر باشد:

{
  "layout": {
    "title": "{{title}} | Mon Application",
    "description": "Description de mon application Next.js",
    "header": "En-tête de mon application",
    "footer": "© {{year}} Mon application. Tous droits réservés."
  }
}

توجه: این مثال یک رویکرد بنیادی برای یکپارچه‌سازی i18n ارائه می‌دهد و به پیکربندی‌های اضافی (مانند تشخیص زبان، تنظیم مسیریابی) نیاز دارد. برای راهنمایی جامع به مستندات `next-i18next` مراجعه کنید.

۳. طراحی واکنش‌گرا و لی‌اوت‌ها

طراحی واکنش‌گرا برای مخاطبان جهانی حیاتی است. لی‌اوت شما باید با اندازه‌های مختلف صفحه و دستگاه‌ها سازگار باشد. از فریمورک‌های CSS مانند Bootstrap، Tailwind CSS یا مدیا کوئری‌های سفارشی برای تضمین تجربه یکپارچه و کاربرپسند در تمام دستگاه‌ها استفاده کنید.

۴. ملاحظات دسترسی‌پذیری

به دستورالعمل‌های دسترسی‌پذیری (WCAG) پایبند باشید تا برنامه شما برای افراد دارای معلولیت قابل استفاده باشد. این شامل موارد زیر است:

۵. قالب‌بندی تاریخ و زمان

مناطق مختلف قراردادهای متفاوتی برای فرمت‌های تاریخ و زمان دارند. اطمینان حاصل کنید که تاریخ‌ها و زمان‌ها بر اساس منطقه کاربر به درستی نمایش داده می‌شوند. کتابخانه‌هایی مانند `date-fns` یا API داخلی `Intl` در جاوا اسکریپت می‌توانند این کار را انجام دهند.

import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { i18n } = useTranslation();
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM d, yyyy', { locale: i18n.language });

  return <p>{formattedDate}</p>;
}

۶. قالب‌بندی ارز

مقادیر پولی را با فرمت صحیح برای هر منطقه نمایش دهید. API `Intl.NumberFormat` برای مدیریت قالب‌بندی ارز بسیار ارزشمند است.

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // از i18n.language برای منطقه استفاده کنید
    style: 'currency',
    currency: 'USD', // یا ارز را به صورت پویا بر اساس ترجیحات کاربر تعیین کنید
  }).format(price);

  return <p>{formattedPrice}</p>
}

۷. زبان‌های راست‌به‌چپ (RTL)

اگر برنامه شما نیاز به پشتیبانی از زبان‌هایی مانند عربی یا عبری (زبان‌های RTL) دارد، لی‌اوت خود را طوری طراحی کنید که این موضوع را در نظر بگیرد. استفاده از ویژگی‌های CSS مانند `direction: rtl;` و تنظیم موقعیت عناصر UI را در نظر بگیرید.

۸. شبکه‌های تحویل محتوا (CDN) و عملکرد

از یک CDN برای ارائه دارایی‌های استاتیک برنامه خود (تصاویر، CSS، جاوا اسکریپت) از سرورهایی که از نظر جغرافیایی به کاربران شما نزدیک‌تر هستند، استفاده کنید. این کار تأخیر را کاهش داده و زمان بارگذاری صفحه را برای کاربران بین‌المللی بهبود می‌بخشد. بهینه‌سازی تصویر داخلی Next.js و یکپارچه‌سازی با CDN می‌تواند به طور قابل توجهی عملکرد را بهبود بخشد.

۹. بهینه‌سازی سئو برای بازارهای جهانی

بهینه‌سازی موتور جستجو (SEO) برای جذب کاربران در سراسر جهان بسیار مهم است. از تکنیک‌های زیر استفاده کنید:

نمونه‌ای از تگ‌های hreflang در `` کامپوننت `Layout` شما:


<Head>
  <title>{t('layout.title', { title })}</title>
  <meta name="description" content={t('layout.description')} />
  <link rel="alternate" href="https://www.example.com/" hreflang="x-default" />  {
  <link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
  <link rel="alternate" href="https://www.example.com/fr/" hreflang="fr" />
  // سایر نسخه‌های زبانی
</Head>

استراتژی‌های پیشرفته لی‌اوت

۱. تفکیک کد (Code Splitting) با لی‌اوت‌ها

Next.js به طور خودکار تفکیک کد را برای بهبود عملکرد انجام می‌دهد، اما شما می‌توانید این رفتار را با استفاده از ایمپورت‌های پویا (dynamic imports) به ویژه در لی‌اوت‌های خود، تنظیم دقیق کنید. با ایمپورت پویای کامپوننت‌های بزرگ‌تر، می‌توانید حجم بسته اولیه جاوا اسکریپت را کاهش دهید که منجر به زمان بارگذاری اولیه سریع‌تر می‌شود.


import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/LargeComponent'));

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- کامپوننت بارگذاری شده به صورت پویا -->
      </main>
      <footer>...</footer>
    </>
  );
}

در این مثال، `LargeComponent` به صورت پویا بارگذاری می‌شود. ایمپورت پویا دانلود این کامپوننت را تا زمانی که واقعاً به آن نیاز باشد به تأخیر می‌اندازد.

۲. لی‌اوت‌ها با رندر سمت سرور (SSR)

قابلیت‌های SSR در Next.js به شما امکان می‌دهد محتوا را در سرور پیش‌رندر کنید، که سئو و زمان بارگذاری اولیه را بهبود می‌بخشد. شما می‌توانید SSR را در لی‌اوت‌های خود برای واکشی داده قبل از تحویل صفحه به کلاینت پیاده‌سازی کنید. این امر به ویژه برای محتوایی که به طور مکرر تغییر می‌کند یا باید توسط موتورهای جستجو ایندکس شود، مهم است.

با استفاده از `getServerSideProps` در داخل یک صفحه، می‌توانید داده‌ها را به لی‌اوت منتقل کنید:


// pages/posts/[id].js
import Layout from '../../components/Layout';

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

function PostPage({ post }) {
  return (
    <Layout title={post.title}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </Layout>
  );
}

export default PostPage;

تابع `getServerSideProps` داده‌های پست را واکشی می‌کند. سپس داده `post` به عنوان پراپ به `Layout` منتقل می‌شود.

۳. لی‌اوت‌ها با تولید سایت استاتیک (SSG)

برای محتوایی که به طور مکرر تغییر نمی‌کند، SSG مزایای عملکردی قابل توجهی را فراهم می‌کند. این روش صفحات را در زمان ساخت پیش‌رندر می‌کند و فایل‌های HTML استاتیک تولید می‌کند که مستقیماً به کاربر ارائه می‌شوند. برای استفاده از SSG، تابع `getStaticProps` را در کامپوننت‌های صفحه خود پیاده‌سازی کنید و داده‌ها می‌توانند به لی‌اوت منتقل شوند.


// pages/about.js
import Layout from '../components/Layout';

export async function getStaticProps() {
  const aboutData = { title: 'About Us', content: 'Some information about our company.' };
  return {
    props: {
      aboutData,
    },
  };
}

function AboutPage({ aboutData }) {
  return (
    <Layout title={aboutData.title}>
      <h2>{aboutData.title}</h2>
      <p>{aboutData.content}</p>
    </Layout>
  );
}

export default AboutPage;

در این مثال SSG، `getStaticProps` داده‌ها را در زمان ساخت واکشی کرده و سپس آن را به `AboutPage` منتقل می‌کند که سپس با استفاده از کامپوننت `Layout` رندر می‌شود.

۴. لی‌اوت‌های تودرتو (Nested Layouts)

برای برنامه‌های پیچیده، ممکن است به لی‌اوت‌های تودرتو نیاز داشته باشید. این به معنای داشتن لی‌اوت در داخل لی‌اوت است. به عنوان مثال، می‌توانید یک لی‌اوت اصلی برنامه داشته باشید و سپس از لی‌اوت‌های مختلف برای بخش‌های خاصی از وب‌سایت خود استفاده کنید. این کار کنترل دقیقی بر رابط کاربری فراهم می‌کند.


// components/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>Main Header</header>
      <main>{children}</main>
      <footer>Main Footer</footer>
    </>
  );
}

export default MainLayout;


// components/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>Section Navigation</aside>
      <div className="section-content">{children}</div>
    </div>
  );
}

export default SectionLayout;


// pages/section/[page].js
import MainLayout from '../../components/MainLayout';
import SectionLayout from '../../components/SectionLayout';

function SectionPage({ page }) {
  return (
    <MainLayout>
      <SectionLayout>
        <h1>Section Page: {page}</h1>
        <p>Content for section page {page}.</p>
      </SectionLayout>
    </MainLayout>
  );
}

export async function getServerSideProps(context) {
  const { page } = context.query;
  return {
    props: {
      page,
    },
  };
}

export default SectionPage;

در این حالت، `SectionPage` توسط هر دو `MainLayout` و `SectionLayout` پوشانده شده است تا ساختار لی‌اوت تودرتو ایجاد شود.

بهترین شیوه‌ها و نکات بهینه‌سازی

۱. ترکیب کامپوننت‌ها (Component Composition)

از ترکیب کامپوننت‌ها استفاده کنید. لی‌اوت‌ها و عناصر UI خود را به کامپوننت‌های کوچک‌تر و قابل استفاده مجدد تقسیم کنید. این کار خوانایی و نگهداری‌پذیری کد را افزایش می‌دهد.

۲. نظارت بر عملکرد

به طور مداوم عملکرد لی‌اوت‌ها و برنامه خود را با استفاده از ابزارهایی مانند Google Lighthouse یا WebPageTest نظارت کنید. این ابزارها می‌توانند به شما در شناسایی گلوگاه‌های عملکردی و زمینه‌های بهینه‌سازی کمک کنند.

۳. استراتژی‌های کشینگ (Caching)

استراتژی‌های کشینگ را برای کاهش بار سرور و بهبود زمان پاسخ‌دهی پیاده‌سازی کنید. کش کردن داده‌هایی که به طور مکرر به آن‌ها دسترسی پیدا می‌شود، استفاده از کش مرورگر برای دارایی‌های استاتیک و پیاده‌سازی یک شبکه تحویل محتوا (CDN) برای کش کردن محتوا نزدیک‌تر به کاربر را در نظر بگیرید.

۴. بارگذاری تنبل (Lazy Loading)

برای تصاویر و سایر کامپوننت‌های غیرحیاتی از بارگذاری تنبل استفاده کنید. این رویکرد بارگذاری منابع را تا زمانی که به آن‌ها نیاز باشد به تأخیر می‌اندازد و زمان بارگذاری اولیه صفحه را کاهش می‌دهد.

۵. اجتناب از رندرهای مجدد بیش از حد

کامپوننت‌های خود را برای جلوگیری از رندرهای مجدد غیرضروری بهینه کنید. از `React.memo`، `useMemo` و `useCallback` برای مموایز کردن کامپوننت‌ها و توابع استفاده کنید. هنگام رندر کردن لیست‌های کامپوننت‌ها، از پراپ `key` به درستی استفاده کنید تا به ری‌اکت در شناسایی کارآمد تغییرات کمک کنید.

۶. تست کردن

تست‌های کاملی را برای کامپوننت‌های لی‌اوت خود، از جمله تست‌های واحد و تست‌های یکپارچه‌سازی، پیاده‌سازی کنید تا اطمینان حاصل شود که آن‌ها مطابق انتظار عمل می‌کنند و رفتار ثابتی را حفظ می‌کنند. لی‌اوت‌ها را در اندازه‌های مختلف صفحه و مناطق مختلف تست کنید.

نتیجه‌گیری

لی‌اوت‌های Next.js ابزارهای قدرتمند و همه‌کاره‌ای برای ساخت برنامه‌های وب استثنایی ارائه می‌دهند. با تسلط بر تکنیک‌های مورد بحث در این راهنما، می‌توانید UIهای خوش‌ساختار، قابل نگهداری و با عملکرد بالا ایجاد کنید. به یاد داشته باشید که بهترین شیوه‌های بین‌المللی‌سازی و جهانی‌سازی را به کار بگیرید تا اطمینان حاصل شود که برنامه شما با مخاطبان جهانی ارتباط برقرار می‌کند. با ترکیب قدرت Next.js با رویکردی متفکرانه به لی‌اوت‌ها، شما به خوبی برای ایجاد تجربیات وب مدرن، مقیاس‌پذیر و قابل دسترس برای همگان مجهز خواهید شد.