Next.js که توسط برخی از بزرگترین شرکت‌های جهان استفاده می‌شود، به شما امکان می‌دهد با گسترش آخرین ویژگی‌های React، و یکپارچه‌سازی ابزار قدرتمند جاوا اسکریپت ، سریع‌ترین راه برای ساخت وبسایت های فول استک ایجاد کنید. برای آشنایی با این مطلب تا انتهای مقاله آموزش کتابخانه NEXT در REACT با ما همراه باشید…

چارچوب React برای وب

اگر کسی از شما پرسید که نکست جی اس چیست؟ در پاسخ به او بگویید تمام ابزار ها و راه هایی که وبسایت شما را سریعتر میکند. بله ، همانطور که خواندید، خود ری اکت که یک کتابخانه در جاوا اسکریپت میباشد، دارای یک فریم ورک قوی و کامل به نام نکست جی اس است که میتواند هر دو سمت فرانت اند و بک اند را کاور کند!

این فریم ورک ری اکت را توسعه میدهد و قابلیت های بیشتری در اختیار شما میگذارد. بطور مثال سرعت و عملکرد سایت شما را بطور زیادی افزایش میدهد و از ویژگی های اصلی آن به حساب میآید.

پلتفرم vercel از بنیانگذاران Next.js است که آن را به چارچوبی تبدیل می کند که می توانید به راحتی آن را گسترش دهید.

اما دقیقاً منظور ما از این حرفها چیست؟ بیایید کمی وقت بگذاریم و توضیح دهیم که React و Next.js چه هستند و چگونه می توانند کمک کنند.

کمی در رابطه با NEXT.JS عمیق شویم:

هنگام ساخت برنامه های مدرن باید چند نکته را در نظر بگیرید. مانند:

• رابط کاربری – نحوه تعامل کاربران با برنامه شما – User Interface
• مسیریابی – چگونه کاربران بین بخش های مختلف برنامه شما حرکت می کنند – Routing 
• واکشی داده – محل زندگی داده های شما و نحوه دریافت آن – Data Fetching
• رندر – چه زمانی و در کجا محتوای ایستا یا پویا را ارائه می کنید – Rendering 
• یکپارچه‌سازی – از چه سرویس‌های شخص ثالثی استفاده می‌کنید (CMS، احراز هویت، و..) – Integrations 
• زیرساخت – جایی که کد برنامه خود را مستقر، ذخیره و اجرا می کنید – Infrastructure 
• عملکرد – چگونه برنامه خود را برای کاربران نهایی بهینه کنید – Performance 
• مقیاس پذیری – چگونه برنامه شما با رشد تیم، داده ها و ترافیک شما سازگار می شود – Scalability 
• تجربه توسعه دهنده – تجربه تیم شما در ساخت و نگهداری برنامه شما – Developer Experience

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

بخشی از موفقیت React این است که نسبتاً درباره سایر جنبه‌های برنامه‌های کاربردی بی‌نظیر است. این منجر به یک اکوسیستم شکوفا از ابزارها و راه حل های شخص ثالث شده است.

اما نکست جی اس…

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

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

ویژگی های مهم NEXT

۱. Server-side Rendering (صفحه سازی در سمت سرور)

Server-side Rendering به معنی رندر کردن صفحات (ساخت و نمایش آن ها) در سمت server است. اگر با react کار کرده باشید می دانید که ما در react داده ها را از سرور گرفته و در سمت client (مرورگر کاربر) از آن داده ها برای ساخت و نمایش صفحه استفاده می کنیم. در این حالت صفحه را در سمت کلاینت ساخته و نمایش داده ایم اما server-side rendering مانند زمانی است که از ربان بک اند برای تولید صفحات HTML استفاده می کنید. یعنی صفحات شما در سمت سرور ساخته شده و سپس به صورت آماده به سمت کاربر ارسال می شوند بنابراین کاربر نیازی به انجام پردازش ندارد. به این ساختار به اختصار SSR میگویند.

