Next.js که توسط برخی از بزرگترین شرکتهای جهان استفاده میشود، به شما امکان میدهد با گسترش آخرین ویژگیهای React، و یکپارچهسازی ابزار قدرتمند جاوا اسکریپت ، سریعترین راه برای ساخت وبسایت های فول استک ایجاد کنید. برای آشنایی با این مطلب تا انتهای مقاله آموزش کتابخانه NEXT در REACT با ما همراه باشید…
اگر کسی از شما پرسید که نکست جی اس چیست؟ در پاسخ به او بگویید تمام ابزار ها و راه هایی که وبسایت شما را سریعتر میکند. بله ، همانطور که خواندید، خود ری اکت که یک کتابخانه در جاوا اسکریپت میباشد، دارای یک فریم ورک قوی و کامل به نام نکست جی اس است که میتواند هر دو سمت فرانت اند و بک اند را کاور کند!
این فریم ورک ری اکت را توسعه میدهد و قابلیت های بیشتری در اختیار شما میگذارد. بطور مثال سرعت و عملکرد سایت شما را بطور زیادی افزایش میدهد و از ویژگی های اصلی آن به حساب میآید.
پلتفرم vercel از بنیانگذاران Next.js است که آن را به چارچوبی تبدیل می کند که می توانید به راحتی آن را گسترش دهید.
اما دقیقاً منظور ما از این حرفها چیست؟ بیایید کمی وقت بگذاریم و توضیح دهیم که React و Next.js چه هستند و چگونه می توانند کمک کنند.
هنگام ساخت برنامه های مدرن باید چند نکته را در نظر بگیرید. مانند:
برای هر قسمت از برنامه خود، باید تصمیم بگیرید که آیا خودتان راه حلی ایجاد می کنید یا از ابزارهای دیگری مانند کتابخانه ها و چارچوب ها استفاده می کنید.
بخشی از موفقیت React این است که نسبتاً درباره سایر جنبههای برنامههای کاربردی بینظیر است. این منجر به یک اکوسیستم شکوفا از ابزارها و راه حل های شخص ثالث شده است.
اما نکست جی اس…
Next.js یک چارچوب React است که به شما بلوکهایی برای ایجاد برنامههای وب میدهد. منظور ما از چارچوب، Next.js ابزار و پیکربندی مورد نیاز برای React است و ساختار، ویژگیها و بهینهسازیهای اضافی را برای برنامه شما فراهم میکند.
چه یک توسعه دهنده فردی یا بخشی از یک تیم بزرگتر باشید، می توانید از React و Next.js برای ساخت برنامه های وب کاملا تعاملی، بسیار پویا و کارآمد استفاده کنید.
Server-side Rendering به معنی رندر کردن صفحات (ساخت و نمایش آن ها) در سمت server است. اگر با react کار کرده باشید می دانید که ما در react داده ها را از سرور گرفته و در سمت client (مرورگر کاربر) از آن داده ها برای ساخت و نمایش صفحه استفاده می کنیم. در این حالت صفحه را در سمت کلاینت ساخته و نمایش داده ایم اما server-side rendering مانند زمانی است که از ربان بک اند برای تولید صفحات HTML استفاده می کنید. یعنی صفحات شما در سمت سرور ساخته شده و سپس به صورت آماده به سمت کاربر ارسال می شوند بنابراین کاربر نیازی به انجام پردازش ندارد. به این ساختار به اختصار SSR میگویند.
به همین خاطر سایت های CSR که در سمت کلاینت رندر میشوند میتوانند سرعت کمتری نسبت به سایت های SSR داشته باشند(به دلیل اینکه در مرورگر کاربر تازه سایت ساخته میشود) و همچنین در سئو مشکلات جدی خواهند داشت، زیرا متن ها و کد های سایت از قبل ساخته نشده و موتور های جستجو به آنها دسترسی ندارند!
نکته : یکی از سوالاتی که معمولا زیاد هم در سوالات استخدامی ری اکت پرسیده میشود این است که از نکست برای سئو استفاده میشود؟ باید پاسخ دهید که یکی از موارد آن، سئو است و کسی که فقط قصد سئو دارد ، ده ها راه حل دیگر برای این قضیه موجود است و نباید به سراغ نکست بیاید!
پیشنهاد میکنیم لیست سوالات استخدامی REACT را مشاهده فرمایید.
پیشنهاد سرآشپز سایت 😂
ویژگی دوم و بسیار محبوب کتابخانه نکست ، ناوبری فایل محور یا File-based Routing است. در کتابخانه react به صورت پیش فرض هیچ router ای وجود ندارد که مسیر حرکت کاربر و تغییر URL مرورگر را تحت نظر بگیرد. بجای آن از پکیج هایی مانند react-router استفاده می کنیم. کار چنین پکیج هایی این است که با تغییر URL در مرورگر کاربر، جلوی رفتار پیش فرض مرورگر (ارسال درخواست HTTP) گرفته شود و سپس نمایش محتوای متفاوت در همان صفحه است. بنابراین به نوعی کاربر را گول می زنیم تا تصور کند برنامه ما صفحات مختلفی را دارد. در ضمن در کدزنی هم سختی ها و مشکلاتی دارد!
برای حل این مشکلات Next.js این مسئله را با معرفی سیستم ناوبری یا routing خاص خودش حل می کند! در واقع در پروژه های Next.js یک پوشه به نام pages را داریم که عینا باید با همین نام باشد. حالا درون این پوشه، پوشه ها و فایل های دیگری را خواهید داشت و ساختار این پوشه ها و فایل ها دقیقا سیستم routing وب سایت شما خواهد بود!
چنین سیستمی برای ساخت مسیر دهی چندین مزیت مهم دارد:
کوتاه بگوییم این است که قرار نیست نکست بصورت خودکار کدهای سمت بک اند شما را نوشته و آن را مدیریت کند ، بلکه قرار است سیستم API نویسی شما و همچنین اتصال کد های سمت فرانت و بک را تسهیل کرده و آن را برای برنامه نویس آسانتر کند. ما می توانیم بدون Next.js یک پروژه react داشته باشیم و API را جداگانه بنویسیم. در هر دو حالت نیز باید API را خودمان بنویسیم! اما در پروژه های Next.js علاوه بر مزیت های قبلی این مزیت را نیز داریم که کد سمت سرور (مثلا Node.js) و کد سمت کلاینت (React) در یک پروژه و یکجا قرار دارند بنابراین مدیریت آن بسیار ساده تر خواهد بود.
نکته : شاید از معدود معایب نکست جی اس این باشد که ایشان زبان سمت بک اند خود را نود جی اس انتخاب کرده است و تغییر آن به زبان دیگر مانند ASP , py و… امکان پذیر نیست!
مقدمه بس است! بزن بریم تا شروع به کار کنیم:
فکر میکنم نیازی نیست که به شما بگوییم آخرین ورژن نود را بروی سیستم خود نصب داشته باشید 😊
توصیه می کنیم با استفاده از create-next-app یک برنامه Next.js جدید ایجاد کنید، که همه چیز را به طور خودکار برای شما تنظیم می کند. برای ایجاد یک پروژه، اجرا کنید:(حتما ف*ل*ت*ر*ش*ک*ن را روشن بفرمایید😢)
npx create-next-app@latest
هنگام نصب، اعلان های زیر را مشاهده خواهید کرد:
بر حسب نیاز خود به سوالات جواب داده و نام پوشه خود را با حروف کوچک انتخاب کنید. مشابه تصویر زیر:
حال میتوانید کامند npm run dev را زده و در پورت 3000 دمو پروژه خود را ببینید.
پیشنهاد میکنیم سری هم به صفحه آموزش نصب ری اکت با VIT بیندازید!
پیشنهاد ویژه سرآشپز سایت 😊
بعد از نصب، پوشه ها را باز کنید و نگاهی به آن ها بیندازید. فعلا فقط سرو کار ما با پوشه SRC میباشد و در وحله بعدی پوشه .next
چون در هنگام نصب، گزینه tailwind را زدیم، همانطور که در آدرس src/app/page.js مشاهده میکنید، پروژه ما با تیلویند سازگار است و تقریبا نیاز به تنظیمات و نصب دیگری ندارید!
اولین پوشه که مورد بررسی قرار میدهیم public است که هم اکنون فقط چند فایل نظیر next.svg و vercel.svg را در دل خود دارد. این پوشه برای محتویات استاتیک ما میباشد و هر فایلی در پوشه public قرار گیرد، در مرورگر نمایش داده خواهد شد.
یکی از مهمترین پوشه های نکست ، pages میباشد که شامل سیستم روتینگ درونی نکست هست و بسیار محبوب! در ورزن های قدیمی نکست پوشه pages در همان نزدیکی و روش به شکل زیر…
چرا که در این پوشه شما هر فایل و کامپوننتی ایجاد کنید بعنوان یکی از صفحات سایت شما به احتساب خواهد آمد.
امتحان کنید و فایل زیر را بسازید:
حال طبیعتا باید به مسیر http://localhost:3000/Teacher رفته و صفحه خود را ببینید.
اما در آخرین ورژن های نکست و در حال تایپ این مقاله، پوشه pages در src وجود ندارد. پس قدم های زیر را دنبال کنید:
هر پوشه نشان دهنده یک بخش مسیر است که به یک بخش URL نگاشت می شود. برای ایجاد یک مسیر تودرتو، می توانید پوشه ها را در داخل یکدیگر قرار دهید.
پسوندهای فایل .js، jsx. یا tsx. را می توان برای صفحات استفاده کرد. در پوشه app یک دایرکتوری به نام dashboard ساخته و در آن یک فایل به نام page.js ایجاد کرده و کد زیر را در آن بنویسید:
حال اگر آدرس http://localhost:3000/dashboard را بزنید صفحه جدید خود را مشاهده خواهید کرد. نکست روی کلمه page حساس است و مانند کلمه index در لینوکس و یا default در ویندوز، آن را بعنوان صفحه پیشفرض انتخاب میکند. پس یک راه حل زود بازده این است که برای هر صفحه خود یک دایرکتوری ایجاد کرده و در آن با ساخت صفحه page محتویات را درج نماییم.
<Link> یک کامپوننت React است که عنصر <a> HTML را برای ارائه پیش واکشی و ناوبری سمت client بین مسیرها گسترش می دهد. این راه اصلی برای پیمایش بین مسیرها در Next.js است. طبق کد زیر:
تا به اینجای کار ما دو فایل dashboard و parsa ساختیم و درون هر کدام یک فایل page.js و میخواهیم بین هر کدام لینک برقرار کنیم:
dashboard/page.js
parsa/page.js
همانطور که میبینید بین صفحات لینک برقرار شد!
اگر هم به دنبال لینک دهی داینامیک هستید میتواند از کد زیر کمک بگیرید:
هوک userRouter به شما اجازه می دهد تا مسیرهای درون کامپوننت های کلاینت را به صورت برنامه نویسی تغییر دهید. برای استفاده از useRouter، آن را از next/navigation وارد کنید و هوک داخل کامپوننت کلاینت خود را فراخوانی کنید:
سایر ویژگی های لینک را اینجا بخوانید.
پوشه بعدی styles میباشد که در آپدیت های جدید داخل پوشه SRC قرار دارد. نکست برای استایل ها ساختار جالبی دارد. فایل globals.css شامل استایل های سراسری برنامه است و طبیعتا روی تمام صفحات پیاده سازی خواهد شد. اما میتوان استایل را برای یک ماژول یا کامپوننت خاص هم نوشت!
به این منظور فایل کافیست از ساختار زیر برای نامگذاری فایل استفاده نمایید و نام کامپوننت react خودتان را بنویسید:
moduleName.module.css
sample:
Header.module.css
شبیه کد زیر :
import styles from ‘../styles/Header.module.css’
export default function Header() {
در این صفحات فقط اجازه درج استایل هایی را دارید که سراسری نیستند و در انتهای نامشان module.css دارند.
Next.js با استفاده از هر دو پسوند .scss و .sass از Sass پشتیبانی داخلی دارد. میتوانید از Sass در سطح مؤلفه از طریق ماژولهای CSS و پسوند .module.scssor .module.sass استفاده کنید.
برای نصب sass در نکست کامند زیر را بزنید:
npm install –save-dev sass
اگر می خواهید کامپایلر Sass را پیکربندی کنید، از sassOptions در next.config.js استفاده کنید.
فایل بسازید در app/variables.module.scss
و استفاده کنید در app/page.js
شاید یکی از مهمترین مسائل در نکست همین use client باشد. امتحان کنید و در یکی از فایل های page خود، از کد های قبلی ری اکت که بلد بودید استفاده کنید. هوک بزنید، استیت بسازید و با پراپ ، مقادیری را جابجا کنید. خواهید دید که در اکثر موارد به ارور میخورید. اینجاست که یوز کلاینت به دادمان میرسد!
Client Components شما را قادر می سازد تا تعامل سمت کلاینت را به برنامه خود اضافه کنید. در Next.js از قبل روی سرور رندر شده و روی کلاینت هیدراته می شوند.
useClient قراردادی برای اعلام مرز بین گراف ماژول مؤلفه سرور و کلاینت است. پس اگر در کد خود ایونت هایی دارید و یا از هوک ها برای تعامل کاربر میخواهید استفاده کنید و یا… حتما اول کد خود از use client استفاده کنید. کد زیر را یکبار با یوز و بار دیگر بدون یوز اجرا کنید:
تقریبا برنامه حرفه ای و جدید امروزی نیست که در آن از واکشی دیتا استفاده نشود. نکست راهکارهای جدید و حرفه ای برای واکشی داده ارایه کرده است. اما امروز در ساختار جدید پشتیبانی نمیشود! درورژن های گذشته از getServerSideProps– getStaticProps – getInitialProps متدها برای دیتا فچینگ استفاده میشد که هم اکنون در زمان ویرایش مقاله دیگر ساپورت نمیشود.
React و Next.js 13 راه جدیدی را برای واکشی و مدیریت داده ها در برنامه شما معرفی کردند. سیستم جدید واکشی داده ها در دایرکتوری برنامه کار می کند و بر روی fetch() Web API ساخته شده است. fetch() یک وب API است که برای واکشی منابع راه دور استفاده می شود که یک promise را برمی گرداند.
با React RFC پیشنهادی، میتوانید از async استفاده کنید و منتظر واکشی دادهها در کامپوننتهای سرور باشید.
بهطور پیشفرض، تمام درخواستهای fetch() به صورت خودکار ذخیره و حذف میشوند. به این معنی که اگر یک درخواست را دو بار انجام دهید، درخواست دوم از نتیجه درخواست اول مجددا استفاده می کند.
برای اعتبارسنجی مجدد داده های کش شده در یک بازه زمانی معین، می توانید از گزینه next.revalidate در fetch() برای تنظیم طول عمر کش یک منبع (در ثانیه) استفاده کنید.
fetch(‘https://…’, { next: { revalidate: 10 } });
یا برای کنترل کش از کد زیر:
fetch(‘https://…’, { cache: ‘no-store’ });
مجموعه عملیات ها و ویژگی هایی که باعث میشود برنامه ما بصورت کلی عملکرد بهتری داشته باشد و در ضمن برای مبحث core web vitals هم جزو عوامل موثر بحساب میآید.
برای این کار کافیست از کامپوننت Image استفاده کنید. کد بسیار سادست. ابتدا خود کامپوننت image را فراخوانی کرده و سپس آدرس تصویر مورد نظر را درون آن قرار دهید:
آدرس تصویر هم میتواند داخلی و داینامیک و خارجی و استاتیک باشد. مطابق نمونه بالا.
سایر ویژگی های Image را اینجا بخوانید:
next/font به طور خودکار فونت های شما (از جمله فونت های سفارشی) را بهینه می کند و درخواست های شبکه خارجی را برای حفظ حریم خصوصی و عملکرد بهتر حذف می کند.
بطور مثال برای استفاده از فونت های گوگل کد زیر را ببینید:
یا کد زیر:
اما برای استفاده از فونت های local در app/layout.js باید آدرس فایل فونت را فراخوانی کنید:
برای بارگیری یک اسکریپت شخص ثالث برای چندین مسیر، next/script را وارد کنید و اسکریپت را مستقیماً در layout خود قرار دهید:
سایر ویژگی های script را اینجا بخوانید.
Next.js دارای یک API فراداده است که می تواند برای تعریف متاهای برنامه شما (به عنوان مثال متا و تگ های پیوند در عنصر سر HTML شما) برای بهبود سئو و قابلیت اشتراک گذاری وب استفاده شود.
برای تعریف Metadata ایستا، یک شی Metadata را از یک فایل layout.js یا static page.js اکسپورت کنید. در layout.js/page.js بنویسید:
Next.js میتواند فایلهای استاتیک، مانند تصاویر، را در پوشهای به نام public در دایرکتوری ROOT ارائه کند. فایلهای داخل عمومی میتوانند با کد شما با شروع از URL پایه (/) ارجاع داده شوند. به عنوان مثال، اگر me.png را در داخل public اضافه کنید، کد زیر به تصویر دسترسی پیدا می کند:
همان لود تنبل است. در Next.js با کاهش مقدار جاوا اسکریپت مورد نیاز برای ارائه یک مسیر، به بهبود عملکرد بارگیری اولیه یک برنامه کمک می کند.این به شما امکان میدهد بارگیری مؤلفههای client و کتابخانههای import شده را به تعویق بیندازید و فقط در صورت نیاز آنها را در فایل client قرار دهید. برای بهره مندی از این ویژگی از next/dynamic استفاده میکنیم.
در دایرکتوریهای برنامهها و صفحات به همین صورت عمل میکند تا امکان مهاجرت تدریجی فایل ها را فراهم کند.
مثال کد زیر را در app/page.js بنویسید:
`use client`; import { useState } from `react`; import dynamic from `next/dynamic`; // Client Components: const ComponentA = dynamic(() => import(`../components/A`)); const ComponentB = dynamic(() => import(`../components/B`)); const ComponentC = dynamic(() => import(`../components/C`), { ssr: false }); export default function ClientComponentExample() { const [showMore, setShowMore] = useState(false); return ({/* Load immediately, but in a separate client bundle */}); }{/* Load on demand, only when/if the condition is met */} {showMore && } {/* Load only on the client side */}
هنگام استفاده از React.lazy() و Suspense، Client Component ها به طور پیش فرض (SSR) از قبل رندر می شوند. اگر میخواهید پیشرندر را برای یک مؤلفه مشتری غیرفعال کنید، میتوانید از گزینه ssr که روی false تنظیم شده است استفاده کنید:
یا در مثالی دیگر برای اضافی کردن یک کامپوننت لودینگ اختصاصی کد زیر را در app/page.js بزنید:
Loading…
, }, ); export default function Page() { return (در اینجای کار قصد داریم چند نمونه از مهمترین متد ها و فانکشن های نکست را به شما آموزش دهیم.
روشی که نام، مقدار و گزینه های کوکی را می گیرد و کوکی درخواست خروجی را تنظیم می کند.
عملکرد draftMode به شما امکان می دهد حالت پیش نویس را در داخل یک مؤلفه سرور تشخیص دهید. در app/page.js بنویسید:
Draft Mode is currently {isEnabled ? `Enabled` : `Disabled`}
میتوانید با async تماس بگیرید و مستقیماً در مؤلفههای سرور منتظر بمانید. ساختار کلی:
fetch(`https://...`, { cache: 'force-cache' | 'no-store' });
تابع تغییر مسیر به شما امکان می دهد کاربر را به URL دیگری هدایت کنید. اگر نیاز به تغییر مسیر به 404 دارید، می توانید از تابع notFound استفاده کنید. فراخوانی تابع redirect() یک خطای NEXT_REDIRECT ایجاد می کند و رندر قسمت مسیری را که در آن پرتاب شده است خاتمه می دهد. redirect() را می توان با URL نسبی یا مطلق فراخوانی کرد.
در انتهای مقاله در نظر داریم شیوه خروجی گرفتن از یک اپلیکیشن نکست را مورد بررسی قرار دهیم.
next build یک نسخه بهینه از برنامه شما تولید می کند. این خروجی استاندارد شامل:
برای تست گرفتن از پروژه خود میتوانید از سرویس هایی نظیر vercel که سایت نکست تاکید زیادی بروی آن دارد استفاده کنید. اما تمرکز ما بروی هاست شخصی (سرور نود جی اس) میباشد.
Next.js را می توان در هر ارائه دهنده میزبانی که از Node.js پشتیبانی می کند مستقر کرد.
ابتدا مطمئن شوید که package.json شما دارای اسکریپت های “build” و “start” است:
سپس، npm run build را اجرا کنید تا اپلیکیشن شما ساخته شود. در نهایت npm run start را اجرا کنید تا سرور Node.js راه اندازی شود. این سرور از تمامی ویژگی های Next.js پشتیبانی می کند.
در نظر داشته باشید این پایان راه نیست و فقط یه مقدمه بود به زبان ساده برای درک کلیت و مفهوم فریمن ورک نکست زیبا ♥ حتما وارد داکیومنت اصلی سایت شده و تمرین های و مثال های بیشتری را انجام دهید و سوالات خود را در قسمت نظرات بیان بفرمایید.
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.