Get started by
parnian school
Next.js که توسط برخی از بزرگترین شرکتهای جهان استفاده میشود، به شما امکان میدهد تا با گسترش آخرین ویژگیهای React، و یکپارچهسازی ابزار قدرتمند جاوا اسکریپت ، سریعترین راه را برای ساخت وبسایت های فول استک ایجاد کنید.
Next.js یک فریمورک React است که برای ایجاد وبسایتها و برنامههای وب سریع و مقیاسپذیر طراحی شده است. این یک چارچوب کامل است که شامل همه چیزهایی است که برای توسعه وبسایتها و برنامههای وب با React نیاز دارید.
برای آشنایی با این مطلب تا انتهای مقاله آموزش فریم ورک NEXT در REACT با ما همراه باشید.
اگر کسی از شما پرسید که نکست جی اس چیست؟ در پاسخ به او بگویید تمام ابزار ها و راه هایی که وبسایت شما را سریعتر میکند. بله ، همانطور که خواندید، خود ری اکت که یک فریم ورک در جاوا اسکریپت میباشد، دارای یک فریم ورک قوی و کامل به نام نکست جی اس است که میتواند هر دو سمت فرانت اند و بک اند را کاور کند!
این فریم ورک ، ری اکت را توسعه میدهد و قابلیت های بیشتری در اختیار شما میگذارد. بطور مثال سرعت و عملکرد سایت شما را بطور زیادی افزایش میدهد و از ویژگی های اصلی آن به حساب می آید.
پلتفرم vercel از بنیانگذاران Next.js است که آن را به چارچوبی تبدیل می کند که می توانید به راحتی آن را گسترش دهید.
اما دقیقاً منظور ما از این حرف ها چیست؟ بیایید کمی وقت بگذاریم و توضیح دهیم که React و Next.js چه هستند و چگونه می توانند کمک کنند.
هنگام ساخت برنامه های مدرن باید چند نکته را در نظر بگیرید. مانند:
برای هر قسمت از برنامه خود، باید تصمیم بگیرید که آیا خودتان راه حلی ایجاد می کنید یا از ابزارهای دیگری مانند فریم ورک ها و چارچوب ها استفاده می کنید.
اما نکست جی اس…
Next.js یک چارچوب React است که به شما بلوکهایی برای ایجاد برنامههای وب میدهد. منظور ما از چارچوب، Next.js ابزار و پیکربندی مورد نیاز برای React است و ساختار، ویژگیها و بهینهسازیهای اضافی را برای برنامه شما فراهم میکند.
چه یک توسعه دهنده فردی یا بخشی از یک تیم بزرگتر باشید، می توانید از React و Next.js برای ساخت برنامه های وب کاملا تعاملی، بسیار پویا و کارآمد استفاده کنید.
آیا میدانید مدرسه پرنیان، کلاس آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟
SSR (Render-on-the-Server) از SSR استفاده می کند تا صفحات وب را در سمت سرور رندر کند. این باعث می شود که صفحات وب سریعتر بارگذاری شوند و در موتورهای جستجو بهتر رتبه بندی شوند.
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 و… امکان پذیر نیست!
4. از Static Site Generation (SSG) استفاده می کند تا صفحات وب را به صورت استاتیک تولید کند. این باعث می شود که صفحات وب سریعتر بارگذاری شوند و در صورت قطعی سرور نیز در دسترس باشند.
علاوه بر این ویژگی ها، Next.js همچنین از ویژگی های دیگری مانند:
Next.js یک انتخاب عالی برای توسعه وبسایتها و برنامههای وب است که سریع، مقیاسپذیر و SEO-friendly هستند.
مقدمه بس است! بزن بریم تا شروع به کار کنیم:
فکر میکنم نیازی نیست که به شما بگوییم آخرین ورژن نود را بروی سیستم خود نصب داشته باشید 😊
توصیه می کنیم با استفاده از 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 قرار گیرد، در مرورگر نمایش داده خواهد شد.
(از نسخه های قبل از 13 نکست) یکی از مهمترین پوشه های نکست ، pages میباشد که شامل سیستم روتینگ درونی نکست هست و بسیار محبوب! در ورژن های قدیمی نکست پوشه pages در همان نزدیکی و روش به شکل زیر…
چرا که در این پوشه شما هر فایل و کامپوننتی ایجاد کنید بعنوان یکی از صفحات سایت شما به حساب خواهد آمد.
امتحان کنید و فایل زیر را بسازید:
حال طبیعتا باید به مسیر http://localhost:3000/Teacher رفته و صفحه خود را ببینید.
اما در آخرین ورژن های نکست و در حال تایپ این مقاله، پوشه pages در src وجود ندارد. پس قدم های زیر را دنبال کنید:
هر پوشه نشان دهنده یک بخش مسیر است که به یک بخش URL نگاشت می شود. برای ایجاد یک مسیر تودرتو، می توانید پوشه ها را در داخل یکدیگر قرار دهید.
پسوندهای فایل .js، jsx. یا tsx. را می توان برای صفحات استفاده کرد. در پوشه app یک دایرکتوری به نام dashboard ساخته و در آن یک فایل به نام page.js ایجاد کرده و کد زیر را در آن بنویسید:
حال اگر آدرس http://localhost:3000/dashboard را بزنید صفحه جدید خود را مشاهده خواهید کرد. نکست روی کلمه page حساس است و مانند کلمه index در لینوکس و یا default در ویندوز، آن را بعنوان صفحه پیشفرض انتخاب میکند. پس یک راه حل زود بازده این است که برای هر صفحه خود یک دایرکتوری ایجاد کرده و در آن با ساخت صفحه page محتویات را درج نماییم.
اما معمولا یک فایل layout.jsx هم داریم که محتویات داخل آن میتواند در همه صفحات تکرار شود. این فایل عموما برای چند منظور استفاده میشود:
ارسال دیتا های هر صفحه مانند تگ title, description و …
ساخت قسمت های ثابت هر صفحه مانند header, footer, sidebar و…
نکته بسیار مهم اینجاست که بدانید در فایل alyout باید هرجایی که میخواهید محتوایات سایت شما قرار گیرد، همانجا از پراپ children استفاده کنید.
در نظر داشته باشید هر فایل میتواند layout اختصاصی خودش را داشته باشد. metaData های هر صفحه جدید و جایگزین قبلی های میشود، اما اگر هدر و فوتر را تغییر دهید، آن هدر و فوتری که از layout اصلی آمده است در جای خود میماند و تغییرات شما از layout دومی هم به آن اضافه میشود.
مثال زیر را در نظر گرفته که هم فایل page را دارید و هم فایل layout را:
Get started by
parnian school
و فرض کنید صفحه ای ساختیم با آدرس http://localhost:3000/parsa با محتویات:
در Next.js ، فایل Templates به عنوان یک راه برای سازماندهی و مدیریت کدهای HTML در پروژه شما استفاده می شود. فایل های Template می توانند برای ایجاد صفحات جدید، یا برای تغییر ظاهر و عملکرد صفحات موجود استفاده شوند.
فرض کنید شما یک پروژه Next.js دارید که دارای دو صفحه اصلی و صفحه تماس است. در نسخه های قبلی Next.js، شما باید تمام کد HTML برای هر صفحه را در یک فایل واحد قرار می دادید. این می تواند منجر به کدهای طولانی و پیچیده شود.
با استفاده از فایل های Template، می توانید کد HTML برای هر صفحه را در یک فایل جداگانه قرار دهید. این باعث می شود کد شما سازمان یافته تر و نگهداری آن آسان تر شود.
در اینجا یک نمونه از نحوه استفاده از فایل های Template برای ایجاد یک صفحه جدید آورده شده است:
{content}
در این مثال، ما از فایل Template برای سازماندهی کد HTML برای صفحه about
استفاده کردیم. این باعث می شود کد ما سازمان یافته تر و نگهداری آن آسان تر شود.
در نظر داشته باشید خروجی به صورت زیر میباشد:
در Next.js، میتوانید از آدرسهای داینامیک برای ایجاد صفحاتی استفاده کنید که با محتوای متغیر سازگار هستند. این کار با استفاده از سینتکس [slug]
در مسیر صفحه امکانپذیر است. به ساده ترین شکل ممکن توضیح میدهم. با دقت بخوانید:
برای اینکار ابتدا یک فایل با آدرس زیر بسازید:
app/blog/[slug]/page.js |
سپس داخل page.js محتویات زیر را بریزید:
پس میتواند خروجی شما در url صفحه مانند زیر باشد:
app/blog/[slug]/page.js | /blog/a | { slug: 'a' } |
یا زیر:
app/blog/[slug]/page.js | /blog/parsa | { slug: 'parsa' } |
هر چه جای slug بنویسیم، در بالای url صفحه قرار میگیرد.
اما مهم ترین قسمت در آدرس دهی داینامیک:
در نظر داشته باشید، در قسمت میخواهیم به شما یاد بدهیم که چگونه به تعداد api خود، لینک در منو درست کرده و وقتی روی هر کدام از آن لینک ها کلیک شد، بصورت اتومات صفحه ای برای آن ساخته شده و محتویات همان آی دی یا slug در آن صفحه قرار گیرد.
برای این منظور ابتدا ساختار پوشه ای زیر را بسازید:
یعنی در app ، یک پوشه blog بسازید با page.jsx خودش و داخل آن یه پوشه [slug] با page.jsx خودش.
ابتدا در page.jsx که برای پوشه blog هست کد زیر را وارد کنید:
همانطور که در کد بالا میبینید، یک fetch به api مورد نظر زده شده و به تعداد فایل های موجود در آن، منو همراه لینک ساخته شده است(لازم به ذکر است در نکست از کامپوننت Link به جای a استفاده میکنیم که کمی پایین تر توضیح داده شده)
حال روی هر لینک که کلیک شود رشته “blog/”+val.id که حکم همان slug را دارد قرار دادیم.
حال کد زیر را در page.jsx پوشه slug بنویسید:
همانطور که در کد بالا میبینید، href که در صفحه قبلی ارسال کردیم را در این صفحه با params.slug میگیریم و مجدد fetch میزنیم و همان مقدار آی دی مورد نظر خود را استخراج کرده و در صفحه چاپ میکنیم.
<Link> یک کامپوننت React است که عنصر <a> HTML را برای ارائه پیش واکشی و ناوبری سمت client بین مسیرها گسترش می دهد. این راه اصلی برای پیمایش بین مسیرها در Next.js است. طبق کد زیر:
تا به اینجای کار ما دو فایل dashboard و parsa ساختیم و درون هر کدام یک فایل page.js و میخواهیم بین هر کدام لینک برقرار کنیم:
dashboard/page.js
parsa/page.js
همانطور که میبینید بین صفحات لینک برقرار شد!
اگر هم به دنبال لینک دهی داینامیک هستید میتواند از کد زیر کمک بگیرید:
کاربرد بسیار ساده ای دارد. به این معنا که معمولا در className و داخل دستور شرطی نوشته میشود. اگر pathname با href مطابقت داشته باشد، کلاس مورد نظر به المان داده میشود و در غیر این صورت خیر. کد زیر را با دقت ببینید:
در مثال فوق، لینک اول به دلیل عدم تطابق href و pathName کلاس اکتیو داده نشده و در لینک دوم به دلیل تطابق، داده شده است.
هوک 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
فکر کنم برای کسی که اینجای مقاله هست، نیاز به توضیح و تعریف از tailwin نداریم. همانطور که میدانید در هنگام نصب، سوال میشود و میتوانید تیک تیلویند را بزنید تا اتومات نصب شود. اما در اینجا نصب دستی ان را هم آموزش میدهیم.
بستههای Tailwind CSS را نصب کنید و دستور init را اجرا کنید تا فایلهای tailwind.config.js و postcss.config.js تولید شود، پس کامند های زیر را به ترتیب بزنید:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
کد زیر را در فایل tailwind.config.js وارد کنید: (لطفا کاری به postcss.config.js نداشته باش دوست من 🙂
این فایل app/globals.css را بسازید و محتویات زیر را قرار دهید:
سپس این فایل app/layout.js را بسازید و در layOut اصلی global.css را وارد کنید:
سپس میتوانید در فایل اصلی از کلاس های تیلویند استفاده کنید:
آیا میدانید مدرسه طراحی سایت پرنیان، کلاس های فرانت اند با تضمین استخدام برگزار میکند؟
اطلاعات بیشتر، کلیک کنید
شاید یکی از مهمترین مسائل در نکست همین use client باشد. امتحان کنید و در یکی از فایل های page خود، از کد های قبلی ری اکت که بلد بودید استفاده کنید. هوک بزنید، استیت بسازید و با پراپ ، مقادیری را جابجا کنید. خواهید دید که در اکثر موارد به ارور میخورید. اینجاست که یوز کلاینت به دادمان میرسد!
Client Components شما را قادر می سازد تا تعامل سمت کلاینت را به برنامه خود اضافه کنید. در Next.js از قبل روی سرور رندر شده و روی کلاینت هیدراته می شوند.
useClient قراردادی برای اعلام مرز بین گراف ماژول مؤلفه سرور و کلاینت است. پس اگر در کد خود ایونت هایی دارید و یا از هوک ها برای تعامل کاربر میخواهید استفاده کنید و یا… حتما اول کد خود از use client استفاده کنید. کد زیر را یکبار با یوز و بار دیگر بدون یوز اجرا کنید:
تقریبا برنامه حرفه ای و جدید امروزی نیست که در آن از واکشی دیتا استفاده نشود. نکست راهکارهای جدید و حرفه ای برای واکشی داده ارایه کرده است. اما امروز در ساختار جدید پشتیبانی نمیشود! درورژن های گذشته از getServerSideProps– getStaticProps – getInitialProps متدها برای دیتا فچینگ استفاده میشد که هم اکنون در زمان ویرایش مقاله دیگر ساپورت نمیشود.
React و Next.js راه جدیدی را برای واکشی و مدیریت داده ها در برنامه شما معرفی کردند. سیستم جدید واکشی داده ها در دایرکتوری برنامه کار می کند و بر روی 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 پشتیبانی می کند.
در نظر داشته باشید این پایان راه نیست و فقط یه مقدمه بود به زبان ساده برای درک کلیت و مفهوم فریمن ورک نکست زیبا ♥ حتما وارد داکیومنت اصلی سایت شده و تمرین های و مثال های بیشتری را انجام دهید و سوالات خود را در قسمت نظرات بیان بفرمایید.
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
از اینکه خیلی به روز و تازه بود ازتون ممنونم
همه آموزش های موجود برای قبل ورژن ۱۳ هست
خداروشکر که مفید بوده
بابا دمت گرم
چقد کامل بود
خداروشکر که مورد استفاده بوده