app/global.css ایجاد کنید و آن را در Root Layout ایمپورت نمایید تا استایلها روی تمام مسیرهای (Routes) برنامه اعمال شوند:/* app/global.css */
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}// app/layout.tsx
// These styles apply to every route in the application
import './global.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}توجه تخصصی: استایلهای سراسری را میتوان در هر Layout، Page یا کامپوننتی ایمپورت کرد. اما از آنجا که Next.js از پشتیبانی داخلی React برای استایلشیتها جهت هماهنگی با Suspense استفاده میکند، این کار در حال حاضر استایلشیتها را هنگام جابهجایی بین مسیرها حذف نمیکند و ممکن است باعث تداخل شود.پیشنهاد معماری:
- برای استایلهای واقعاً سراسری (مثل استایلهای پایه Tailwind) از Global CSS استفاده کنید.
- برای استایلدهی به کامپوننتها از Tailwind CSS بهره ببرید.
- در صورت نیاز به استایلهای سفارشی و محدودشده (Scoped)، از CSS Modules استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app