Next js چیست؟ دلایل استفاده از فریمورک نکست جی اس

Next js فریمورکی است که با گسترش دادن کتابخانه ریکت جی اس، امکاناتی مثل سرعت بالا، کاربرپسندی، seo و ... را در اختیار کسب و کارهای مختلف قرار داده است.

امروزه با گسترش یافتن کسب و کارهای اینترنتی، یکی از مهمترین نیاز های هر شرکتی، یک وب سایت درجه یک است.

لذا شما میتوانید با یادگیری next.js ، بخش خوبی از پروژه های طراحی وب سایت را پذیرفته و مبلغ قابل توجهی را دریافت کنید.

دلایل استفاده از نکست جی اس چیست؟

1.   لود دیتا به سه صورت مختلف: CSR – SSR – SSG
2.   بهینه سازی تصویر – به کمک تبدیل عکس به WebP و همچنین مدیریت اندازه عکسی که از سرور لود می شود
3.   کدنویسی ساده تر نسبت به Reactjs
4.   پشتیبانی از CSS خام، CSS in Js، Tailwind css، Bootstrap و Scss
5.   پشتبانی از جاوااسکریپت و تایپ اسکریپت
6.   صفحه بندی سایت بر مبنای نام پوشه های پروژه
7.   فول استک بودن و پشتیبانی از بک اند در کنار فرانت اند( پوشه API )
8.   سرعت بسیار بالا
9.   پشتیبانی از تمامی موارد سئویی مورد نیاز سایت
10. ویژگی Hot Reloading

چه سایت هایی امروزه از Next.js استفاده می کنند

در بین سایت های خارجی می توان به TikTok ،Twitch  و  Binance اشاره کرد. همچنین بین سایت های ایرانی هم میتوان به دیجی کالا، ژاکت و فرادرس اشاره کرد.
در واقع، ویژگی هایی که بالاتر بیان شد، باعث شده است که برترین کسب و کارها، به فکر اتقال وب سایت خود به next.js باشند.
در نتیجه بهتر است که هر چه سریعتر آموزش next js را شروع کنید. با کلیک روی لینک، میتوانید وارد دوره رایگان نکست جی اس شوید و نکست را در کنار تیلویند یاد بگیرید...

مرن استک چیست؟

مرن یا MERN کلمه ای است متشکل از 4 کلمه دیگر. مونگو دی بی ـ اکسپرس جی اس ـ ریکت جی اس و نود جی اس
در واقع به کسی که به کمک این چهار مورد، وب سایت طراحی می کند، مرن استک گفته می شود.
ما امروزه برای طراحی وب سایت، از همین سیستم استفاده می کنیم. یعنی فرانت اند پروژه های ما، Next.js ( فریمورکی که بر مبنای reactjs نوشته شده است) در کنار ابزار استایل دهی تیلویند سی اس اس است.
بک اند پروژه های ما هم به کمک بک اند nextjs ( که برمبنای Express js و nodejs طراحی شده) کدنویسی می شود.
دیتابیس ما هم mongo db است.
یعنی در واقع امروزه بهترین کیفیت را، شما میتوانید با پروژه های مرن استک داشته باشید. یا بهتر است بگوییم مرن استک پیشرفته یعنی
Next js – Tailwind css – Mongo db

نصب، راه اندازی و پیکربندی Next.js

ایجاد یک پروژه next.js بسیار ساده است.
فقط کافیست که در یکی از پوشه های کامپیوتر، cmd را باز کنید. سپس دستور npx create-next-app@latest را نوشته و انتر بزنید.


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

پیش نیاز های آموزش Next js

برای یادگیری نکست جی اس، لطفا طبق دوره ای که بالاتر معرفی شد عمل کنید. اما به صورت کلی، به عنوان پیش نیاز برای یادگیری نکست جی اس، میتوان گفت که باید jаvascript و ریکت جی اس را بلد باشید.
در واقع در ریکت جی اس، شما باید مفهوم کامپوننت محور بود سایت و SPA ها، نحوه تعریف کردن تابع در یک سایت ریکتی، فانکشنال کامپوننت ها و همچنین هوک های useState، useEffect و useRef را بلد باشید.
پس از یادگیری این موارد، میتوانید خیلی ساده نکست جی اس را شروع کنید. در مورد بک اند نکست جی اس هم میتوان گفت که بک اند نکست جی اس، بر مبنای Express نوشته شده است. شما میتوانید با آموزش Node js خلاصه ، بک اند نکست را به صورت مقدماتی یاد بگیرید و سپس خود پوشه api نکست جی اس را شروع کنید.