به همین خاطر سایت های CSR که در سمت کلاینت رندر میشوند میتوانند سرعت کمتری نسبت به سایت های SSR داشته باشند(به دلیل اینکه در مرورگر کاربر تازه سایت ساخته میشود) و همچنین در سئو مشکلات جدی خواهند داشت، زیرا متن ها و کد های سایت از قبل ساخته نشده و موتور های جستجو به آنها دسترسی ندارند!

نکته : یکی از سوالاتی که معمولا زیاد هم در سوالات استخدامی ری اکت پرسیده میشود این است که از نکست برای سئو استفاده میشود؟ باید پاسخ دهید که یکی از موارد آن، سئو است و کسی که فقط قصد سئو دارد ، ده ها راه حل دیگر برای این قضیه موجود است و نباید به سراغ نکست بیاید!

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

پیشنهاد سرآشپز سایت 😂

۲. File-based Routing (ناوبری فایل محور)

ویژگی دوم و بسیار محبوب کتابخانه نکست ، ناوبری فایل محور یا File-based Routing است. در کتابخانه react به صورت پیش فرض هیچ router ای وجود ندارد که مسیر حرکت کاربر و تغییر URL مرورگر را تحت نظر بگیرد. بجای آن از پکیج هایی مانند react-router استفاده می کنیم. کار چنین پکیج هایی این است که با تغییر URL در مرورگر کاربر، جلوی رفتار پیش فرض مرورگر (ارسال درخواست HTTP) گرفته شود و سپس نمایش محتوای متفاوت در همان صفحه است. بنابراین به نوعی کاربر را گول می زنیم تا تصور کند برنامه ما صفحات مختلفی را دارد. در ضمن در کدزنی هم سختی ها و مشکلاتی دارد!

برای حل این مشکلات Next.js این مسئله را با معرفی سیستم ناوبری یا routing خاص خودش حل می کند!  در واقع در پروژه های Next.js یک پوشه به نام pages را داریم که عینا باید با همین نام باشد. حالا درون این پوشه، پوشه ها و فایل های دیگری را خواهید داشت و ساختار این پوشه ها و فایل ها دقیقا سیستم routing وب سایت شما خواهد بود!

چنین سیستمی برای ساخت مسیر دهی چندین مزیت مهم دارد:

• اولا برای تولید route ها هیچ نیازی به نوشتن کد نداریم بلکه Next.js خودش این کار را برایمان انجام می دهد

• دوما به دلیل نوشتن کد کمتر، خوانایی کدهایمان بالا رفته و از شلوغ شدن پروژه جلوگیری می کنیم

• سوما درک سیستم routing در این حالت بسیار ساده تر است چرا که با نگاه انداختن به پوشه pages به راحتی می توانیم مسیر های سایتمان را مشاهده کنیم

۳. Fullstack Capabilities (توانایی فول استک)

کوتاه بگوییم این است که قرار نیست نکست بصورت خودکار کدهای سمت بک اند شما را نوشته و آن را مدیریت کند ، بلکه قرار است سیستم API نویسی شما و همچنین اتصال کد های سمت فرانت و بک را تسهیل کرده و آن را برای برنامه نویس آسانتر کند. ما می توانیم بدون Next.js یک پروژه react داشته باشیم و API را جداگانه بنویسیم. در هر دو حالت نیز باید API را خودمان بنویسیم! اما در پروژه های Next.js علاوه بر مزیت های قبلی این مزیت را نیز داریم که کد سمت سرور (مثلا Node.js) و کد سمت کلاینت‌ (React) در یک پروژه و یکجا قرار دارند بنابراین مدیریت آن بسیار ساده تر خواهد بود.

نکته : شاید از معدود معایب نکست جی اس این باشد که ایشان زبان سمت بک اند خود را نود جی اس انتخاب کرده است و تغییر آن به زبان دیگر مانند ASP , py و… امکان پذیر نیست!

مقدمه بس است! بزن بریم تا شروع به کار کنیم:

آموزش نصب NEXT.JS

فکر میکنم نیازی نیست که به شما بگوییم آخرین ورژن نود را بروی سیستم خود نصب داشته باشید 😊

