برنامه نویسی

پاک کردن کد آسان (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}',
  ],
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا