پاک کردن کد آسان (Feat. Next.JS مسیریابی صفحه)

خلاصه یک خط
اگر این یک مؤلفه یا تابعی است که فقط در یک صفحه استفاده می شود ، بیایید آن را در پوشه صفحه جمع کنیم.
کد خوب چیست
استانداردها ممکن است از توسعه دهنده متفاوت باشد ، اما من اخیراً استاندارد جدیدی برای کد خوب دارم.
“پاک کردن کد آسان است”.
به عنوان مثال ، فکر کنید که یک صفحه تبلیغ رویداد را به عنوان یک الزام دریافت خواهید کرد. البته ممکن است این صفحه بازیافت شود ، اما بسته به نیازهای تجاری شما ، ممکن است لازم باشد طی چند روز آن را برای همیشه حذف کنید.
این بدان معنی است که شما باید کدی بنویسید که برای دومی آسان باشد.
پاک کردن کد آسان
بند ناف که پاک کردن آن آسان است؟
من فکر می کنم شما می توانید با ایجاد یک ماژول کم با یک ماژول “ترکیبی” مشترک ، کدی ایجاد کنید که پاک کردن آن آسان باشد.
در افراط و تفریط ، می توانید ترکیبی از فهرست صفحه را کاهش دهید.
next.js> بر اساس مسیریابی صفحه ، صفحه رویداد با page
در پوشه /components
با /types
با /utils
جمع آوری ماژول های مورد استفاده فقط در آن صفحه است.
به طور خلاصه ، در نزدیکی استفاده قرار می گیرد.
در واقع اعمال می شود
من این را در پروژه اخیر وب سایت پخش فیلم اعمال کردم.
مشکل بعدی است. js pages
دایرکتوری فقط باید مؤلفه های “صفحه” داشته باشد.
هنگام اجرای روی سرور توسعه LocalHost مشکلی نبود ، اما هنگام توزیع تولید ، استقرار با خطای زیر متوقف می شود:
ساخت بهینه سازی شکست خورد: صفحات یافت شده بدون یک جزء React به عنوان صادرات پیش فرض در
البته ، هر مؤلفه ، نوع و قلاب را می توان از پوشه صفحات خارج کرد.
با این حال ، مشخص شد که برای نگه داشتن یک ماژول خاص دامنه در یک مکان و مدیریت در نزدیکی استفاده ، مزایای نگهداری وجود خواهد داشت.
🍀 حل: به سادگی تنظیمات زیر را به next.config.js اضافه کنید.
صفحه متن: [‘page.tsx’, ‘page.ts’]
و من پرونده هایی را که باید با “صفحه” واقعی به قالب بالا ارائه دهند ، تغییر دادم.
توجه به این نکته حائز اهمیت است که باید _ap.tsx ، index.tsx و غیره تغییر یابد (_app.page.tsx ، index.page.tsx).
و Tailwind بلافاصله کار نمی کند ، بنابراین باید یک خط دیگر اضافه کنید:
// tailwind.config.js
content: [
'./pages/*.page.{js,ts,jsx,tsx,mdx}', <-- 추가!
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],