LogoENEnglish

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

Next.js به‌صورت داخلی از Sass پشتیبانی می‌کند و امکان استفاده از SCSS یا SASS را با CSS Modules فراهم می‌سازد. همچنین با کامپوننت Script می‌توان اسکریپت‌های خارجی را به‌صورت بهینه بارگذاری کرد، از جمله با استراتژی‌های مختلف و پشتیبانی آزمایشی از Web Worker با Partytown.

SassSCSSScript ComponentPartytown

~2 دقیقه مطالعه • بروزرسانی ۶ آبان ۱۴۰۴

نصب و استفاده از 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، می‌توانید استایل‌های مدرن و بارگذاری بهینه اسکریپت‌ها را در اپلیکیشن خود پیاده‌سازی کنید. این ابزارها به شما کنترل کامل بر عملکرد، امنیت، و تجربه کاربری می‌دهند.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article