Next.js 8.0.4 | Next.js

ما خوشحالیم که Next.js 8.0.4 آماده تولید را ارائه می کنیم:

مانند همیشه، ما در تلاش هستیم تا همه این مزایا را ارائه دهیم کاملاً با عقب سازگار است. برای اکثر برنامه های Next.js، تنها کاری که باید انجام دهید این است که:

npm i next@latest react@latest react-dom@latest

ساخت‌های Next.js اکنون قطعی‌تر هستند، به این معنی که اگر کد تغییر نکند، خروجی ساخت هر بار حاوی همان نتیجه خواهد بود.

این اجازه می دهد تا کارهای بیشتری که توسط فرآیند ساخت انجام می شود ذخیره شود و در نتیجه کدهای تولید مجدد سریعتر پس از اولین ساخت ساخته شوند.

اندازه‌گیری‌های ما نشان داد که بخش قابل‌توجهی از زمان ساخت صرف کوچک‌سازی جاوا اسکریپت می‌شود، زیرا خروجی ساخت اکنون قطعی‌تر است و شانس اینکه فایل کوچک‌سازی شده از قبل در حافظه نهان باشد بیشتر است.

کاربرانی که در Vercel مستقر می شوند، این بهبودهای ذخیره سازی را به طور خودکار تجربه خواهند کرد.

ما سمت سرور خود را ساده کرده ایم next/dynamic manifest فقط شامل ماژول هایی می شود که به صورت ناهمزمان بارگذاری می شوند.
این مانیفست ساده شده سریعتر محاسبه می شود و جاوا اسکریپت کمتری تولید می کند.

کاربران CircleCI باید زمان ساخت سریع‌تری را مشاهده کنند.
پیش از این، به دلیل اینکه محیط CircleCI به طور دقیق میزان پردازنده های موجود را منعکس نمی کرد، کارگران بیش از حد برنامه ریزی شده بودند.
Next.js اکنون CircleCI را شناسایی می کند و تعداد مناسبی از پردازنده ها را بر اساس منابع موجود اختصاص می دهد.

Next.js در حال حاضر تولید می کند 5.58 کیلوبایت کمتر جاوا اسکریپت سمت کلاینت و دارای بار HTTP کوچکتری نسبت به نسخه قبلی است.

withRouter دیگر بستگی ندارد hoist-non-react-statics، کاهش اندازه بسته با 3 کیلوبایت. withRouter دوباره بلند خواهد شد getInitialProps، اما نه سایر خواص استاتیک.

را next/babel پیش تنظیم برای تولید بهینه شده است ضعیف تر و سریعتر جاوا اسکریپت.

را X-Powered-By هدر حذف می شود و اندازه بار HTTP کاهش می یابد. ما در جامعه تحقیق کردیم و متوجه شدیم که هدر اغلب در تولید غیرفعال است، بنابراین تصمیم گرفتیم آن را حذف کنیم.
همچنین به این معنی است poweredByHeader می تواند از شما حذف شود next.config.js اگر این گزینه در پروژه شما فعال شده باشد.

ما بهینه‌سازی‌های زیادی را در درخت وابستگی Next.js و پایگاه کد کلی انجام دادیم، بنابراین همه ویژگی‌ها را بدون سرور تبدیل کردیم. 44 کیلوبایت (5.44 کیلوبایت gzip) کوچکتر.

اندازه ویژگی بدون سرور مستقیماً بر عملکرد بارگیری بدون سرور تأثیر می گذارد، ویژگی های کوچکتر به معنای بارگذاری سریعتر است.

از زمان انتشار Next.js 8، گزارش‌هایی از تعداد کمی از کاربران دریافت کرده‌ایم که در وارد کردن اجزای React خارج از Next.js مشکل داشتند.
به عنوان مثال در مجموعه آزمایشی آنها.
این به دلیل واردات به next در فایل صحیح در پایگاه کد Next.js بازنویسی می شوند،
با این حال، این بهینه سازی برای همه کاربران استفاده شد next/babel از پیش تعیین شده
بهینه سازی به خود فرآیند ساخت Next.js منتقل شده است، بنابراین دیگر با تنظیمات babel کاربر تضاد نخواهد داشت.

