Next.js کا ابتدائی رہنما: جدید ویب ایپلیکیشنز کی تعمیر کا بہترین انتخاب

تعارف

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

Next.js کیا ہے؟

Next.js ایک React کا فریم ورک ہے، جو ڈویلپرز کو جلدی سے پروڈکشن کے لیے تیار ایپلیکیشنز بنانے میں مدد کرتا ہے۔ یہ کئی طاقتور خصوصیات فراہم کرتا ہے، جیسے:

سرور سائیڈ رینڈرنگ (SSR) اور سٹیٹک جنریشن (SSG): سرور پر صفحات کو پہلے سے رینڈر کرنے کی حمایت کرتا ہے، لوڈنگ کی رفتار اور SEO کی کارکردگی کو بڑھاتا ہے۔
روٹنگ: بلٹ ان فائل سسٹم روٹنگ، صفحات اور API روٹنگ کے انتظام کو آسان بناتا ہے۔
API روٹنگ: ایک ہی پروجیکٹ میں آسانی سے API بنانا، اضافی سرور کی ضرورت کے بغیر۔
کارکردگی کی اصلاح: خودکار کوڈ تقسیم، ابتدائی لوڈنگ کے وقت کو کم کرتا ہے۔

Next.js انسٹال کرنا

Next.js انسٹال کرنا بہت آسان ہے، بس یہ یقینی بنائیں کہ آپ کے ترقیاتی ماحول میں Node.js انسٹال ہے۔ آپ درج ذیل کمانڈ کے ذریعے جلدی سے ایک نیا پروجیکٹ بنا سکتے ہیں:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

اوپر دی گئی کمانڈ چلانے کے بعد، آپ کو http://localhost:3000 پر ایک نیا Next.js ایپلیکیشن شروع ہوتا ہوا نظر آئے گا۔

پروجیکٹ کا ڈھانچہ

Next.js ایپلیکیشن بنانے کے بعد، آپ کو ایک ڈیفالٹ ڈائریکٹری کا ڈھانچہ نظر آئے گا:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

pages/: صفحات کے لیے ڈائریکٹری، ہر .js فائل خود بخود ایک روٹ کے مطابق ہوگی۔
public/: سٹیٹک فائلوں کی ڈائریکٹری، اس ڈائریکٹری میں رکھی گئی کوئی بھی فائل براہ راست رسائی حاصل کر سکتی ہے۔
styles/: CSS فائلوں کے لیے ڈائریکٹری، جو عالمی یا مخصوص کمپوننٹس کے اسٹائل کے لیے استعمال کی جا سکتی ہے۔

صفحات اور روٹنگ بنانا

Next.js کے صفحات فائل سسٹم کی بنیاد پر روٹنگ کے انتظام کے لیے ہیں۔ pages/ ڈائریکٹری میں ایک فائل بنائیں، جیسے about.js، مواد درج ذیل ہے:

export default function About() {
  return 

# ہمارے بارے میں

;
}

یہ خود بخود ایک /about روٹ بنائے گا تاکہ اس صفحے تک رسائی حاصل کی جا سکے۔

سٹیٹک جنریشن اور سرور سائیڈ رینڈرنگ

Next.js ڈیٹا حاصل کرنے کی حکمت عملی کے مطابق سٹیٹک جنریشن (Static Generation) اور سرور سائیڈ رینڈرنگ (Server-side Rendering) کی حمایت کرتا ہے۔ آئیے دیکھتے ہیں کہ یہ کیسے کیا جاتا ہے:

سٹیٹک جنریشن (Static Generation)

پروجیکٹ کی تعمیر کے دوران، اگر آپ مواد کو پہلے سے تیار کرنا چاہتے ہیں، تو آپ getStaticProps استعمال کر سکتے ہیں۔ مثال کے طور پر:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

export default function Page({ data }) {
  return {data.title};
}

سرور سائیڈ رینڈرنگ (Server-side Rendering)

اگر آپ ہر درخواست پر ڈیٹا حاصل کرنا چاہتے ہیں تو آپ getServerSideProps استعمال کر سکتے ہیں:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

CSS اور اسٹائل شامل کرنا

Next.js CSS اسٹائل شامل کرنے کے کئی طریقے فراہم کرتا ہے، سب سے آسان طریقہ یہ ہے کہ styles/ ڈائریکٹری میں CSS فائل بنائیں، اور ضرورت کے مطابق صفحات میں شامل کریں:

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

export default function Home() {
  return 

# Next.js میں خوش آمدید!

;
}

اس کے علاوہ، آپ CSS-in-JS لائبریریوں جیسے styled-components یا Emotion کا استعمال بھی کر سکتے ہیں، تاکہ اسٹائلز کو ہینڈل کیا جا سکے۔

API روٹنگ

آپ pages/api/ ڈائریکٹری میں API روٹنگ بنا سکتے ہیں۔ مثال کے طور پر، ایک hello.js فائل بنائیں:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

API روٹنگ درخواستوں اور جوابات کو ہینڈل کر سکتی ہے، فرنٹ اینڈ کو متحرک ڈیٹا پروسیسنگ کی صلاحیت فراہم کرتی ہے۔

Next.js ایپلیکیشن کی تعیناتی

تعیناتی کا سب سے آسان طریقہ Vercel کا استعمال کرنا ہے، جو Next.js کی ترقیاتی ٹیم کی طرف سے بنایا گیا مفت ہوسٹنگ پلیٹ فارم ہے۔ بس کوڈ کو GitHub پر دھکیلیں، پھر Vercel کے ذریعے GitHub اکاؤنٹ کو منسلک کریں، اور خود بخود تعمیر اور تعینات کریں۔

خلاصہ

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

اگر آپ کے پاس کوئی سوالات ہیں یا مزید سیکھنے کے وسائل کی ضرورت ہے، تو براہ کرم Next.js کی سرکاری دستاویزات کا حوالہ دیں۔