Next.js 9.5 | Next.js

امروز ما مشتاق معرفی Next.js 9.5 هستیم که شامل موارد زیر است:

Next.js روش های تولید سایت ایستا را در نسخه 9.3 با یک هدف روشن معرفی کرد: ما باید از مزایای استاتیک (همیشه سریع، همیشه آنلاین، تکراری جهانی) استفاده کنیم، اما با پشتیبانی عالی از داده های پویا که Next.js به آن معروف است.

برای به دست آوردن بهترین هر دو دنیا، Next.js را معرفی کردیم تولید استاتیک افزایشی، به روز رسانی محتوای ثابت پس از اینکه قبلاً سایت خود را ساخته اید. با کمک fallback: true گزینه ج getStaticPaths، شما می توانید رجیستری صفحات استاتیک جدید در زمان اجرا.

Next.js می تواند به صورت ایستا تعداد بی نهایت صفحه را به این صورت پیش رندر کند، بدون توجه به اینکه مجموعه داده شما چقدر بزرگ است.

امروز اعلام می کنیم کل موجودی در بازسازی استاتیکی افزایشی، که یک مکانیسم است برای به روز رسانی موجود صفحات، با رسیدن ترافیک آنها را در پس زمینه رندر می کند.

بازسازی پس‌زمینه با الهام از احیای پس‌زمینه تضمین می‌کند که ترافیک به‌طور مداوم، همیشه از فضای ذخیره‌سازی استاتیک ارائه می‌شود، و صفحه جدید ساخته شده فقط ارسال می‌شود. پس از اتمام تولید.

export async function getStaticProps() {
  return {
    props: await getDataFromCMS(),
    // we will attempt to re-generate the page:
    // - when a request comes in
    // - at most once every second
    revalidate: 1,
  };
}

پرچم اعتبار مجدد تعداد ثانیه هایی است که حداکثر یک نسل برای جلوگیری از https://en.wikipedia.org/wiki/Cache_stampede رخ می دهد.

بر خلاف SSR سنتی، بازسازی تدریجی استاتیک تضمین می کند که مزایای استاتیک را حفظ کنید:

• بدون جهش در تاخیر. صفحات به طور مداوم سریع ارائه می شوند.
• صفحات هرگز آفلاین نمی شوند. اگر بازسازی صفحه پس‌زمینه با شکست مواجه شود، صفحه قدیمی بدون تغییر باقی می‌ماند.
• پایگاه داده کم و بارگذاری باطن. صفحات حداکثر یکبار “به یکباره” دوباره محاسبه می شوند.

هر دو ویژگی اضافی (افزودن صفحات و به روز رسانی آنها) و همچنین حالت پیش نمایش اکنون پایدار هستند و اکنون به طور کامل توسط هر دو پشتیبانی می شود. next start و پلت فرم لبه Vercel خارج از جعبه.

برای نشان دادن این ویژگی جدید، نمونه‌ای ایجاد کردیم که بازسازی یک صفحه ثابت را نشان می‌دهد که تعداد واکنش‌های مختلف را در GitHub برای یک مشکل خاص نشان می‌دهد: https://reactions-demo.vercel.app/

سپس روی یک RFC اضافی کار خواهیم کرد تا دو قابلیت اضافی برای تولید استاتیک افزایشی را بررسی کنیم:

• چندین صفحه را به طور همزمان ایجاد و باطل کنید (مانند فهرست وبلاگ شما و یک پست وبلاگ خاص)
• بازسازی با گوش دادن به رویدادها (مانند وب هوک های CMS) قبل از ترافیک کاربر

برای جزئیات بیشتر مراجعه کنید getStaticProps مستندات

پروژه های Next.js همیشه توسط دامنه اصلی ارائه نمی شوند. گاهی اوقات ممکن است بخواهید پروژه Next.js خود را تحت یک مسیر فرعی مانند میزبانی کنید /docs به طوری که پروژه Next.js فقط آن زیربخش از دامنه را پوشش می دهد.

در حالی که این امر تا کنون امکان پذیر بود، اما به قیمت کمی پیکربندی اضافی تمام شد. به عنوان مثال اضافه کردن یک پیشوند به هر یک و مطمئن شوید که Next.js بسته های جاوا اسکریپت را از مسیر صحیح ارائه می دهد.

برای رفع این مشکل، یک گزینه پیکربندی جدید را معرفی می کنیم. basePath به شما امکان می دهد پروژه Next.js خود را به راحتی در مسیر فرعی دامنه خود میزبانی کنید.

برای شروع استفاده basePath می توانید آن را به آن اضافه کنید next.config.js:

module.exports = {
  basePath: '/docs',
};

پس از پیکربندی basePath پروژه شما به طور خودکار از مسیر ارائه شده هدایت می شود. در این مورد /docs.

هنگام پیوند دادن به صفحات دیگر در پروژه با next/link یا next/router در basePath به طور خودکار پیشوند خواهد شد. این به شما امکان تغییر می دهد basePath بدون تغییر پروژه

یک مثال از این می تواند استفاده باشد next/link برای تغییر مسیر به صفحه دیگر:

import Link from 'next/link';
 
export default function HomePage() {
  return (
    
      Link href="/documentation-page">
        a>Documentation pagea>
      Link>
    >
  );
}

استفاده next/link انجام این کار باعث می شود HTML زیر در مرورگر وب ارائه شود:

a href="/docs/documentation-page">Documentation pagea>

برای جزئیات بیشتر مراجعه کنید basePath مستندات

لینک را به عنوان کپی کنیدپشتیبانی از بازنویسی، تغییر مسیر و هدر

لینک را به عنوان کپی کنیدبازنویسی می کند