توصیه می کنیم با استفاده از create-next-app یک برنامه Next.js جدید ایجاد کنید، که همه چیز را به طور خودکار برای شما تنظیم می کند. برای ایجاد یک پروژه، اجرا کنید:(حتما ف*ل*ت*ر*ش*ک*ن را روشن بفرمایید😢)

npx create-next-app@latest

هنگام نصب، اعلان های زیر را مشاهده خواهید کرد:

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

حال میتوانید کامند npm run dev را زده و در پورت 3000 دمو پروژه خود را ببینید.

پیشنهاد میکنیم سری هم به صفحه آموزش نصب ری اکت با VIT بیندازید!

پیشنهاد ویژه سرآشپز سایت 😊

بعد از نصب، پوشه ها را باز کنید و نگاهی به آن ها بیندازید. فعلا فقط سرو کار ما با پوشه SRC میباشد و در وحله بعدی پوشه .next

چون در هنگام نصب، گزینه tailwind را زدیم، همانطور که در آدرس src/app/page.js مشاهده میکنید، پروژه ما با تیلویند سازگار است و تقریبا نیاز به تنظیمات و نصب دیگری ندارید!

ساختار پوشه بندی NEXT

اولین پوشه که مورد بررسی قرار میدهیم public است که هم اکنون فقط چند فایل نظیر next.svg و vercel.svg را در دل خود دارد. این پوشه برای محتویات استاتیک ما میباشد و هر فایلی در پوشه public قرار گیرد، در مرورگر نمایش داده خواهد شد.

یکی از مهمترین پوشه های نکست ، pages میباشد که شامل سیستم روتینگ درونی نکست هست و بسیار محبوب! در ورزن های قدیمی نکست پوشه pages در همان نزدیکی و روش به شکل زیر…

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

امتحان کنید و فایل زیر را بسازید:

const teacher = () => { return ( <div> <h1>parsa ghorbanian is best teacher :</h1> </div> ); }; export default Teacher;

حال طبیعتا باید به مسیر http://localhost:3000/Teacher رفته و صفحه خود را ببینید.

اما در آخرین ورژن های نکست و در حال تایپ این مقاله، پوشه pages در src وجود ندارد. پس قدم های زیر را دنبال کنید:

Creating Routes یا ساختن مسیر

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

پسوندهای فایل .js، jsx. یا tsx. را می توان برای صفحات استفاده کرد. در پوشه app یک دایرکتوری به نام dashboard ساخته و در آن یک فایل به نام page.js ایجاد کرده و کد زیر را در آن بنویسید:

export default function Page() { return <h1>Hello NextJs, i am Parsa ghorbanian!</h1>; }

حال اگر آدرس http://localhost:3000/dashboard را بزنید صفحه جدید خود را مشاهده خواهید کرد. نکست روی کلمه page حساس است و مانند کلمه index در لینوکس و یا default در ویندوز، آن را بعنوان صفحه پیشفرض انتخاب میکند. پس یک راه حل زود بازده این است که برای هر صفحه خود یک دایرکتوری ایجاد کرده و در آن با ساخت صفحه page محتویات را درج نماییم.

لینک دهی بین صفحات

<Link> یک کامپوننت React است که عنصر <a> HTML را برای ارائه پیش واکشی و ناوبری سمت client بین مسیرها گسترش می دهد. این راه اصلی برای پیمایش بین مسیرها در Next.js است. طبق کد زیر:

تا به اینجای کار ما دو فایل dashboard و parsa ساختیم و درون هر کدام یک فایل page.js و میخواهیم بین هر کدام لینک برقرار کنیم:

dashboard/page.js

import Link from `next/link`; export default function Main() { return ( <> <h1>dashboard is here!</h1> <Link href="/parsa">parsa</Link>; </> ); }

parsa/page.js

import Link from `next/link`; export default function Main() { return ( <> <h1>parsa ghorbanian</h1> <Link href="/dashboard">Dashboard</Link>; </> ); }

همانطور که میبینید بین صفحات لینک برقرار شد!

اگر هم به دنبال لینک دهی داینامیک هستید میتواند از کد زیر کمک بگیرید:

