turbopack

خيار turbopack يتيح لك تخصيص Turbopack لتحويل ملفات مختلفة وتغيير طريقة حل الوحدات.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    // ...
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  turbopack: {
    // ...
  },
}

module.exports = nextConfig

معلومة مفيدة:

• Turbopack لـ Next.js لا يتطلب محمِّلات أو تكوين محمِّلات للوظائف المدمجة. Turbopack يدعم بشكل مدمج CSS وتجميع JavaScript الحديث، لذلك لا حاجة لـ css-loader أو postcss-loader أو babel-loader إذا كنت تستخدم @babel/preset-env.

المرجع

الخيارات

الخيارات التالية متاحة لتكوين turbo:

المحمِّلات المدعومة

المحمِّلات التالية تم اختبارها للعمل مع تنفيذ محمِّل webpack في Turbopack، ولكن العديد من محمِّلات webpack الأخرى يجب أن تعمل أيضًا حتى لو لم تكن مدرجة هنا:

• babel-loader
• @svgr/webpack
• svg-inline-loader
• yaml-loader
• string-replace-loader
• raw-loader
• sass-loader
• graphql-tag/loader

أمثلة

دليل الجذر

يستخدم Turbopack دليل الجذر لحل الوحدات. الملفات خارج جذر المشروع لا يتم حلها.

Next.js يكتشف تلقائيًا دليل جذر مشروعك. يفعل ذلك بالبحث عن أحد هذه الملفات:

• pnpm-lock.yaml
• package-lock.json
• yarn.lock
• bun.lock
• bun.lockb

إذا كان لديك هيكل مشروع مختلف، على سبيل المثال إذا كنت لا تستخدم مساحات العمل، يمكنك تعيين خيار root يدويًا:

const path = require('path')
module.exports = {
  turbopack: {
    root: path.join(__dirname, '..'),
  },
}

تكوين محمِّلات webpack

إذا كنت بحاجة إلى دعم محمِّلات يتجاوز ما هو مدمج، العديد من محمِّلات webpack تعمل بالفعل مع Turbopack. هناك حاليًا بعض القيود:

• فقط مجموعة أساسية من واجهة برمجة تطبيقات محمِّل webpack تم تنفيذها. حاليًا، هناك تغطية كافية لبعض المحمِّلات الشهيرة، وسنوسع دعم واجهة برمجة التطبيقات لدينا في المستقبل.
• فقط المحمِّلات التي تُرجع كود JavaScript مدعومة. المحمِّلات التي تحول ملفات مثل صفحات الأنماط أو الصور غير مدعومة حاليًا.
• الخيارات الممررة إلى محمِّلات webpack يجب أن تكون بدائية JavaScript، كائنات، ومصفوفات. على سبيل المثال، لا يمكن تمرير وحدات إضافية require() كقيم خيارات.

لتكوين المحمِّلات، أضف أسماء المحمِّلات التي قمت بتثبيتها وأي خيارات في next.config.js، مع تعيين امتدادات الملفات إلى قائمة المحمِّلات.

فيما يلي مثال باستخدام محمِّل @svgr/webpack، الذي يمكّن من استيراد ملفات .svg وعرضها كمكونات React.

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

للمحمِّلات التي تتطلب خيارات تكوين، يمكنك استخدام تنسيق كائن بدلاً من سلسلة:

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              icon: true,
            },
          },
        ],
        as: '*.js',
      },
    },
  },
}

معلومة مفيدة: قبل إصدار Next.js 13.4.4، كان turbo.rules يُسمى turbo.loaders وكان يقبل فقط امتدادات الملفات مثل .mdx بدلاً من *.mdx.

حل الأسماء المستعارة

يمكن تكوين Turbopack لتعديل حل الوحدات عبر الأسماء المستعارة، بشكل مشابه لتكوين resolve.alias في webpack.

لتكوين حل الأسماء المستعارة، قم بتعيين الأنماط المستوردة إلى وجهتها الجديدة في next.config.js:

module.exports = {
  turbopack: {
    resolveAlias: {
      underscore: 'lodash',
      mocha: { browser: 'mocha/browser-entry.js' },
    },
  },
}

هذا يعين استيرادات حزمة underscore إلى حزمة lodash. بمعنى آخر، import underscore from 'underscore' ستحمّل وحدة lodash بدلاً من underscore.

يدعم Turbopack أيضًا التعيين الشرطي للأسماء المستعارة عبر هذا الحقل، بشكل مشابه لـ التصديرات الشرطية في Node.js. حاليًا فقط شرط browser مدعوم. في الحالة أعلاه، سيتم تعيين استيرادات وحدة mocha إلى mocha/browser-entry.js عندما يستهدف Turbopack بيئات المتصفح.

حل الامتدادات المخصصة

يمكن تكوين Turbopack لحل الوحدات بامتدادات مخصصة، بشكل مشابه لتكوين resolve.extensions في webpack.

لتكوين حل الامتدادات، استخدم حقل resolveExtensions في next.config.js:

module.exports = {
  turbopack: {
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
  },
}

هذا يستبدل امتدادات الحل الأصلية بالقائمة المقدمة. تأكد من تضمين الامتدادات الافتراضية.

لمزيد من المعلومات والإرشادات حول كيفية ترحيل تطبيقك إلى Turbopack من webpack، راجع توثيق Turbopack حول التوافق مع webpack.

تاريخ الإصدارات