logoNext.js العربية
التوثيقالمدونةالتعلم

تحسين التنسيق

حتى الآن، قمنا فقط بإضافة الحد الأدنى من كود React و CSS لتوضيح مفاهيم مثل وحدات CSS. قبل أن ننتقل إلى الدرس التالي حول جلب البيانات، دعونا نحسن تنسيق صفحتنا والكود الخاص بها.

تحديث components/layout.module.css

أولاً، افتح components/layout.module.css واستبدل محتواه بأنماط أكثر تحسينًا للتنسيق وصورة الملف الشخصي:

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}
 
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.backToHome {
  margin: 3rem 0 0;
}

إنشاء styles/utils.module.css

ثانيًا، لنقم بإنشاء مجموعة من فئات CSS المساعدة (لأنماط النص) التي يمكن إعادة استخدامها عبر مكونات متعددة.

أضف ملف CSS جديدًا باسم styles/utils.module.css بالمحتوى التالي:

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}
 
.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}
 
.borderCircle {
  border-radius: 9999px;
}
 
.colorInherit {
  color: inherit;
}
 
.padding1px {
  padding-top: 1px;
}
 
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.listItem {
  margin: 0 0 1.25rem;
}
 
.lightText {
  color: #666;
}

يمكنك إعادة استخدام هذه الفئات المساعدة في تطبيقك بالكامل، وقد تستخدم حتى فئات مساعدة في ملف global.css. تشير الفئات المساعدة إلى نهج كتابة محددات CSS بدلاً من طريقة (مثل الأنماط العامة، وحدات CSS، Sass، إلخ). تعلم المزيد حول CSS بالأسلوب المساعد أولاً.

تحديث components/layout.js

ثالثًا، افتح components/layout.js واستبدل محتواه بالكود التالي، مع تغيير Your Name إلى اسم حقيقي:

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
 
const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';
 
export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/" className={utilStyles.colorInherit}>
                {name}
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">← Back to home</Link>
        </div>
      )}
    </div>
  );
}

إليك ما هو جديد:

  • علامات meta (مثل og:image)، والتي تستخدم لوصف محتوى الصفحة
  • خاصية home المنطقية التي ستضبط حجم العنوان والصورة
  • رابط "العودة إلى الصفحة الرئيسية" في الأسفل إذا كانت home هي false
  • إضافة صور باستخدام next/image، والتي يتم تحميلها مسبقًا باستخدام السمة priority

تحديث pages/index.js

أخيرًا، لنقم بتحديث الصفحة الرئيسية.

افتح pages/index.js واستبدل محتواه بما يلي:

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
 
export default function Home() {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[Your Self Introduction]</p>
        <p>
          (هذا موقع نموذجي - ستقوم ببناء موقع مثل هذا في{' '}
          <a href="https://nextjs.org/learn">برنامجنا التعليمي لـ Next.js</a>.)
        </p>
      </section>
    </Layout>
  );
}

ثم استبدل [Your Self Introduction] بمقدمة عن نفسك. إليك مثال بملف تعريف المؤلف:

مثال

هذا كل شيء! لدينا الآن كود التنسيق المحسن ونحن مستعدون للانتقال إلى دروس جلب البيانات.

قبل أن ننهي هذا الدرس، دعونا نتحدث عن بعض التقنيات المفيدة المتعلقة بدعم CSS في Next.js في الصفحة التالية.

الأنماط العامة (Global Styles)

Previous Page

نصائح حول التنسيق

Next Page