import Link from `next/link`; export default function PostList({ posts }) { return ( <ul> {posts.map((post) => ( <li key={post.id}> <Link href={`/blog/${post.slug}`}>{post.title}</Link> </li> ))} </ul> ); }

هوک userRouter به شما اجازه می دهد تا مسیرهای درون کامپوننت های کلاینت را به صورت برنامه نویسی تغییر دهید. برای استفاده از useRouter، آن را از next/navigation وارد کنید و هوک داخل کامپوننت کلاینت خود را فراخوانی کنید:

`use client`; import { useRouter } from `next/navigation`; export default function Page() { const router = useRouter(); return ( <button type=button onClick={() => router.push(`/dashboard`)}> Dashboard </button> ); }

سایر ویژگی های لینک را اینجا بخوانید.

Styling در نکست

• CSS گلوبال : استفاده ساده و آشنا برای کسانی که با CSS خارجی کار می کنند، اما می تواند منجر به مشکل در مدیریت بسته های بزرگتر CSS و مدیریت سبک ها با رشد برنامه شود.
• ماژول‌های CSS : برای جلوگیری از تداخل نام‌گذاری و بهبود قابلیت نگهداری، کلاس‌های CSS با محدوده محلی ایجاد کنید.
• Tailwind CSS : یک فریم ورک CSS اولین ابزار است که امکان طراحی های سفارشی سریع را با ترکیب کلاس های ابزار فراهم می کند. (در هنگام نصب، گزینه yes install tailwind را زده تا اتومات نصب و فعال شود)
• Sass : یک پیش پردازنده محبوب CSS که CSS را با ویژگی هایی مانند متغیرها، قوانین تودرتو و میکسین گسترش می دهد.
• CSS-in-JS: CSS را مستقیماً در مؤلفه‌های جاوا اسکریپت خود جاسازی کنید و یک ظاهر طراحی پویا و محدوده را فعال کنید.

ماژول‌های CSS :

پوشه بعدی 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 دارند.

نصب sass در نکست

Next.js با استفاده از هر دو پسوند .scss و .sass از Sass پشتیبانی داخلی دارد. می‌توانید از Sass در سطح مؤلفه از طریق ماژول‌های CSS و پسوند .module.scssor .module.sass استفاده کنید.

برای نصب sass در نکست کامند زیر را بزنید:

npm install –save-dev sass

اگر می خواهید کامپایلر Sass را پیکربندی کنید، از sassOptions در next.config.js استفاده کنید.

const path = require(`path`); module.exports = { sassOptions: { includePaths: [path.join(__dirname, `styles`)], }, };

فایل بسازید در app/variables.module.scss

$primary-color: #64ff00; :export { primaryColor: $primary-color; }

و استفاده کنید در app/page.js

import variables from `./variables.module.scss`; export default function Page() { return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>; }

use client چیست؟

شاید یکی از مهمترین مسائل در نکست همین use client باشد. امتحان کنید و در یکی از فایل های page خود، از کد های قبلی ری اکت که بلد بودید استفاده کنید. هوک بزنید، استیت بسازید و با پراپ ، مقادیری را جابجا کنید. خواهید دید که در اکثر موارد به ارور میخورید. اینجاست که یوز کلاینت به دادمان میرسد!

Client Components شما را قادر می سازد تا تعامل سمت کلاینت را به برنامه خود اضافه کنید. در Next.js از قبل روی سرور رندر شده و روی کلاینت هیدراته می شوند.

useClient قراردادی برای اعلام مرز بین گراف ماژول مؤلفه سرور و کلاینت است. پس اگر در کد خود ایونت هایی دارید و یا از هوک ها برای تعامل کاربر میخواهید استفاده کنید و یا… حتما اول کد خود از use client استفاده کنید. کد زیر را یکبار با یوز و بار دیگر بدون یوز اجرا کنید:

`use client` import { useState } from `react` export default function Main(){ const [temp, setTemp] = useState(`parsa`) return( <div className=`row`> <h1>{temp}</h1> <button onClick={()=>setTemp(`arsam`)}>click to change</button> </div> ) }

Data Fetching در نکست

