قالب ها در Next.js – جامعه dev

در Next.js layout.tsx مشترک است UI جزء بین routesبشر layout.tsx هرگز rerenders وقتی از یکی حرکت می کنیم route به دیگری ما استفاده می کنیم layout برای ارائه عناصر استاتیک که قرار نیست تغییر کنند. مثل ، Headerبا Footer، و غیره. این به معنای ، layout مؤلفه/صفحات خود را نگه می دارد یا UI به همان روش و ارائه می دهد page.tsx در آن به عنوان children، اگر می خواهید.

تفاوت بین layout وت template

درست مثل layout template همچنین می پیچد pages وت components به عنوان childrenبشر اما تفاوت اصلی بین layout وت template است ، layout می تواند وضعیت فعلی را حفظ کند ، اما template نمی تواند. به همین دلیل layout تغییر نمی کند UI یا دستکاری نمی کند DOMبشر از طرف دیگر ، template نگه نمی دارد state valueبشر این تغییر می کند state مجدداً UI، و دستکاری DOMبشر

ایجاد a template بسیار ساده است

• یک پرونده به نام ایجاد کنید template.tsx/jsx/js.. در فهرست مورد نظر خود
• در template، بازگشت React component اجباری است
• همانطور که انجام می دهید انجام دهید layout.tsx

import SignUp from './signup';

export default function MyTemplate({ children }: { children: React.ReactNode }) {
  return (
    

      
      {children}
    
  );
}

به طور خلاصه ، استفاده نکنید template برای دارایی های استاتیک. از آن برای کجا استفاده کنید state نیاز به تغییر و تغییر مجدد مؤلفه دارد.

'use client'

بعضی اوقات ممکن است شما نیاز به استفاده داشته باشید 'use client'بشر

• وقتی از هر استفاده می کنید React hook یا state (useState، استفاده) در خود template
• متصل کردن event handlers یا به مرورگر متکی است APIs (windowبا document)
• سایر مؤلفه های مشتری را وارد می کند (به عنوان مثال ، الف carouselبا chart، یا provider)
• یک بار "use client" موجود است ، همه واردات به بخشی از بسته نرم افزاری مشتری تبدیل می شوند.