سهیل جعفری
سهیل جعفری
خواندن ۳ دقیقه·۱ سال پیش

تمپلیت های آماده برای پروژه های Next js

تمپلیت های آماده نکست جی اس
تمپلیت های آماده نکست جی اس

سلام. امیدوارم حالتون عالی باشه.

من سهیل جعفری هستم و توی این پست نسبتا کوتاه، میخوام در مورد یه سری تمپلیت آماده برای وب سایت های Next js ای صحبت کنم.

ببینید پیشنهاد اول من برای اینکه بهترین سرعت رو در وب سایتهاتون تجربه کنید، پکیج Next js و Tailwind.css هست. واقعا بهترین هستن.

فریمورک Next js به تنهایی خودش سرعت سایت هاتون رو میبره بالا. یعنی اگه شما وب سایت رو با نکست جی اس طراحی کنید، به خاطر مبحث SSR و SSG، همچنین توربوپک، به صورت پیشفرض سرعت وب سایتهاتون بالا هست.

بررسی Tailwind css

اگه برای استایل دهی هم از تیلویند استفاده کنید، هم( مثل CSS خام) نیاز نیست تایم زیادی برای استایل دهی بزارید، هم سنگینی بوت استرپ رو ندارید. علاوه بر اینا، توی نسخه پروداکشن وب اپلیکیشن، کدهای استفاده نشده تیلویند هم حذف میشه. یعنی باز سرعتتون میره بالاتر.

خلاصه best practice، میشه نکست جی اس در کنار تیلویند سی اس اس.

آموزش رایگان اینا هم توی سایت هست: آموزش Next js 13 در کنار Tailwind.css


اما خیلی اوقات هست که ما زمان کافی نداریم تا تک تک کامپوننت های پروژهمون رو بزنیم یا مثلا توی یه شرکتی کار میکنیم و اون شرکت، ما رو مجبور میکنه که از تیلویند استفاده نکنیم.

خلاصه توی این شرایط، همیشه یه سری پکیج و کد آماده به دادمون میرسن. با استفاده از این پکیج ها یا کدهای آماده، شما میتونید بخش خوبی از زمانتون رو ذخیره کنید و پروژه رو راحت تر جلو ببرید.

بررسی کدهای آماده Next js

تمپلیت های آماده سایت Nextjs


تمپلیت آماده از سایت Next js
تمپلیت آماده از سایت Next js


میتونید برید توی این لینک

یه سری کد آماده براتون اینجا گذاشته شده. بعضیاش با Next js 13 و پوشه APP هست. بعضیاش هم با Next.js 12 و پوشه Pages

اما در کل میتونه براتون مفید باشه.

عکسی که بالاتر میبینید رو هم همین الان از یکی از تمپلیت هاش اسکرین شات گرفتم. دموی آنلاین داره و همچنین سورس پروژهش هم، توی گیت هاب هست که لینک داده بهش...

تمپلیت های آماده Tailwind UI

تمپلیت های آماده از سایت Tailwind UI
تمپلیت های آماده از سایت Tailwind UI

میتونید برید توی این لینک

تیلویند یو آی هم یه سری قالب آماده داره. سورس کدهاش هم هست.

البته یه بخشیش رایگان و یه بخشیش هم پولیه اما به صورت کلی مفیده.

تمپلیت های آماده ANT D

تمپلیت آماده نکست جی اسی از سایت انت دیزاین
تمپلیت آماده نکست جی اسی از سایت انت دیزاین

میتونید برید توی این لینک

انت دیزاین هم که معرف حضور همه هست. یکی دیگه از پکیج هایی هست که اگه روی پروژهتون نصبش کنید، خیلی ساده میتونید از کامپوننت های آمادهش استفاده کنید.

تمپلیت های آماده از Next UI

تمپلیت های آماده از نکست یو آی
تمپلیت های آماده از نکست یو آی

میتونید برید توی این لینک

آخرین مورد هم که میخوام بگم، نکست یو آی هست. ایشون هم کلی تمپلیت آماده قابل استفاده در پروژه های next.js ای داره که قطعا کمک کننده هست.


خلاصه موارد زیادی هست. اما من همین چند تا رو دیدم که مفید هستن. گفتم اینجا هم بگم شاید برای شما هم مفید باشه.

در ضمن، در آینده نزدیک، یه دوره در مورد آموزش استفاده از همه‌ی این چند مورد در پروژه های Next js ای، به علاوه چند تا دیگه که از اینا هم بهتر هستن رو توی مرن فا خواهیم داشت. در نتیجه پیشنهاد میکنم که پیگیر صفحه همه دوره های ما هم باشید. زمانی که منتشر شد، اونجا میتونید پیداش کنید.

لینک صفحه همه دوره های آموزش نکست جی اس

و اینکه سوالی هم بود، ممنون میشم پایین همین پست، کامنت کنید. هستیم در خدمتتون

نکست جی اس
مدیر و موسس وب سایت mernfa.ir + آموزش تخصصی طراحی اپلیکیشن با next.js
شاید از این پست‌ها خوشتان بیاید