تقریبا برنامه حرفه ای و جدید امروزی نیست که در آن از واکشی دیتا استفاده نشود. نکست راهکارهای جدید و حرفه ای برای واکشی داده ارایه کرده است. اما امروز در ساختار جدید پشتیبانی نمیشود! درورژن های گذشته از getServerSideProps– getStaticProps – getInitialProps متدها برای دیتا فچینگ استفاده میشد که هم اکنون در زمان ویرایش مقاله دیگر ساپورت نمیشود.

React و Next.js 13 راه جدیدی را برای واکشی و مدیریت داده ها در برنامه شما معرفی کردند. سیستم جدید واکشی داده ها در دایرکتوری برنامه کار می کند و بر روی fetch() Web API ساخته شده است. fetch() یک وب API است که برای واکشی منابع راه دور استفاده می شود که یک promise را برمی گرداند.

async and await in Server Components

با React RFC پیشنهادی، می‌توانید از async استفاده کنید و منتظر واکشی داده‌ها در کامپوننت‌های سرور باشید.

به‌طور پیش‌فرض، تمام درخواست‌های fetch() به صورت خودکار ذخیره و حذف می‌شوند. به این معنی که اگر یک درخواست را دو بار انجام دهید، درخواست دوم از نتیجه درخواست اول مجددا استفاده می کند.

async function getData() { const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`); if (!res.ok) { throw new Error(`Failed to fetch data`); } return res.json(); } export default async function Page() { const data = await getData(); return <main>{console.log(data.title)}</main>; }

Revalidating Data

برای اعتبارسنجی مجدد داده های کش شده در یک بازه زمانی معین، می توانید از گزینه next.revalidate در fetch() برای تنظیم طول عمر کش یک منبع (در ثانیه) استفاده کنید.

fetch(‘https://…’, { next: { revalidate: 10 } });

یا برای کنترل کش از کد زیر:

fetch(‘https://…’, { cache: ‘no-store’ });

export default async function Page() { // revalidate this data every 10 seconds at most const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`, { next: { revalidate: 10 } }); const data = res.json(); console.log(`data:`+data); }

Optimization در نکست

مجموعه عملیات ها و ویژگی هایی که باعث میشود برنامه ما بصورت کلی عملکرد بهتری داشته باشد و در ضمن برای مبحث core web vitals هم جزو عوامل موثر بحساب میآید.

Image Optimization

برای این کار کافیست از کامپوننت Image استفاده کنید. کد بسیار سادست. ابتدا خود کامپوننت image را فراخوانی کرده و سپس آدرس تصویر مورد نظر را درون آن قرار دهید:

