استفاده از Sass و مدیریت اسکریپت‌ها در Next.js – استایل‌نویسی مدرن و بارگذاری بهینه

نصب و استفاده از Sass در Next.js

برای فعال‌سازی Sass، ابتدا پکیج زیر را نصب کنید:

npm install --save-dev sass

Next.js از دو نوع سینتکس پشتیبانی می‌کند:

• .scss: سینتکس مشابه CSS (پیشنهادی)
• .sass: سینتکس فاصله‌دار (Indented)

استفاده از CSS Modules با Sass

برای استایل‌دهی سطح کامپوننت، از فایل‌هایی با پسوند .module.scss یا .module.sass استفاده کنید.

پیکربندی sassOptions در next.config.js

sassOptions: {
  additionalData: `$var: red;`,
  implementation: 'sass-embedded',
}

استفاده از متغیرهای Sass در جاوااسکریپت

مثال:

// variables.module.scss
$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// page.tsx
import variables from './variables.module.scss'

<h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>

بارگذاری اسکریپت‌ها با کامپوننت Script

برای بارگذاری اسکریپت در layout خاص:

import Script from 'next/script'

<Script src="https://example.com/script.js" />

برای بارگذاری در کل اپلیکیشن:

// app/layout.tsx
<Script src="https://example.com/script.js" />

استراتژی‌های بارگذاری اسکریپت

• beforeInteractive: قبل از بارگذاری Next.js
• afterInteractive: بعد از hydration (پیش‌فرض)
• lazyOnload: در زمان بیکاری مرورگر
• worker: بارگذاری در Web Worker (آزمایشی)

استفاده از Partytown برای بارگذاری در Web Worker

فعال‌سازی در next.config.js:

experimental: {
  nextScriptWorkers: true,
}

سپس نصب:

npm install @builder.io/partytown

و استفاده:

<Script src="https://example.com/script.js" strategy="worker" />

اسکریپت‌های Inline

مثال:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

استفاده از event handlerها

در کامپوننت کلاینتی:

'use client'

<Script
  src="https://example.com/script.js"
  onLoad={() => console.log('Script loaded')}
/>

ارسال ویژگی‌های اضافی به تگ <script>

ویژگی‌هایی مانند nonce یا data-* به‌صورت خودکار منتقل می‌شوند:

<Script
  src="https://example.com/script.js"
  id="example-script"
  nonce="XUENAJFW"
  data-test="script"
/>

جمع‌بندی

با استفاده از Sass و کامپوننت Script در Next.js، می‌توانید استایل‌های مدرن و بارگذاری بهینه اسکریپت‌ها را در اپلیکیشن خود پیاده‌سازی کنید. این ابزارها به شما کنترل کامل بر عملکرد، امنیت، و تجربه کاربری می‌دهند.