یکی از اهداف Next.js ارائه بهترین پیش فرض های ممکن برای نوشتن برنامه های تحت وب است.
در تلاش برای کاهش مقدار تنظیماتی که باید هنگام اجرای پرس‌وجوهای رسانه‌ای CSS در Next.js انجام دهید.

به طور پیش فرض، مرورگرها CSS را مدیریت نمی کنند @media پرس و جو و مقیاس بندی به روشی که انتظار دارید کار کنند،
که می تواند منجر به تناقضات غیرمنتظره در هنگام نوشتن CSS شود @media درخواست ها

تقریباً در همه موارد، کاربران Next.js a اضافه می‌کنند viewport متا تگ به برنامه آنها برای رفع این تناقضات.

شروع از نسخه 8.0.4 این viewport برچسب دیگر در بیشتر موارد مورد نیاز نیست.
اگر viewport توسط برنامه تنظیم نشده است، یک نمای پیش فرض اعمال خواهد شد:

meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

تگ viewport همچنان می تواند با استفاده از آن لغو شود next/head:

import Head from 'next/head';
 
function HomePage() {
  return (
    
      Head>
        meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      Head>
    >
  );
}
 
export default HomePage;

با تشکر از جیسون میلر برای همکاری و اجرای این تغییر.

MDX به شما امکان می دهد JSX را در اسناد Markdown خود بنویسید.
می‌توانید از نحو نشانه‌گذاری ساده برای نوشتن محتوا و وارد کردن مؤلفه‌های React برای بهبود سند با محتوای تعاملی و پویا استفاده کنید.

افزونه ای که از MDX برای Next.js پشتیبانی می کند، @zeit/next-mdx، به مخزن Next.js GitHub منتقل شده است و اکنون به عنوان در دسترس است @next/mdx.

نصب و راه اندازی:

npm i @next/mdx @mdx-js/loader

برای در دسترس قرار دادن آن برای برنامه Next.js خود، a ایجاد کنید next.config.js فایل و شامل:

const withMDX = require('@next/mdx')();
module.exports = withMDX();

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

Next.js Learn یک راهنمای گام به گام برای یادگیری Next.js است که با تست ها و مثال ها کامل شده است.

وب سایت اخیراً با استفاده از MDX بازسازی شده است و مشارکت را آسان تر از همیشه کرده است. ما از هر کسی برای مشارکت در وب سایت آموزشی استقبال می کنیم!

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

ما بازخوردهای زیادی از جامعه در مورد بهبود محتوا دریافت کرده‌ایم و در چند هفته گذشته بر اساس آنها عمل کرده‌ایم. Next.js Learn now نمونه‌های به‌روز شده و جزئیات بیشتری در هر بخش دارد تا دستورالعمل‌ها را راحت‌تر درک کنید!

ما بسیار هیجان زده هستیم که شاهد رشد مداوم پذیرش Next.js باشیم.

• خرج کردیم 660 همکار.
• این پروژه در GitHub ستاره دار است 36150 بار.
• پایان 2950 درخواست دانلود از چاپ اول ارسال شده است.

مایلیم از همه کسانی که در انتشار این نسخه از Next.js مشارکت داشتند تشکر کنیم. چه برای کمک به هسته یا گسترش و بهبود فهرست نمونه‌های همیشه در حال رشد خود، از همه مشارکت‌ها قدردانی می‌کنیم.

اگر می‌خواهید شروع به مشارکت در Next.js کنید، مسائل برچسب Good First Issue یا Help Wanted محل خوبی برای شروع هستند.

انجمن Next.js به تعداد بیشتری افزایش یافته است 6000 عضو.

GitHub Discussions مکانی برای صحبت در مورد Next.js، دریافت نکاتی در مورد نحوه حل مشکلات و کمک به سایر اعضای انجمن با دانش Next.js است.

به انجمن در GitHub بپیوندید!