- خپره شوې پر
د سکیلینګ لپاره د Next.js 3 معماري ماډلونه
- لیکوالان
- نوم
- Imamuzzaki Abu Salam
- https://x.com/ImBIOS_Dev
د سکیل وړ ویب ایپسونو جوړولو لپاره د Next.js غوره بويلر پلیټونه
Next.js یو React فریمورک دی چې تاسو ته اجازه درکوي چې د سرور لخوا رینډر شوي React ایپسونو جوړ کړئ. دا د ویب ایپسونو جوړولو لپاره یو ښه وسیله ده، مګر دا ستونزمن کیدی شي چې ستاسو ایپ د لوی کیدو سره سره سکیل وکړئ. په دې مقاله کې، موږ به د سکیل وړ ویب ایپسونو جوړولو لپاره د ځینو غوره Next.js بويلر پلیټونو په اړه خبرې وکړو.
د Next.js ډولرانو ټولنه ډیری بويلر پلیټونه جوړ کړي چې تاسو یې د خپل پروژې پیل لپاره کارولی شئ. دا بويلر پلیټونه د سکیل وړ ویب ایپسونو جوړولو لپاره ښه دي. دوی د پراختیا او ساتنې لپاره هم اسانه دي. په دې مقاله کې، موږ به د سکیل وړ ویب ایپسونو جوړولو لپاره د ځینو غوره Next.js بويلر پلیټونو په اړه خبرې وکړو.
ولې موږ ته بويلر پلیټ ته اړتیا لرو؟
بويلر پلیټ یوه ټیمپلیټ ده چې تاسو یې د نوي پروژې پیل لپاره کارولی شئ. دا د پروژې پیل کولو لپاره ټول اړین فایلونه او فولډرونه لري. دا د نوي پروژې پیل کولو پر مهال د وخت او هڅې خوندي کولو لپاره یو ښه لاره ده.
د بويلر پلیټ په کارولو سره، تاسو کولی شئ د خپل ایپ په اصلي بڼو تمرکز وکړئ، پرته لدې چې د پروژې تنظیمولو لپاره وخت مصرف کړئ. دا تاسو ته د ټولنې لخوا کارول شوي غوره طریقو او نمونه تعقیبولو کې هم مرسته کوي.
د سکیل وړ Next.js ایپ څه شی دی؟
یو سکیل وړ ایپ هغه ایپ دی چې کولی شي د کاروونکو او غوښتنو لوی شمیر اداره کړي. دا د ساتنې او پراختیا لپاره هم اسانه دی. د وروسته کد ریفاکتور کولو څخه مخنیوي لپاره، مهمه ده چې د پیل څخه سکیل وړ ایپ جوړ کړئ.
سکیل وړتیا د ویب ایپ جوړولو پر مهال یو ډیر مهم فاکتور دی. د سکیل وړ ایپ جوړولو لپاره د مناسب وسیلو او معماري انتخاب کول مهم دي. موږ باید تل په یاد ولرو چې زموږ ایپ به په راتلونکي کې وده وکړي، نه یوازې هغه کثافات شي چې موږ یې د GitHub ریپوزیتری کې ښخوو.
د سکیل وړ Next.js ایپسونو جوړولو لپاره غوره بويلر پلیټونه
د سکیل وړ Next.js ایپسونو جوړولو لپاره ډیری بويلر پلیټونه شتون لري. دلته ځینې غوره بويلر پلیټونه دي چې تاسو یې د خپل پروژې پیل لپاره کارولی شئ.
alexeagleson لخوا د Next.js بويلر پلیټ
دا بويلر پلیټ د Next.js ایپ جوړولو لپاره یو ښه پیل دی. دا د TypeScript سره جوړ شوی او د Next.js 12 کاروي. دا د سټایل لپاره د Tailwind CSS کاروي هم. دا د سکیل وړ ویب ایپ جوړولو لپاره یو ښه بويلر پلیټ دی.
د ځانګړتیاو برجستې:
Next.js 12 (تاسو کولی شئ په ریپو کې د Next.js 13 ته د ارتقا کې مرسته وکړئ)
TypeScript
انجن قفل کول
ESLint
Prettier
Git Hooks (Husky)
VS Code کانفیګ
VS Code ډیبیګینګ
Storybook
د جزو ټیمپلیټ
د کمیټ لینټینګ
موږ کولی شو د ریپو کلون او لاندې احکامو سره نوی پروژې په اسانۍ سره پیل کړو:
gh repo clone alexeagleson/nextjs-fullstack-app-template
# یا
git clone git@github.com:alexeagleson/nextjs-fullstack-app-template.git
# یا
git clone https://github.com/alexeagleson/nextjs-fullstack-app-template.git
# یا تاسو کولی شئ د degit هم وکاروئ که تاسو غواړئ چې په پیل کې د git پرته ټیمپلیټ وکاروئ
که تاسو د TailwindCSS یا کوم بل سټایل فریمورک ته اړتیا لرئ، نو تاسو اړتیا لرئ چې دا په لاس سره نصب کړئ. مګر، دا د دې پروژې سره پیل کولو لپاره ډیر ښه دی، دا ډیره مرسته لري په ځانګړي توګه کله چې موږ د ټیم سره پیل کوو. دا ډیری ښه تمرینونه لري او ساتل یې اسانه دي. دا د پراختیا او نوي ځانګړتیاوو اضافه کولو لپاره هم اسانه دی. موږ کولی شو د نوې جزو جوړولو لپاره لارښود تعقیب کړو یا د پروسه اتومات کولو لپاره خپل CLI ولیکو.
هر ډول لینټینګ او فارمیټینګ دمخه تنظیم شوي دي. موږ کولی شو د VS Code کانفیګ هم وکاروو چې دا د پروژې سره کار کول اسانه کړي. دا د Storybook کانفیګ هم لري چې موږ یې د خپلو جزو جوړولو لپاره کارولی شئ. دا بويلر پلیټ د commit-msg هوک لري چې موږ یې د خپل کمیټ پیغام لینټ کولو لپاره کارولی شئ. موږ کولی شو په اسانۍ سره د Storybook په کارولو سره خپل جزو مستند کړو.
ریپوزیتری: alexeagleson/nextjs-fullstack-app-template بلاګ: د خپل Next.js پروژې لپاره د سکیل وړ معماري څرنګوالی جوړ کړئ
ipenywis لخوا د Next.js بويلر پلیټ
هغه په خپل د دې بويلر پلیټ تشریح ویډیو کې ویلي دي، دا د جونیئر ډولرانو لپاره اړین د سینئر ری ایکټ پروژې سیټ اپ دی. تاسو کولی شئ د سینئر په څیر په اسانۍ سره معماري جوړ کړئ.
د ویب پراختیا په نن ورځې چټک نړۍ کې، دا اړینه ده چې تاسو د خپل تصرف کې مناسب وسایل او فریمورکونه ولرئ. په هغه ځای کې د Next.js ایپ د Turborepo، Zustand، TailwindCSS او TypeScript سټاک سره راځي - د پرمختللو ټیکنالوژیو یو پیاوړی ترکیب چې کولی شي ستاسو پراختیایی پروسه نرمه، چټکه او ډیر اغیزمنه کړي.
د دې سټاک یو له کلیدي ګټو څخه Next.js دی، چې د سرور لخوا رینډر شوي React ایپسونو جوړولو لپاره یو لوړ رتبه فریمورک دی. دا د اتوماتیک کوډ سپلټینګ، اپټیمایز شوی فعالیت او د خپرونې اسانتیا چمتو کوي، دا د هغو ډولرانو لپاره یو مناسب انتخاب دی چې غواړي د بنسټیز زیربنا په اړه اندیښنې پرته د پیاوړو او سکیل وړ ویب ایپسونو جوړولو باندې تمرکز وکړي.
Turborepo بله وسیله ده چې کولی شي ستاسو د کار جریان په پام کې نیولو سره د مونورپوز پراختیا اپټیمایز کولو سره ستاسو د کار جریان په پام کې نیولو سره ستاسو د کار جریان ښه کړي. دا د ډولرانو ته اجازه ورکوي چې د یوه ریپوزیتری کې د ډیری بسته سره کار وکړي، د وخت او انرژي ډیره خوندي کول او ستاسو د کد بیس اداره کول او ساتل یې اسانه کوي.
Zustand یو لږ وزن لرونکی د حالت مدیریت لايبرري ده چې د React ایپسونو کې د حالت مدیریت لپاره یو ساده او متناسب چلند وړاندې کوي. دا کولی شي ستاسو د کد بیس پاک او منظم ساتلو کې مرسته وکړي پداسې حال کې چې ستاسو د ایپ حالت سره کار کول او تازه کول اسانه کوي.
TailwindCSS یو یوټیلټي لومړی CSS فریمورک دی چې کولی شي تاسو ته په اسانۍ سره د عکس العمل او دودیز کاروونکي انٹرفیس ډیزاین کولو کې مرسته وکړي. د هغې د متناسب یټیلټي ټولګیو او دودیز کولو لچکدار انتخابونو سره، تاسو کولی شئ د حیرانتیا ډیزاینونه جوړ کړئ چې په هر وسیله یا سکرین اندازه کې ښه ښکاري.
په نهایت کې، TypeScript د ژبې سره سټاتیک ټایپینګ اضافه کوي، د ډول خوندي کولو او د ډولرانو تجربو ښه والی چمتو کوي. دا کولی شي په اسانۍ سره د غلطیو نیولو کې مرسته وکړي او ډاډ ترلاسه کړي چې ستاسو د کد بیس پاک او منظم دی.
په عمومي توګه، د Turborepo، Zustand، TailwindCSS او TypeScript سټاک سره د Next.js ایپ د هغو هر ډولرانو لپاره یو پیاوړی او عصري انتخاب دی چې غواړي د پرمختللو ویب ایپسونو جوړولو لپاره وي. پداسې حال کې چې د زده کړې یو څه کچه شتون لري، ګټې د هڅې ارزښت لري، پشمول د چټک پراختیایی وخت، اپټیمایز شوي فعالیت او د کد بیس اسانه ساتنه. نو ولې یې هڅه نه کوئ او خپل ځان ته یې وګورئ؟
یوازې یې هڅه وکړئ، دا واقعیا ښه دی. دا د پراختیا او ساتنې لپاره اسانه دی.
ریپوزیتری: ipenywis/your-react-boilerplate یوټیوب: د جونیئر ډولرانو لپاره اړین د سینئر ری ایکټ پروژې سیټ اپ
T3 لخوا د Next.js بويلر پلیټ
Create T3 App (CT3A) یو سټارټر کټ دی چې د ویب ایپسونو جوړولو لپاره د عصري ټیکنالوژیو ځانګړي سیټ کاروي چې د T3 سټاک جوړوي. د T3 سټاک کې TypeScript، tRPC او TailwindCSS شامل دي. CT3A دا سټاک اخلي او د ویب ایپسونو جوړولو لپاره یو پیاوړی او اسانه کارول وړ پلیټ فارم جوړولو لپاره اضافي ټیکنالوژۍ اضافه کوي.
د CT3A یو له برجستو ځانګړتیاوو څخه د TypeScript کارول دي. د CT3A جوړونکي باور لري چې TypeScript د معمول JavaScript په پرتله ډیر منظم او لږ خفه کونکی تجربه چمتو کوي، په ځانګړي توګه د هغو ډولرانو لپاره چې د ویب پراختیا لپاره نوي دي. د TypeScript سره، ډولران کله چې کوډ لیکي ژوندی عکس ترلاسه کوي، چې دا د غلطیو مخنیوي کې مرسته کوي او په اوږد مهال کې وخت خوندي کوي.
بله کلیدي ټیکنالوژي چې په CT3A کې کارول کیږي Next.js دی، چې د React پراساس ایپسونو جوړولو لپاره یو مشهور ویب فریمورک دی. Next.js د ایپسونو جوړولو لپاره یو کم راي او ډیر اپټیمایز شوی چلند وړاندې کوي، چې دا د ډولرانو لپاره اسانه کوي چې د خپلو ایپسونو جوړولو پر مهال ښه پریکړې وکړي.
CT3A هم د tRPC کاروي، چې د GraphQL لپاره یو بدیل دی چې د ټایپ سیف سرور په وړاندې د بې قید قید کلیینټ پراختیایی تجربه چمتو کوي، پرته لدې چې ټول بويلر پلیټونه ولري. د TypeScript په کارولو سره، tRPC یو حیرانتیا ډولرانو تجربه چمتو کوي چې کارول یې اسانه دي او ډیر اپټیمایز شوي دي.
د دې اصلي ټیکنالوژیو سربیره، CT3A هم ډیری نور ټیکنالوژۍ شامل دي چې په عمومي توګه د ویب پراختیا کې کارول کیږي. دا کې Prisma شامل دي چې د ډیټابیس څخه ایپ ته د پای څخه پای ټایپ سیفتی چمتو کوي او د ډیټابیس سره د ورځني تعامل اسانولو لپاره د وسیلو یوه سیټ وړاندې کوي. CT3A هم د Tailwind CSS کاروي، چې یو یوټیلټي لومړی CSS فریمورک دی چې د ښه ښکاري ایپسونو جوړولو لپاره اسانه کوي پرته لدې چې د ټولګیو نوم ورکولو یا فایلونو تنظیمولو په اړه اندیښنه ولرئ. په نهایت کې، CT3A NextAuth.js شامل دي، چې د خپل ځان د جوړولو ستونزې پرته ستاسو د Next.js ایپ ته د تایید او امنیت راوستلو لپاره یوه حل ده.
په عمومي توګه، Create T3 App د هغو هر چا لپاره یو ښه پیل دی چې غواړي د ویب ایپسونو جوړولو لپاره د پیاوړي او اسانه کارول وړ ټیکنالوژیو سیټ کار وکړي. د TypeScript، Next.js، tRPC، Prisma، Tailwind CSS او NextAuth.js سره، CT3A د عصري ویب ایپسونو جوړولو لپاره یو جامع او ډیر اپټیمایز شوی پلیټ فارم چمتو کوي. که تاسو غواړئ چې د وروستي ټیکنالوژیو او غوره تمرینونو سره ویب ایپسونو جوړ کړئ، CT3A یقینا د تګلارې ارزښت لري.
لېنک: Create T3 App
نتیجه
دا د نن ورځې لپاره ټول دي. هیله ده چې تاسو دې مقالې ګټور ګڼئ. که تاسو کومه پوښتنه یا وړاندیز لرئ، نو مهرباني وکړئ په لاندې تبصرو کې راته خبر راکړئ. د لوستلو لپاره مننه.