Next.js بنیادی باتیں: صفحات بنانا اور بنیادی Routing وضاحت

ویب ایپلیکیشن کی ترقی کے عمل میں، صفحات کا نظم و نسق اور ان کے درمیان نیویگیٹ کرنا ایک اہم پہلو ہے۔ اس مضمون کی سیریز میں، ہم صفحات بنانے اور نیویگیشن کو لاگو کرنے کے بنیادی اصولوں کا جائزہ لیں گے Next.js ۔ یہ بنیادی تصورات لچکدار اور قابل انتظام ویب ایپلیکیشنز بنانے کے لیے ضروری ہیں۔

پہلا صفحہ بنانا اور ڈسپلے کرنا

سب سے پہلے، آئیے سمجھتے ہیں کہ میں ایک سادہ صفحہ کیسے بنایا اور ڈسپلے کیا جائے Next.js ۔ pages آپ اپنے پروجیکٹ کی ڈائرکٹری میں فائلیں بنا کر صفحات بنا سکتے ہیں ۔ مثال کے طور پر، خوش آمدید صفحہ بنانے کے لیے، آپ ڈائریکٹری welcome.js کے اندر نام کی فائل بنا سکتے ہیں ۔ pages

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

مندرجہ بالا کوڈ کے ٹکڑوں میں، ہم نے ایک سادہ استقبالیہ صفحہ بنایا ہے۔ جب آپ اپنے ویب براؤزر میں راستے تک رسائی حاصل کرتے ہیں ، تو آپ کو "خوش آمدید !" /welcome پیغام نظر آئے گا۔ Next.js دکھایا گیا

بنیادی Routing

Next.js ایک مضبوط اور بدیہی routing نظام پیش کرتا ہے جو صفحات کے درمیان نیویگیٹ کرنا آسان بناتا ہے۔ Routing in ڈائرکٹری Next.js پر مبنی ہے pages ، اس ڈائرکٹری میں ہر فائل کے ساتھ ایک مخصوص پاتھ کے مطابق ہے۔ مثال کے طور پر، ڈائرکٹری about.js کے اندر نام کی ایک فائل راستے pages پر قابل رسائی صفحہ بنائے گی /about ۔

لنکس اور نیویگیشن بنانا

صفحات کے درمیان روابط بنانے اور ان کے درمیان نیویگیٹ کرنے کے لیے، ہم لائبریری <Link> سے اجزاء استعمال کر سکتے ہیں۔ next/link ذیل میں استقبالیہ صفحہ سے ہمارے بارے میں صفحہ تک ایک لنک بنانے کی ایک مثال ہے۔

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

اوپر کی مثال میں، جب آپ "ہمارے بارے میں مزید جانیں" کے لنک پر کلک کریں گے، تو آپ کو صفحہ پر بھیج دیا جائے گا /about ۔

نتیجہ

اس سیکشن میں، ہم نے دریافت کیا ہے کہ ڈائرکٹری اور اجزاء کا استعمال کرتے ہوئے صفحات کے درمیان نیویگیشن کو کیسے لاگو کیا جائے Next.js اور سادہ صفحات کیسے بنائے اور ڈسپلے کریں۔ یہ ایپلیکیشن بنانے کے اہم ابتدائی اقدامات ہیں ۔ آنے والے مضامین میں، ہم متحرک اور انٹرایکٹو ویب ایپلیکیشنز بنانے کے لیے دیگر پہلوؤں کو تلاش کرنا جاری رکھیں گے۔ pages <Link> Next.js Next.js