import Image from `next/image`; import profilePic from `./me.png`; export default function Page() { return ( <> <Image src={profilePic} alt=`Picture of the author` // width={500} automatically provided // height={500} automatically provided // blurDataURL=`data:..." automatically provided // placeholder="blur" // Optional blur-up while loading /> <Image src=`https://s3.amazonaws.com/my-bucket/profile.png` alt="Picture of the author" width={500} height={500} /> </> ); }

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

سایر ویژگی های Image را اینجا بخوانید:

Font Optimization

next/font به طور خودکار فونت های شما (از جمله فونت های سفارشی) را بهینه می کند و درخواست های شبکه خارجی را برای حفظ حریم خصوصی و عملکرد بهتر حذف می کند.

بطور مثال برای استفاده از فونت های گوگل کد زیر را ببینید:

import { Inter } from `next/font/google`; // If loading a variable font, you don`t need to specify the font weight const inter = Inter({ subsets: [`latin`], display: `swap`, }); export default function RootLayout({ children }) { return ( <html lang=`en` className={inter.className}> <body data-rsssl=1>{children}</body> </html> ); }

یا کد زیر:

import { Roboto } from `next/font/google`; const roboto = Roboto({ weight: `400`, subsets: [`latin`], display: `swap`, }); export default function RootLayout({ children }) { return ( <html lang=`en` className={roboto.className}> <body data-rsssl=1>{children}</body> </html> ); }

اما برای استفاده از فونت های local در app/layout.js باید آدرس فایل فونت را فراخوانی کنید:

import localFont from `next/font/local`; // Font files can be colocated inside of `app` const myFont = localFont({ src: `./my-font.woff2`, display: `swap`, }); export default function RootLayout({ children }) { return ( <html lang=`en` className={myFont.className}> <body data-rsssl=1>{children}</body> </html> ); }

Script Optimization

برای بارگیری یک اسکریپت شخص ثالث برای چندین مسیر، next/script را وارد کنید و اسکریپت را مستقیماً در layout خود قرار دهید:

import Script from `next/script`; export default function DashboardLayout({ children }) { return ( <> <section>{children}</section> <Script src=`https://example.com/script.js` /> </> ); }

سایر ویژگی های script را اینجا بخوانید.

Metadata

Next.js دارای یک API فراداده است که می تواند برای تعریف متاهای برنامه شما (به عنوان مثال متا و تگ های پیوند در عنصر سر HTML شما) برای بهبود سئو و قابلیت اشتراک گذاری وب استفاده شود.

برای تعریف Metadata ایستا، یک شی Metadata را از یک فایل layout.js یا static page.js اکسپورت کنید. در layout.js/page.js بنویسید:

export const metadata = { title: `parsa`, description: `parnian edu`, }; export default function Page() {}

Static Assets

Next.js می‌تواند فایل‌های استاتیک، مانند تصاویر، را در پوشه‌ای به نام public در دایرکتوری ROOT ارائه کند. فایل‌های داخل عمومی می‌توانند با کد شما با شروع از URL پایه (/) ارجاع داده شوند. به عنوان مثال، اگر me.png را در داخل public اضافه کنید، کد زیر به تصویر دسترسی پیدا می کند:

import Image from `next/image`; function Avatar() { return <Image src=`/me.png` alt=`me` width=`64` height=`64` />; } export default Avatar;

Lazy Loading

همان لود تنبل است. در Next.js با کاهش مقدار جاوا اسکریپت مورد نیاز برای ارائه یک مسیر، به بهبود عملکرد بارگیری اولیه یک برنامه کمک می کند.این به شما امکان می‌دهد بارگیری مؤلفه‌های client و کتابخانه‌های import شده را به تعویق بیندازید و فقط در صورت نیاز آن‌ها را در فایل client قرار دهید. برای بهره مندی از این ویژگی از next/dynamic استفاده میکنیم.

در دایرکتوری‌های برنامه‌ها و صفحات به همین صورت عمل می‌کند تا امکان مهاجرت تدریجی فایل ها را فراهم کند.

مثال کد زیر را در app/page.js بنویسید:

<pre> `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 ( <div> {/* Load immediately, but in a separate client bundle */} <ComponentA /> {/* Load on demand, only when/if the condition is met */} {showMore && <ComponentB />} <button onClick={() => setShowMore(!showMore)}>Toggle</button> {/* Load only on the client side */} <ComponentC /> </div> ); } </pre>

هنگام استفاده از React.lazy() و Suspense، Client Component ها به طور پیش فرض (SSR) از قبل رندر می شوند. اگر می‌خواهید پیش‌رندر را برای یک مؤلفه مشتری غیرفعال کنید، می‌توانید از گزینه ssr که روی false تنظیم شده است استفاده کنید:

const ComponentC = dynamic(() => import(`../components/C`), { ssr: false });

یا در مثالی دیگر برای اضافی کردن یک کامپوننت لودینگ اختصاصی کد زیر را در app/page.js بزنید:

import dynamic from `next/dynamic`; const WithCustomLoading = dynamic( () => import(`../components/WithCustomLoading`), { loading: () => <p>Loading&#8230;</p>, }, ); export default function Page() { return ( <div> {/* The loading component will be rendered while <WithCustomLoading/> is loading */} <WithCustomLoading /> </div> ); }

متد ها و فانکشن های مهم در نکست

در اینجای کار قصد داریم چند نمونه از مهمترین متد ها و فانکشن های نکست را به شما آموزش دهیم.

cookies().set(name, value, options)

روشی که نام، مقدار و گزینه های کوکی را می گیرد و کوکی درخواست خروجی را تنظیم می کند.

import { cookies } from `next/headers`; async function create(data) { `use server`; cookies().set(`name`, `parsa`); // or cookies().set(`name`, `arsam`, { secure: true }); // or cookies().set({ name: `name`, value: `lee`, httpOnly: true, path: `/`, }); }

draftMode یا حالت پیش نویس

عملکرد draftMode به شما امکان می دهد حالت پیش نویس را در داخل یک مؤلفه سرور تشخیص دهید. در app/page.js بنویسید:

import { draftMode } from `next/headers`; export default function Page() { const { isEnabled } = draftMode(); return ( <main> <h1>My Blog Post</h1> <p>Draft Mode is currently {isEnabled ? `Enabled` : `Disabled`}</p> </main> ); }

fetch در نکست

می‌توانید با async تماس بگیرید و مستقیماً در مؤلفه‌های سرور منتظر بمانید. ساختار کلی:

fetch(`https://...`, { cache: 'force-cache' | 'no-store' });

• کد زیر:

export default async function Page() { // This request should be cached until manually invalidated. // Similar to `getStaticProps`. // `force-cache` is the default and can be omitted. const staticData = await fetch(`https://&#8230;`, { cache: `force-cache` }); // This request should be refetched on every request. // Similar to `getServerSideProps`. const dynamicData = await fetch(`https://&#8230;`, { cache: `no-store` }); // This request should be cached with a lifetime of 10 seconds. // Similar to `getStaticProps` with the `revalidate` option. const revalidatedData = await fetch(`https://&#8230;`, { next: { revalidate: 10 }, }); return <div>&#8230;</div>; }

redirect در نکست

تابع تغییر مسیر به شما امکان می دهد کاربر را به URL دیگری هدایت کنید. اگر نیاز به تغییر مسیر به 404 دارید، می توانید از تابع notFound استفاده کنید. فراخوانی تابع redirect() یک خطای NEXT_REDIRECT ایجاد می کند و رندر قسمت مسیری را که در آن پرتاب شده است خاتمه می دهد. redirect() را می توان با URL نسبی یا مطلق فراخوانی کرد.

import { redirect } from next/navigation; async function fetchTeam(id) { const res = await fetch(https://&#8230;); if (!res.ok) return return res.json(); } export default async function Profile({ params }) { const team = await fetchTeam(params.id); if (!team) redirect(login) } }

Deploying در نکست

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

next build یک نسخه بهینه از برنامه شما تولید می کند. این خروجی استاندارد شامل:

• فایل های HTML برای صفحاتی که از getStaticProps یا Automatic Static Optimization استفاده می کنند
• فایل‌های CSS برای سبک‌های سراسری یا برای سبک‌های دارای دامنه جداگانه
• جاوا اسکریپت برای پیش رندر کردن محتوای پویا از سرور Next.js
• جاوا اسکریپت برای تعامل در سمت مشتری از طریق React

برای تست گرفتن از پروژه خود میتوانید از سرویس هایی نظیر vercel که سایت نکست تاکید زیادی بروی آن دارد استفاده کنید. اما تمرکز ما بروی هاست شخصی (سرور نود جی اس) میباشد.

Next.js را می توان در هر ارائه دهنده میزبانی که از Node.js پشتیبانی می کند مستقر کرد.

ابتدا مطمئن شوید که package.json شما دارای اسکریپت های “build” و “start” است:

{ `scripts`: { `dev`: `next dev`, `build`: `next build`, `start`: `next start` } }

سپس، npm run build را اجرا کنید تا اپلیکیشن شما ساخته شود. در نهایت npm run start را اجرا کنید تا سرور Node.js راه اندازی شود. این سرور از تمامی ویژگی های Next.js پشتیبانی می کند.

در نظر داشته باشید این پایان راه نیست و فقط یه مقدمه بود به زبان ساده برای درک کلیت و مفهوم فریمن ورک نکست زیبا ♥ حتما وارد داکیومنت اصلی سایت شده و تمرین های و مثال های بیشتری را انجام دهید و سوالات خود را در قسمت نظرات بیان بفرمایید.

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.