وانەی سێهەم: بەڕێوەبردنی ئەستایلەکان لە Next.js

پێشەکی

لە بەرنامە مۆدێرنەکاندا، ڕووکارەکە ڕۆڵێکی گرنگی هەیە لە ڕاکێشانی بەکارهێنەران. لەم وانەیەدا، با ئەو شێوازە جیاوازانەی بەکاردهێنین بۆ بەڕێوەبردنی ئەستایلەکان لە Next.js دەربڕین، وەک:

• زیادکردنی فایلە CSS گشتیەکان.
• بەکارهێنانی CSS Modules بۆ ئەستایلی ناوچەیی.
• زیادکردنی کتێبخانەی ئەستایل وەک Tailwind CSS یان Material-UI .

1. زیادکردنی فایلی CSS گشتی

Next.js ڕێگەی پێدەدات کە فایلێکی CSS گشتی بۆ تەواوی ئەپڵیکەیشنەکەت زیاد بکەیت. ئەم فایلە دەتوانێت ئەستایلە بنەڕەتیەکانی هەبێت کە بۆ هەموو لاپەڕەکان بەکاربهێنرێن.

گەشەکان:

1.1 دروستکردنی فایلی CSS گشتی

• فۆڵدەری styles/ لە پرۆژەکەت کرێکەوە.
• فایلێک دروست بکە بە ناوی global.css .

1.2 زیادکردنی ئەستایل بۆ فایلەکە

ئەم ئەستایلە سادە زیاد بکە بۆ global.css :

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}


h1 {
color: #333;
}


a {
text-decoration: none;
color: #007bff;
}


a:hover {
text-decoration: underline;
}

1.3 بەستنی فایل بۆ ئەپڵیکەیشن

بۆ ئەوەی ئەم ئەستایلە بەردەوام بکرێتەوە لەسەر هەموو لاپەڕەکان، پێویستە فایلەکە بەستێتەوە بە مەرجی _app.js .

• فایلی _app.js کە لە فۆڵدەری pages/ دایە کرێکەوە.
• فایلی global.css هاوردە بکە لەناویدا:

import '../styles/global.css';


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


export default MyApp;

2. بەکارهێنانی CSS Modules بۆ ئەستایلی ناوچەیی

CSS Modules ئامرازێکە کە ڕێگەی پێدەدات ئەستایل بۆ هەر مەرجێک بە شێوەیەکی جیاواز بنووسیت، ئەمەش ڕێگەی پێدەدات کە ناوەکانی ئەستایل لە نێوان یەکتر قاطی نەبن.

گەشەکان:

2.1 دروستکردنی فایلی CSS Module

• فایلی about.js کە لە فۆڵدەری pages/ دایە کرێکەوە.
• فایلێکی نوێ دروست بکە بە ناوی about.module.css لە ناوچەی هەمان فایل.

2.2 زیادکردنی ئەستایل بۆ فایلەکە

ئەم ئەستایلە زیاد بکە بۆ about.module.css :

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.title {
font-size: 24px;
color: #444;
}


.description {
font-size: 16px;
color: #666;
}

2.3 هاوردەکردن و بەکارهێنانی ئەستایل

فایلی about.js گۆڕە بۆ بەکارهێنانی ئەستایل:

import styles from './about.module.css';


export default function About() {
return (
<div className={styles.container}>
<h1 className={styles.title}>ئێمە کێین؟</h1>
<p className={styles.description}>
ئەمە لاپەڕەیەکە دەربارەی سایتەکە. خزمەتگوزارییەکانمان بە شێوەیەکی کارپێک و نوێ دەفرۆشین.
</p>
</div>
);
}

3. زیادکردنی کتێبخانەی ئەستایل (نموونە: Tailwind CSS)

Tailwind CSS فرەیموورکێکی ئەستایلە کە فرەی ئەستایلی CSS پێشکەش دەکات کە دەتوانیت بە شێوەیەکی دەرەوە لە HTML بەکاربهێنیت.

گەشەکان:

3.1 سازکردنی Tailwind CSS

لە Terminal ، Tailwind CSS ساز بکە بە بەکارهێنانی کردارەکەی خوارەوە:

npm install tailwindcss postcss autoprefixer

3.2 دروستکردنی فایلە پێکهاتەکانی Tailwind

فایلە پێکهاتەکانی Tailwind دروست بکە بە بەکارهێنانی کردارەکەی خوارەوە:

npx tailwindcss init

3.3 گۆڕانکاری لە فایلی tailwind.config.js

دڵنیابە لەوەی کە فایلی tailwind.config.js ئەم ڕێکخستنەکانی خوارەوەی هەیە:

module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};

3.4 زیادکردنی Tailwind بۆ فایلی CSS

فایلی global.css کرێکەوە و ئەم کۆدە زیاد بکە:

@tailwind base;
@tailwind components;
@tailwind utilities;

3.5 بەکارهێنانی Tailwind لە لاپەڕەدا

فایلی index.js گۆڕە بۆ بەکارهێنانی Tailwind :

import Link from 'next/link';


export default function Home() {
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
<h1 className="text-3xl font-bold text-blue-600">سوپاس بۆ ئەوەی بەشداریت بۆ ماڵپەڕەکەمان!</h1>
<p className="mt-4 text-gray-700">لاپەڕەیەک هەڵبژێرە:</p>
<nav className="mt-4 space-x-4">
<Link href="/about">
<a className="text-blue-500 hover:text-blue-700">دەربارەی سایتەکە</a>
</Link>
<Link href="/contact">
<a className="text-blue-500 hover:text-blue-700">پەیوەندیمان پێوە بکەن</a>
</Link>
</nav>
</div>
);
}

4. تاقیکردنی ئەستایلەکان

دوای ئەوەی گەشەکانی سەرەوە تەواو کرد، پڕۆژەکە ڕاگرن بە بەکارهێنانی:

npm run dev

• وێبگەڕەکەت کرێکەوە و ڕۆ بۆ http://localhost:3000 .
• دەبینیت کە ئەستایلەکان بە سەرکەوتوویی بەردەوام کراون.

5. پێناسەی شێوازە جیاوازانەکان

کۆتایی وانەی سێهەم

لەم وانەیەدا فێربوویت چۆن:

• فایلی CSS گشتی بۆ ئەپڵیکەیشنەکەت زیاد بکەیت.
• CSS Modules بەکاربهێنیت بۆ بەڕێوەبردنی ئەستایلی ناوچەیی.
• کتێبخانەی ئەستایل وەک Tailwind CSS زیاد بکەیت.

لە وانەی داهاتوودا، باس لە بەڕێوەبردنی داتا بە بەکارهێنانی getStaticProps و getServerSideProps دەکەین.

تا دوایی لە وانەی چوارەم! 🚀