TypeScript

يوفر Next.js تجربة تطوير مع TypeScript كخيار أول لبناء تطبيق React الخاص بك.

يأتي مع دعم مدمج لـ TypeScript لتثبيت الحزم الضرورية تلقائيًا وتهيئة الإعدادات المناسبة.

المشاريع الجديدة

create-next-app الآن يأتي مع TypeScript افتراضيًا.

npx create-next-app@latest

المشاريع الحالية

أضف TypeScript إلى مشروعك عن طريق إعادة تسمية ملف إلى .ts / .tsx. قم بتشغيل next dev و next build لتثبيت التبعيات الضرورية تلقائيًا وإضافة ملف tsconfig.json مع خيارات التهيئة الموصى بها.

إذا كان لديك بالفعل ملف jsconfig.json، انسخ خيار paths من الملف القديم jsconfig.json إلى ملف tsconfig.json الجديد، واحذف ملف jsconfig.json القديم.

الحد الأدنى لإصدار TypeScript

يوصى بشدة أن تكون على الأقل على الإصدار v4.5.2 من TypeScript للحصول على ميزات مثل معدلات النوع على أسماء الاستيراد وتحسينات الأداء.

التوليد السكوني وعرض جانب الخادم

لـ getStaticProps و getStaticPaths و getServerSideProps، يمكنك استخدام أنواع GetStaticProps و GetStaticPaths و GetServerSideProps على التوالي:

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps = (async (context) => {
  // ...
}) satisfies GetStaticProps

export const getStaticPaths = (async () => {
  // ...
}) satisfies GetStaticPaths

export const getServerSideProps = (async (context) => {
  // ...
}) satisfies GetServerSideProps

معلومة جيدة: تمت إضافة satisfies إلى TypeScript في الإصدار 4.9. نوصي بالترقية إلى أحدث إصدار من TypeScript.

مسارات API

إليك مثال لكيفية استخدام الأنواع المدمجة لمسارات API:

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: 'John Doe' })
}

يمكنك أيضًا تحديد نوع بيانات الاستجابة:

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' })
}

App المخصص

إذا كان لديك تطبيق مخصص App، يمكنك استخدام النوع المدمج AppProps وتغيير اسم الملف إلى ./pages/_app.tsx كما يلي:

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

أسماء مسارات مختصرة و baseUrl

يدعم Next.js تلقائيًا خيارات "paths" و "baseUrl" في tsconfig.json.

يمكنك معرفة المزيد عن هذه الميزة في وثائق أسماء مسارات الوحدات.

التحقق من أنواع next.config.js

يجب أن يكون ملف next.config.js ملف JavaScript لأنه لا يتم تحليله بواسطة Babel أو TypeScript، ولكن يمكنك إضافة بعض التحقق من الأنواع في بيئة التطوير الخاصة بك باستخدام JSDoc كما يلي:

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* خيارات التهيئة هنا */
}

module.exports = nextConfig

التحقق التدريجي من الأنواع

منذ الإصدار v10.2.1 يدعم Next.js التحقق التدريجي من الأنواع عند تمكينه في tsconfig.json الخاص بك، وهذا يمكن أن يساعد في تسريع التحقق من الأنواع في التطبيقات الكبيرة.

تجاهل أخطاء TypeScript

يفشل Next.js بناء الإنتاج (next build) الخاص بك عندما تكون هناك أخطاء TypeScript في مشروعك.

إذا كنت تريد أن يقوم Next.js بإنتاج كود الإنتاج بشكل خطير حتى عندما يكون هناك أخطاء في تطبيقك، يمكنك تعطيل خطوة التحقق من الأنواع المدمجة.

إذا تم تعطيله، تأكد من أنك تقوم بفحص الأنواع كجزء من عملية البناء أو النشر، وإلا فقد يكون هذا خطيرًا جدًا.

افتح next.config.js وقم بتمكين خيار ignoreBuildErrors في تكوين typescript:

module.exports = {
  typescript: {
    // !! تحذير !!
    // السماح خطيرًا لبناءات الإنتاج بالإكمال بنجاح حتى إذا
    // كان هناك أخطاء أنواع في مشروعك.
    // !! تحذير !!
    ignoreBuildErrors: true,
  },
}

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