هنگام ایجاد یک پروژه Next.js، ممکن است بخواهید مسیرهای خاصی را به URL دیگری پروکسی کنید. برای مثال، اگر می‌خواهید به تدریج Next.js را در پشته خود بپذیرید، می‌خواهید صفحاتی را که در پروژه Next.js شما وجود دارد و سپس هر چیزی که به پروژه قدیمی که از آن مهاجرت می‌کنید نگاشت نشده است را مسیریابی کنید.

با Next.js 9.5، یک گزینه پیکربندی جدید به نام معرفی می کنیم rewritesکه به شما امکان می دهد یک مسیر درخواست ورودی را به یک مسیر مقصد دیگر، از جمله URL های خارجی، نگاشت کنید.

برای مثال، ممکن است بخواهید یک مسیر خاص را بازنویسی کنید example.com:

module.exports = {
  async rewrites() {
    return [
      { source: '/backend/:path*', destination: 'https://example.com/:path*' },
    ];
  },
};

در این مورد، تمام مسیرهای زیر /backend هدایت خواهد شد example.com.

همچنین می‌توانید بررسی کنید که آیا مسیرهای پروژه Next.js مطابقت دارند یا خیر و سپس در صورت عدم وجود مطابقت، آن را به پروژه قبلی بازنویسی کنید. این فوق العاده مفید است پذیرش تدریجی Next.js:

module.exports = {
  async rewrites() {
    return [
      // check if Next.js project routes match before we attempt proxying
      {
        source: '/:path*',
        destination: '/:path*',
      },
      {
        source: '/:path*',
        destination: `https://example.com/:path*`,
      },
    ];
  },
};

در این حالت ابتدا همه مسیرها را به هم وصل می کنیم. اگر هیچ کدام مطابقت نداشت، ما پروکسی می کنیم example.com که پروژه قبلی خواهد بود.

برای کسب اطلاعات بیشتر در مورد rewrites عملکرد، اسناد بازنویسی را بررسی کنید.

لینک را به عنوان کپی کنیدتغییر مسیرها

اکثر وب سایت ها حداقل به برخی تغییر مسیرها نیاز دارند. به خصوص زمانی که ساختار مسیرهای پروژه خود را تغییر می دهید. به عنوان مثال هنگام حرکت /blog به /news یا انتقال های مشابه

پیش از این، داشتن لیستی از تغییر مسیرها در پروژه Next.js نیاز به راه اندازی یک سرور سفارشی یا سفارشی داشت. _error برای بررسی اینکه آیا تغییر مسیر برای مسیر تنظیم شده است یا خیر. با این حال، این به قیمت از بین بردن بهینه‌سازی‌های استاتیک و بدون سرور کلید (با داشتن سرور) یا به اندازه کافی ارگونومیک نبود.

با شروع با Next.js 9.5، اکنون می توانید لیستی از تغییر مسیرها را در آن ایجاد کنید next.config.js زیر redirects کلید:

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ];
  },
};

برای کسب اطلاعات بیشتر در مورد redirects تابع مستندات تغییر مسیرها را ببینید.

Next.js به شما امکان می‌دهد پروژه‌های ترکیبی ایجاد کنید که از تولید استاتیک و رندر سمت سرور استفاده می‌کنند. با رندر سمت سرور، می توانید هدرهایی را برای درخواست ورودی تنظیم کنید. برای صفحات استاتیک، تنظیم هدر تا کنون امکان پذیر نبود.

اکنون الف را معرفی کرده ایم headers ملک در next.config.js که برای همه مسیرهای Next.js اعمال می شود:

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Feature-Policy',
            // Disable microphone and geolocation
            value: "microphone 'none'; geolocation 'none'",
          },
        ],
      },
    ];
  },
};

را headers این گزینه به شما امکان می دهد هدرهایی را که معمولاً مورد نیاز هستند را تنظیم کنید Feature-Policy و Content-Security-Policy.

برای کسب اطلاعات بیشتر در مورد headers تابع مستندات سرصفحه ها را ببینید.

وقتی Next.js 3 سال پیش معرفی شد، رفتار پیش‌فرض آن این بود که همه URL‌های دارای اسلش انتهایی همیشه یک صفحه 404 را برمی‌گردانند.

اگرچه موثر است، اما برخی از کاربران امکان تغییر این رفتار را درخواست کرده اند. به عنوان مثال، هنگام انتقال یک پروژه موجود به Next.js که قبلاً همیشه دارای اسلش های انتهایی بود.

با Next.js 9.5 گزینه جدیدی به نام معرفی کردیم trailingSlash به next.config.js.

این گزینه جدید تضمین می کند که Next.js به طور خودکار رفتار اسلش انتهایی را کنترل می کند:

• به طور خودکار URL های دارای اسلش های انتهایی به URL ها بدون اسلش های انتهایی هدایت شوند، به عنوان مثال: /about/ به /about
• چه زمانی trailingSlash تنظیم شده است true URL بدون اسلش انتهایی به URL با اسلش انتهایی هدایت می شود، به عنوان مثال: /about به /about/
• فراهم می کند next/link به طور خودکار اعمال/حذف اسلش انتهایی برای جلوگیری از تغییر مسیرهای غیر ضروری.

module.exports = {
  // Force a trailing slash, the default value is no trailing slash (false)
  trailingSlash: true,
};

برای کسب اطلاعات بیشتر در مورد trailingSlash تابع مستندات trailingSlash را ببینید

هنگامی که صفحات Next.js را می نویسید، ایجاد تمام بسته های اسکریپت، شیوه نامه های CSS و HTML کاملاً خودکار و از شما انتزاع می شود. اگر تولید شده را بررسی کنید


Source link