نحوه استفاده از فهرست برنامه در Next.js
هنگامی که در حال ساختن یک پروژه با استفاده از آخرین نسخه Next.js هستید، از شما خواسته می شود بین استفاده از فهرست app/ دایرکتوری یا فهرست pages/ یکی را انتخاب کنید. دایرکتوری app/ در حال حاضر روش توصیه شده برای ساختن برنامه ها در Next.js است.
در این مقاله، نحوه به حداکثر رساندن پتانسیل دایرکتوری app در Next.js با یادگیری آپشن های موجود آن را خواهید آموخت.
فهرست مطالب
app/ پوشه
دایرکتوری app/ در Next.js برخلاف دایرکتوری pages/ دارای ویژگی های زیادی است. برخی از این ویژگی ها عبارتند از:
چیدمان
مسیریابی
استفاده از فونت ها
در حال بارگذاری کامپوننت
مولفه خطا
مؤلفه یافت نشد
جزء قالب
جزء سرور
چیدمان
استفاده از Layout در دایرکتوری app/ برنامه، ایجاد رابط های پیچیده ای را که الگوهای مسیریابی پیشرفته را فعال می کند، جلوگیری از رندرهای پرهزینه و حفظ وضعیت در سراسر مسیریابی، ساده تر می کند.
در دایرکتوری app/ ، می توانید از تابع Layout با ایجاد یک فایل layout.jsx در ریشه دایرکتوری app/ استفاده کنید. این یک رابط کاربری (UI) را تعریف می کند که در چندین مکان به اشتراک گذاشته شده است.
یک طرح‌بندی می‌تواند طرح‌بندی دیگر یا صفحه‌ای را در آن ارائه کند. هرگاه مسیری به هر جزء در طرح تغییر کند، وضعیت آن حفظ می‌شود، زیرا مؤلفه طرح‌بندی خارج نمی‌شود.
نحوه اضافه کردن متا تگ به Layouts
متا تگ ها قطعات کوچکی از اطلاعات هستند که جزئیات یک صفحه وب را در اختیار مرورگرها و موتورهای جستجو قرار می دهند.
برای گفت ن متا تگ ها به برنامه خود هنگام استفاده از دایرکتوری app/ در Next.js، می توانید از متادیتا در فایل layout.js استفاده کنید. ابرداده مانند قطعه کد زیر از فایل صادر می شود:
export const metadata = { title: 'Keyword Title', description: 'Any Keyword,Another Keyword, More Keywords ', }; زمانی که می خواهید متا تگ های متفاوتی برای هر مسیر داشته باشید، نادیده گرفتن متا تگ طرح اصلی بسیار مهم است. برای نادیده گرفتن این موارد، باید metadata متغیر را از فایل مسیری که می‌خواهید متا تگ اعمال شود صادر کنید.
هیچ فایل _app.js وجود ندارد
فایل _app.jsx از فهرست app/ ناپدید شده است. همانطور که ممکن است پیش بینی کرده باشید، ما همه چیز را در فایل layout.jsx ذخیره می کنیم، که در هنگام استفاده از دایرکتوری app/ در Next.js، طرح اولیه است.
به عنوان مثال، اگر می خواهید از Chakra UI استفاده کنید، باید ارائه دهنده را در فایل layout.jsx قرار دهید. در زیر یک قطعه کد از مستندات چاکرا آمده است که نحوه پیوند دادن ارائه دهنده را به فایل طرح بندی نشان می دهد:
// app/providers.tsx 'use client' import { ChakraProvider } from '@chakra-ui/react' export function Providers({ children }: { children: React.ReactNode }) { return <ChakraProvider>{children}</ChakraProvider> } // app/layout.tsx import { Providers } from './providers' export default function RootLayout({ children, }: { children: React.ReactNode, }) { return ( <html lang='en'> <body> <Providers>{children}</Providers> </body> </html> ) }مسیریابی
مسیریابی در دایرکتوری app/ شامل استفاده از مسیریابی کاملاً مبتنی بر پوشه است. این برخلاف دایرکتوری pages/ است که امکان استفاده از مسیریابی مبتنی بر فایل یا مسیریابی مبتنی بر پوشه را می‌دهد.
مسیریابی مبتنی بر پوشه شامل ایجاد یک پوشه است که نام مسیر باید با نام پوشه مطابقت داشته باشد، و سپس ایجاد یک فایل page.js که به آدرس / URL آن پوشه ارجاع می دهد.
به عنوان مثال، اگر پوشه‌ای به نام about ایجاد کنید و یک page.js در آن پوشه ایجاد شود، با فرض اینکه هنوز از یک سرور توسعه استفاده می‌کنید، آدرس URL localhost:3000/about خواهد بود. به طور مشابه، هر پوشه ای که در هر جایی از app/ دایرکتوری ایجاد شود از این الگو پیروی می کند.
مسیریابی تو در تو
مسیرهای تودرتو در app/ دایرکتوری شامل ایجاد یا تودرتو پوشه‌ها در دیگران است. از آنجایی که هر پوشه در دایرکتوری app/ مربوط به یک مسیر است، در حالی که فایل page.js در پوشه مربوطه به آدرس / URL آن پوشه اشاره می کند، می توانید با قرار دادن پوشه ها در پوشه های دیگر، مسیرهای تودرتو ایجاد کنید.
به عنوان مثال، مسیر URL /dashboard/analytics با ساختار پوشه‌ای مانند app/dashboard/analytics مطابقت دارد که یک فایل page.js در پوشه analytics وجود دارد تا مسیر را برای عموم در دسترس قرار دهد.
گروه مسیر
با توجه به رویکرد مبتنی بر پوشه دایرکتوری برنامه، هر پوشه حاوی یک فایل page.js به طور خودکار مسیری برای آن برنامه در نظر گرفته می شود.
برای جلوگیری از استفاده مستقیم از نام پوشه در مسیر، می توانید نام پوشه را در پرانتز قرار دهید، مانند (name_of_folder) که به طور موثر مسیرها را تحت آن نام گروه بندی می کند. شما می توانید این را به صورت بصری در تصویر زیر مشاهده کنید:
استفاده از فونت ها
در Next.js 12، نصب فونت ها در page/ دایرکتوری شامل کپی کردن پیوند شیوه نامه فونت در فایل CSS است.
اما در Next.js 13، فرآیند در فهرست app/ شامل استفاده از کلمه کلیدی import برای وارد کردن فونت دلخواه شما از next/font/google است. پس از وارد کردن، زیرمجموعه فونت مقداردهی اولیه می شود و در یک متغیر ذخیره می شود که سپس به عنوان یک کلاس به تگ بدنه اضافه می شود.
//importing the fonts import { Inter } from 'next/font/google'; //initialising a variable const inter = Inter({ subsets: ['latin'] }); export default function RootLayout({ children }) { return ( <> <html lang="en"> //Adding the variable as a class to the body tag <body className={inter.className}> {children} </body> </html> </> ); }نحوه ایجاد فاویکون
به طور مشابه، روشی که ما فونت‌ها را در Next.js وارد می‌کنیم از زمان معرفی آن تکامل یافته است، و همچنین روش ایجاد فاویکون نیز تغییر کرده است.
در دایرکتوری app/ ، ایجاد یک فاویکون در Next.js شامل ایجاد یا جایگزینی فایل favicon.ico واقع در پوشه ریشه دایرکتوری برنامه با تصویری است که می خواهید استفاده کنید. توجه داشته باشید که اگر تصویر شما با فرمت دیگری مانند JPG، PNG یا SVG است، باید آن را به فرمت ICO تبدیل کنید.
فایل loading.jsx .
استفاده از کامپوننت بارگذاری یک ویژگی مفید در Next.js است، که در آن می‌توانید تابع بارگذاری را به سادگی با ایجاد فایلی به نام loading.jsx در پوشه تعیین‌شده به دست آورید. این به ویژه زمانی مفید است که داده‌ها را از یک API واکشی می‌کنید و نیاز به نمایش وضعیت بارگیری در انتظار پاسخ دارید.
شما می توانید یک فایل loading.jsx ایجاد کنید که وضعیت آن را در حالت "بارگذاری" در حالی که منتظر پاسخ API هستید، تنظیم کنید.
در اینجا مثالی از شکل ظاهری یک فایل loading.jsx آورده شده است:
// app/loading.jsx const loadingPage = ()=>{ return ( <div className="loader"> <div id="loader-wrapper"> <div id="loader"> <img src="/img/Spinner-1s-120px.gif"/> </div> <div className="loader-section section-left"> </div> <div className="loader-section section-right"></div> </div> </div> ) } export default loadingPage فایل error.jsx .
فایل error.jsx یک فایل ویژه است که برای رسیدگی به خطاهای سمت سرور استفاده می شود. این بخشی از ویژگی های جدید مدیریت خطا است که در نسخه 13.4 Next.js معرفی شده است.
این فایل در نظر گرفته شده است تا جایگزین فایل‌های pages/error.js یا pages/_error.js سنتی برای رسیدگی به خطاها به شیوه‌ای متمرکزتر شود.
یکی از مزیت های اصلی این است که این فایل می تواند خطاهای سمت سرویس گیرنده و سرور را مدیریت کند. می تواند برای تعیین نوع خطای رخ داده و نمایش پیام یا سبک مناسب، یک ستون statusCode دریافت کند.
در زیر نمونه ای از شکل ظاهری یک فایل error.jsx آورده شده است:
// app/error.jsx function Error({ statusCode }) { return ( <div> <h1>Error</h1> <p>An error {statusCode} occurred on server</p> </div> ); } Error.getInitialProps = ({ res, err }) => { const statusCode = res ? res.statusCode : err ? err.statusCode : 404; return { statusCode }; }; export default Error; در مثال بالا، جزء Error یک prop statusCode دریافت می کند که در متد getInitialProps تعیین می شود. این روش تحلیل می کند که آیا یک شی پاسخ ( res )، یک شی خطا ( err ) وجود دارد یا اگر هیچ کدام وجود نداشته باشد 404 را پیش فرض می کند. سپس کد وضعیت در صفحه خطا نمایش داده می شود.
فایل not-found.jsx
فایل not-found.jsx یک قرارداد فایل ویژه است که برای رسیدگی به مواردی که کاربر به مسیری که در آن برنامه وجود ندارد هدایت می‌شود. معمولاً برای ارائه یک صفحه سفارشی "Not Found" زمانی که منبع درخواستی یافت نمی شود استفاده می شود
در اینجا یک مثال از آنچه که یک not-found.jsx می تواند شبیه باشد آورده شده است:
// app/not-found.jsx import Link from 'next/link'; export default function NotFound() { return ( <div> <h2>Not Found</h2> <p>The page you were looking for does not exist.</p> <Link href="/">Go back home</Link> </div> ); } فایل template.jsx .
تصور کنید جعبه ای از بلوک های لگو دارید و می خواهید انواع مختلفی از ماشین ها را بسازید. یک فایل template.jsx در Next.js مانند یک طرح اولیه است که به شما کمک می کند آن ماشین ها را بسازید. هر خودرو طراحی متفاوتی دارد، اما همه آنها از قوانین اولیه یکسانی برای ساخت پیروی می کنند.
فایل template.jsx به Next.js می گوید که چگونه قطعات را برای هر صفحه از وب سایت خود کنار هم قرار دهد. درست مانند نحوه استفاده از یک طرح ساده برای ساخت بسیاری از اتومبیل ها، فایل template.jsx دستورالعمل هایی را برای ساخت بسیاری از صفحات وب ارائه می دهد.
هر بار که می خواهید یک صفحه جدید ایجاد کنید، از طرح اولیه پیروی می کنید. اما بر خلاف طرح‌های معمولی، این طرح پس از اتمام ساخت یک صفحه پاک می‌شود، پس با یک صفحه جدید شروع می‌کنید. به همین دلیل است که به آن "الگو" می گویند - چیزی است که شما از آن به عنوان نقطه شروع برای ساختن چیز دیگری استفاده می کنید.
گاهی اوقات، ممکن است بخواهید یک ویژگی خاص را به یک خودرو اضافه کنید، مانند یک سپر درخشان در تاریکی. در Next.js، می‌توانید این کار را با یک فایل template.jsx با گفت ن یک کد خاص فقط برای آن یک صفحه انجام دهید. پس از اتمام، ویژگی ویژه را فراموش خواهید کرد زیرا طرح اولیه پاک می شود.
پس ، به طور خلاصه، یک فایل template.jsx مانند یک کتاب قوانین خاص است که به شما کمک می کند صفحات مختلفی را در وب سایت خود ایجاد کنید، و برای هر صفحه جدیدی که ایجاد می کنید شروع به کار می کند.
چه تفاوتی با فایل layout.jsx دارد؟
در Next.js، هم template.jsx و هم layout.jsx برای قرار دادن صفحات و ارائه یک ساختار مشترک استفاده می‌شوند، اما وقتی صحبت از ناوبری و حفظ حالت می‌شود، رفتار متفاوتی دارند.
Layouts ( layout.jsx ) : اینها ماندگار هستند و وضعیت خود را در مسیرهای مختلف حفظ می کنند. آنها برای عناصری که باید در طول مسیریابی یکسان و ثابت بمانند، مانند سرصفحه ها، پاورقی ها و نوارهای کناری ایده آل هستند.
طرح‌بندی‌ها رندرهای مجدد را به حداقل می‌رسانند و به افزایش عملکرد کمک می‌کنند، زیرا پس از پیمایش دوباره نصب نمی‌شوند و دوباره رندر نمی‌شوند.
الگوها ( template.jsx ) : اینها پایدار نیستند و برای هر یک از فرزندان خود در مسیریابی نمونه جدیدی ایجاد می کنند. این بدان معناست که وقتی کاربر بین مسیرهایی که یک الگوی مشترک دارند پیمایش می‌کند، یک نمونه جدید از مؤلفه نصب می‌شود، عناصر DOM دوباره ایجاد می‌شوند و حالت حفظ نمی‌شود.
الگوها زمانی مفید هستند که بخواهید اجزا را از وضعیت یا رفتارهای اشتراک‌گذاری جدا کنید، یا زمانی که نیاز دارید هر بار که کاربر به یک مؤلفه پیمایش می‌کند، جلوه‌های خاصی را فعال کنید یا تغییر حالت دهید.
به عنوان مثال، آنها برای جمع آوری بازخورد با فرم مدیریت شده useState که برای هر صفحه منحصر به فرد است یا ردیابی بازدیدهای صفحه با useEffect مناسب هستند.
در اصل، طرح‌بندی‌ها برای عناصر ثابت و حالت دار هستند، در حالی که الگوها برای اجزای مجزا و مستقل از حالت هستند که در هر مسیریابی به حالت تازه نیاز دارند. شما می‌توانید طرح‌بندی‌ها را برای کارایی و سازگاری، و الگوهایی را برای اجزای مجزا و مستقل از حالت انتخاب کنید که به وضعیت تازه در مسیریابی نیاز دارند.
اجزای سرور
اجزای سرور اکنون وضعیت پیش‌فرض فهرست برنامه در Next.js هستند. آنها به شما امکان می دهند رندر سمت سرور را در برنامه front-end خود انجام دهید، که مقدار کد جاوا اسکریپت ارسال شده به مشتری را کاهش می دهد.
برخی از مزایای استفاده از اجزای سرور عبارتند از:
واکشی داده ها
امنیت
ذخیره سازی
اندازه های بسته نرم افزاری
بهینه سازی موتورهای جستجو و قابلیت اشتراک گذاری شبکه های اجتماعی
رندر سمت سرور (SSR) در مقابل اجزای سرور در Nextjs
تفاوت های کلیدی بین این دو در محل استفاده آنها (صفحات در مقابل برنامه)، نحوه تأثیر آنها بر اندازه بسته نرم افزاری سمت سرویس گیرنده و سطح کنترلی است که بر روی رندر ارائه می دهند.
اجزای سرور راهی برای استفاده از منطق سمت سرور بدون سربار SSR سنتی ارائه می‌دهند، که می‌تواند به عملکرد و قابلیت نگهداری بهتر برای برنامه‌های کاربردی وب مدرن منجر شود.
همچنین، در حالی که هر دو SSR و Server Components بر روی سرور ارائه می‌شوند، دومی از تعامل (فرآیندی که به عنوان هیدراتاسیون شناخته می‌شود) با JS پشتیبانی نمی‌کند و به این ترتیب، کنترل‌کننده‌های رویداد و آپشن های React مانند useState، useEffect و سایر عملیات‌های DOM پشتیبانی نمی‌کنند. با آن کار کند
با قرار دادن دستورالعمل useClient در بالای کد، می‌توانید به این ویژگی‌ها دسترسی داشته باشید.
نتیجه
فهرست app/ در Next.js مجموعه‌ای قوی از ویژگی‌ها را ارائه می‌دهد که برای بهبود تجربه توسعه‌دهنده و بهینه‌سازی عملکرد برنامه‌ها طراحی شده‌اند.
با استفاده از فهرست app/ دایرکتوری، می‌توانید از آخرین پیشرفت‌ها در Next.js، مانند مؤلفه Layout برای مدیریت سازگاری رابط کاربری و حفظ حالت، مسیریابی مبتنی بر پوشه برای ناوبری ساده، و توانایی وارد کردن فونت‌ها و ایجاد، بهره کامل ببرید. فاویکون ها به راحتی
معرفی فایل‌های ویژه مانند loading.jsx ، error.jsx ، و not-found.jsx به ترتیب یک رویکرد متمرکز برای مدیریت وضعیت‌های بارگیری، خطاها و مسیرهای ناموجود ارائه می‌کند.
همچنین، فایل template.jsx به عنوان یک طرح اولیه برای ساخت صفحات وب عمل می کند و انعطاف پذیری را برای طراحی های منحصر به فرد صفحه ارائه می دهد و در عین حال ساختاری سازگار را تضمین می کند.
اجزای سرور، که اکنون در فهرست app/ دایرکتوری پیش‌فرض هستند، مزایای قابل توجهی نیز ارائه می‌دهند
در این مرحله شما به اندازه کافی اطمینان دارید که از این ویژگی ها در ساخت برنامه های قدرتمند، مقیاس پذیر و قابل نگهداری با Next.js استفاده کنید.
برچسب‌ها
|
ارسال نظر