بررسی مفهوم سرور کامپوننت ها و کلاینت کامپوننت ها در Next js 14

در next js محتویات صفحه سایت، یه دو بخش تقسیم می شود. بخش اول محتوایی است که سمت سرور ساخته می شود و سپس به فرانت اند فرستاده می شود. بخش دوم محتوایی است که در سمت مرورگر کاربر پردازش شده و در محتوای صفحه قرار می گیرد.
لطفا دقت داشته باشید. این موضوع با CSR و SSR تفاوت دارد.
سی اس آر و اس اس آر، به معنی فراخوانی دیتا از دیتابیس و سرور است اما مبحث سرور کامپوننت و کلاینت کامپوننت مربوط به محل پردازش و ساخته شدن صفحه است.
در Next js 12 پروژه نکست جی اسی به صورتی بود که کل محتوای صفحات، در سرور رندر میشد. همین موضوع باعث می شد که تعداد فایلهای جاوااسکریپتی که برای لود صفحه نیاز میشد، بسیار زیاد بود. در نتیجه در نسخه 13 و 14 نکست جی اس، با معرفی Server Component ها و Client Component ها تا حدی حل شده است. یعنی چون بخشی از محتوا، در سمت کلاینت (مرورگر کاربر) ساخته و پرداخته می‌شود، در نتیجه تعداد فایل جاوااسکریپتی ای که برای ساخت صفحه در سرور، نیاز است کاهش می‌یابد در نتیجه سرعت لود اولیه سایت افزایش پیدا می‌کند.

نحوه تعریف سرور کامپوننت و کلاینت کامپوننت

صفحات و کامپوننت ها در یک پروژه next.js ای، به صورت پیشفرض سرور کامپوننت محسوب می شوند و نیازی به انجام کار خاصی ندارند.
برای تعریف یک کلاینت کامپوننت، تنها کاری که باید انجام بدهیم، این است که ابتدای فایل عبارت use client را اضافه کنیم.
حال برای چه مواردی باید از سرور کامپوننت ها و برای چه موارد از کلاینت کامپوننت ها استفاده کنیم؟
Next.js شما را ملزم کرده است که وقتی میخواهید برای یک دکمه، onclick تعریف کنید یا اینکه از هوک ها مثل یوز استیت استفاده کنید؛ باید از یک کلاینت کامپوننت استفاده کنید.
برای باقی موارد، مجاز هستید که از سرور کامپوننت ها استفاده کنید.

معرفی پوشه API از Next js

یکی از مهمترین برتری های نکست جی اس نسبت به ریکت جی اس، طراحی بک اند و فرانت اند پروژه در کنار هم در یک پروژه است.
زیرمجموعه پوشه app پروژه Next js، شما میتوانید پوشه ای به نام api ایجاد بکنید. ساختار و نحوه کدنویسی در این فایل را در تصویر زیر میتوانید ببینید.


همانطور که میبینید، ما در این تصویر یک درخواست گت داریم. پاسخ هم به کمک NextResponse به فرانت اند فرستاده می شود.
برای دسترسی به این api میتوانید از example.com/api/post/posts استفاده کنید. یعنی اگر این آدرس را در مرورگر بزنید، عبارت { posts1: "post 1 data" } را به عنوان خروجی به شما نمایش خواهد داد.

جمع بندی

در یک مقاله امکان توضیح کامل نکست جی اس نیست. شما می توانید برای یادگیری جدیدترین نسخه Next js، همین حالا شروع کنید و به صورت کاملا رایگان و تخصصی، این فریمورک را یاد بگیرید. فقط کافیست که آموزش next js مرن فا را در گوگل سرچ کنید و وارد نتیجه اول گوگل شوید تا در یک دوره ویدئویی، این فریمورک را یاد بگیرید. منتظرتان هستیم...