وانەی دووەم: دروستکردن و بەستنەوەی چەندین لاپەڕە

پێشەکی

لە بەرنامە مۆدێرنەکاندا، زۆرجار پێویستە بەستەر لە نێوان لاپەڕە جیاوازەکانی ناو بەرنامەکەدا دابین بکەیت. لەم وانەیەدا فێر دەبین کە چۆن دەتوانین چەندین لاپەڕە لە پرۆژەیەکی Next.js دروست بکەین و چۆن بە بەکارهێنانی پێکهاتەی Link بەستنەوەیان بکەین.

1. دروستکردنی لاپەڕەی نوێ

لە Next.js دا، هەر فایلێک لە فۆڵدەری pages/ نوێنەرایەتی لاپەڕەیەکی جیاواز دەکات. با دوو لاپەڕەی نوێ دروست بکەین:

لاپەڕەی "دەربارە"

• فۆڵدەری pages/ لە پرۆژەکەت کرێکەوە.
• فایلێک دروست بکە بە ناوی about.js .
• ئەم کۆدەی خوارەوە لەناو فایلەکەدا زیاد بکە:

export default function About() {
return (
<div>
<h1>ئێمە کێین؟</h1>
<p>ئەمە لاپەڕەیەکە دەربارەی سایتەکە.</p>
</div>
);
}

لاپەڕەی "پەیوەندی"

• لەناو فۆڵدەری pages/ ، فایلێکی تر بە ناوی contact.js دروست بکە.
• ئەم کۆدەی خوارەوە لەناو فایلەکەدا زیاد بکە:

export default function Contact() {
return (
<div>
<h1>پەیوەندیمان پێوە بکەن</h1>
<p>دەتوانن لە ڕێگەی ئیمەیڵ یان تەلەفۆنەوە پەیوەندیمان پێوە بکەن.</p>
</div>
);
}

2. بەکارهێنانی پێکهاتەی Link بۆ گەشتکردن لە نێوان لاپەڕەکان

بۆ گەشتکردن لە نێوان لاپەڕەکان لە Next.js ، ئێمە پێکهاتەی Link لە کتێبخانەی next/link بەکاردەهێنین. ئەم پێکهاتەیە ڕێگەیەکی کارا بۆ گەشتکردن بەبێ دووبارە بارکردنەوەی تەواوی لاپەڕەکە دابین دەکات، ئەمەش وا دەکات بەرنامەکە خێراتر و کاراتر بێت.

دەستکاریکردنی لاپەڕەی سەرەکی (index.js )

• فایلی pages/index.js کرێکەوە و ئەم گۆڕانکاریانەی خوارەوە بکە:

import Link from 'next/link';


export default function Home() {
return (
<div>
<h1>سوپاس بۆ ئەوەی بەشداریت بۆ ماڵپەڕەکەمان!</h1>
<p>لاپەڕەیەک هەڵبژێرە:</p>
<nav>
<ul>
<li>
<Link href="/about">
<a>دەربارەی سایتەکە</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>پەیوەندیمان پێوە بکەن</a>
</Link>
</li>
</ul>
</nav>
</div>
);
}

ڕوونکردنەوەی کۆد:

• ئێمە پێکهاتەی Link لە next/link هاوردە کرد.
• ئێمە توخمە <Link> بەکارهێنا بۆ بەستنەوەی لاپەڕەکان.
• لەناو <Link> دا، ئێمە تایبەتمەندی href بەکارهێنا بۆ دیاریکردنی ئەو ڕێگایەی کە دەمانەوێت بچینە سەری.
• ئێمە توخمە <a> لە ناو <Link> بەکارهێنا بۆ پیشاندانی دەقی کلیککراو.

3. ئەزموونی بەڕێوەبردنی پرۆژە و جوڵە

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

npm run dev

• وێبگەڕەکەت کرێکەوە و ڕۆ بۆ http://localhost:3000 .
• تێبینی ئەوە دەکەیت کە ئێستا لینکی لاپەڕەکانی دەربارەی و پەیوەندی هەیە.
• کاتێک کلیک لەسەر هەریەکێکیان دەکەیت، دەبرێتە سەر لاپەڕەی دڵخواز بەبێ ئەوەی پێویست بکات تەواوی لاپەڕەکە باربکەیتەوە.

4. پشتگیری ڕێڕەوی داینامیکی

هەروەها Next.js پشتگیری لە Dynamic Routes دەکات، واتە دەتوانیت لاپەڕەیەک دروست بکەیت کە پشت بە داتا داینامیکیەکان ببەستێت. با نموونەیەکی سادە وەربگرین:

لاپەڕەیەکی داینامیکی دروست بکە

• فۆڵدەری pages/ کرێکەوە.
• فۆڵدەرێک دروست بکە بە ناوی products/ .
• لەناو فۆڵدەری products/ دا، فایلێک دروست بکە بە ناوی [id].js .

تێبینی: ناوی فایلی [id].js ئاماژەیە بۆ ئەوەی کە ئەم لاپەڕەیە داینامیکە و بەهای id وەک بەشێک لە ڕێڕەوەکە وەردەگرێت.

کۆدەکە زیاد بکە بۆ [id].js :

export default function Product({ id }) {
return (
<div>
<h1>وردەکارییەکانی بەرهەم</h1>
<p>IDی بەرهەم: {id}</p>
</div>
);
}


export async function getServerSideProps(context) {
const { id } = context.params; // ID لە ڕێڕەوەوە وەربگرە
return {
props: {
id, // ID تێپەڕاندن بۆ پێکهاتە
},
};
}

بەستەرێک بۆ لاپەڕەی داینامیکی زیاد بکە

• فایلی index.js دەستکاری بکە بۆ زیادکردنی بەستەرێک بۆ بەرهەمەکان:

import Link from 'next/link';


export default function Home() {
return (
<div>
<h1>سوپاس بۆ ئەوەی بەشداریت بۆ ماڵپەڕەکەمان!</h1>
<p>لاپەڕەیەک هەڵبژێرە:</p>
<nav>
<ul>
<li>
<Link href="/about">
<a>دەربارەی سایتەکە</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>پەیوەندیمان پێوە بکەن</a>
</Link>
</li>
<li>
<Link href="/products/123">
<a>بەرهەمی ژمارە 123</a>
</Link>
</li>
</ul>
</nav>
</div>
);
}

5. تاقیکردنەوەی ڕێڕەوی داینامیکی

• وێبگەڕەکەت کرێکەوە و ڕۆ بۆ http://localhost:3000/products/123 .
• لاپەڕەیەکت پیشان دەدرێت کە وردەکارییەکانی بەرهەمەکە پیشان دەدات بە پشتبەستن بە ID .

کۆتایی وانەی دووەم

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

• دروستکردنی چەندین لاپەڕە لە Next.js .
• بەکارهێنانی پێکهاتەی Link بۆ گەشتکردن لە نێوان لاپەڕەکان.
• ڕێڕەوی داینامیکی دروست بکە بە بەکارهێنانی فایلەکانی وەک [id].js .

لە وانەی داهاتوودا باس لە بەڕێوەبردنی ستایلەکان دەکەین لە Next.js و چۆنیەتی زیادکردنی CSS و لایەنەکانی ستایل بۆ ئەپەکەت.

تا دوایی لە وانەی سێهەم! 🚀