Next.js 9.4 | Next.js

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

• تازه کردن سریع: تجربه ویرایش زنده سریع و قابل اعتماد همانطور که ثابت شده است در مقیاس فیس بوک
• Regen افزایشی استاتیک (بتا): صفحات استاتیک را پس از استقرار در میلی ثانیه بازسازی کنید
• نمونه هایی از CMS: نمونه هایی از Contentful، DatoCMS، Prismic، Sanity و TakeShape با استفاده از نسل جدید سایت های استاتیک نسل بعدی ما
• پشتیبانی از متغیرهای محیطی جدید: پشتیبانی داخلی برای .env و الف NEXT_PUBLIC_ پیشوند همانطور که در CRA دیده می شود
• بهبود پشتیبانی از استخراج داخلی: دور انداختن node-fetch و isomorphic-fetch واردات به نفع ساخته شده در fetch polyfill، برای Node.js و همه مرورگرها (ساخت و اجرا)
• گزارش متریک وب یکپارچه: معیارهایی را که نتایج Lighthouse را تعریف می کنند، اما از ترافیک واقعی خود بگیرید
• واردات مطلق و نام مستعار: از واردات شفاف تر و کوتاه تر، اجتناب کنید ../../../ اسپاگتی
• پشتیبانی Sass قابل تنظیم: پیکربندی includePaths و سایر گزینه های پشتیبانی داخلی Sass ما
• خروجی گزارش بهبود یافته: خروجی کنسولی که خواندن آسان‌تر، فرمت‌بندی مداوم و کمتر تکراری است

Fast Refresh یک تجربه تازه‌سازی داغ جدید است که به شما بازخورد فوری در مورد ویرایش‌های انجام شده در اجزای React شما می‌دهد. اکنون است به طور پیش فرض فعال شده است برای همه پروژه های Next.js 9.4 یا جدیدتر.

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

اجرای بارگذاری مجدد داغ قدیمی نسبت به خطاهای کامپایل یا زمان اجرا تحمل نمی کرد و اگر هنگام ویرایش CSS یا جاوا اسکریپت اشتباه تایپی داشته باشید، برنامه شما را مجدداً کامل می کند. بهینه نبود و افکار شما را قطع کرد.

Fast Refresh عمیقاً در خود React (از طریق React Refresh) ادغام می‌شود و به Next.js اجازه می‌دهد تا به‌روزرسانی‌های قابل پیش‌بینی و دقیق را در درخت مؤلفه React شما انجام دهد.

این بدان معنی است که Next.js فقط کد موجود در فایلی را که ویرایش کرده اید به روز می کند و فقط آن مؤلفه را رندر می کند. بدون از دست دادن حالت جزء. این شامل سبک‌ها (ماژول‌های درون خطی، CSS-in-JS یا CSS/Sass)، نشانه‌گذاری، کنترل‌کننده‌های رویداد و افکت‌ها (از طریق useEffect).

به عنوان بخشی از این تجربه، ما پوشش خطا را کاملاً دوباره طراحی کرده ایم تا مفیدتر باشد و برنامه شما را در برابر اشتباهات تایپی یا زمان اجرا مقاوم کنیم. این شامل، اما محدود به موارد زیر نیست:

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

مایلیم تشکر کنیم دن آبراموف برای کمک و کمک ارزشمند او در پیاده سازی این ویژگی.

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

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

ما اخیراً نمونه‌ای را گردآوری کرده‌ایم که نشان می‌دهد چگونه Next.js می‌تواند تعداد بی‌نهایتی از صفحات را به این روش به صورت ایستا پیش‌رندر کند.

امروز نیز به شما معرفی می کنیم Regen افزایشی استاتیک (بتا)، که مکانیزمی برای به روز رسانی صفحات موجود، هنگام ورود ترافیک، آنها را دوباره در پس زمینه رندر می کند. با الهام از stale-while-validate، این تضمین می کند که ترافیک به طور مداوم و همیشه به صورت ایستا ارائه می شود و صفحه جدید ساخته شده تنها پس از اتمام تولید ارسال می شود.

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
    unstable_revalidate: 1,
  };
}

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

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

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

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

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

پس از اعلام نسل بعدی سایت ایستا، می‌خواهیم سناریوهای دنیای واقعی را برای استخراج محتوا از API Headless CMS و ارائه آن به عنوان Next.js HTML به اشتراک بگذاریم.

ما با سازندگان برخی از بهترین سیستم‌های CMS در جهان شریک شده‌ایم: Contentful، DatoCMS، Prismic، Sanity و TakeShape، و موارد بیشتری در راه است.

این نمونه‌ها نه تنها آماده استفاده و 100% منبع باز و دارای مجوز MIT هستند، بلکه بهترین روش‌های موجود را نیز شامل می‌شوند:

DatoCMS به لطف پشتیبانی داخلی بهینه سازی تصویر به نتایج بی عیب و نقصی دست می یابد

ما همچنین با TinaCMS در جهت جدید و هیجان انگیز برای CMS همکاری کرده ایم: ویرایش محتوای صفحه. راهنمای آنها را بررسی کنید تا یاد بگیرید چگونه آن را در پروژه خود اعمال کنید.

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

امروز، ما دو ویژگی کاملاً سازگار با عقب را اعلام می کنیم که به ساده سازی این فرآیند کمک می کند.

ابتدا، اکنون می توانید متغیر محیطی را با پیشوند قرار دهید NEXT_PUBLIC_ برای نمایش یک متغیر محیط مرورگر. هنگامی که این متغیر محیطی استفاده می شود، در بسته جاوا اسکریپت مرورگر تعبیه می شود.

دیگر نیازی به اضافه کردن a نیست next.config.js و اضافه کنید env کلید افشای این متغیرها

// The environment variable will be exposed to the browser
console.log('My Application Version', process.env.NEXT_PUBLIC_VERSION);
 
export default function HomePage() {
  return h1>Hello Worldh1>;
}

تغییر دوم این است که Next.js اکنون پشتیبانی می کند .env بارگذاری پیش فرض به شما امکان می دهد تا به راحتی متغیرهای محیطی را برای توسعه و تولید تعریف کنید.

می توانید در مورد بیشتر بخوانید .env بارگذاری در مستندات متغیرهای محیطی

این ویژگی های جدید استفاده از متغیرهای محیطی را با پیروی از قراردادهای زیر ساده می کند:

• متغیرهای محیطی فقط در محیط پیش‌فرض Node.js در دسترس هستند
• متغیرهای محیطی پیشوندی NEXT_PUBLIC_ در معرض مرورگر قرار می گیرند

در Next.js 9.1.7، polyfilling را اعلام کردیم fetch() API در مرورگر. امروزه این polyfill به محیط Node.js گسترش یافته است.

در عمل، دیگر نیازی به استفاده از هیچ نوع پلی فیل برای واکشی سمت سرور ندارید (به عنوان مثال isomorphic-unfetch یا node-fetch)، همانطور که Next.js به صورت خودکار ارائه خواهد کرد fetch() در تمامی محیط ها

به عنوان مثال هنگام استفاده getStaticProps، که با استفاده از Next.js در زمان ساخت اجرا می شود:

export async function getStaticProps() {
  // fetch no longer needs to be imported from isomorphic-unfetch
  const res = await fetch('https://.../posts');
  const posts = await res.json();
 
  return {
    props: {
      posts,
    },
  };
}
 
function Blog({ posts }) {
  // Render posts...
}
 
export default Blog;

هفته گذشته، تیم گوگل کروم Core Web Vitals را معرفی کرد. Core Web Vitals سیگنال‌های با کیفیتی هستند که کلید ارائه UX عالی در وب هستند گزارش های فانوس دریایی شناخته شده ساخته شده اند.

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

تیم Chrome a افزونه Core Web Vitals برای کروم به شما این امکان را می دهد که به عنوان یک توسعه دهنده بازخورد بصری در مورد نحوه عملکرد صفحات خود دریافت کنید.

هنگام ساخت برنامه های کاربردی وب تولیدی، شما همچنین می خواهید بدانید که سایت شما چگونه خود را به بازدیدکنندگان و مشتریان (بالقوه) شما نشان می دهد. حتی ممکن است بخواهید بهبود یا پسرفت این معیارها را در طول زمان پیگیری کنید تا ببینید آیا تغییرات شما تأثیر مطلوبی بر مخاطبان شما دارد یا خیر.

برای کمک به گزارش Core Web Vitals به سرویس تجزیه و تحلیل شما، ما با همکاری Google روش جدیدی به نام معرفی کرده ایم. reportWebVitals که می توان از آن صادر کرد pages/_app.js:

// Will be called once for every metric that has to be reported.
export function reportWebVitals(metric) {
  // These metrics can be sent to any analytics service
  console.log(metric);
}
 
function MyApp({ Component, pageProps }) {
  return Component {...pageProps} />;
}
 
export default MyApp;

برای استفاده از این روش در ترکیب با سرویس تجزیه و تحلیل خود، به بخش «ارسال نتیجه به Google Analytics» در اسناد مراجعه کنید. اگر می خواهید درباره Core Web Vitals بیشتر بدانید، می توانید به web.dev/vitals مراجعه کنید.

اگر روی یک پروژه بزرگ کار می کنید، برخی از شما import اظهارات ممکن است آسیب ببینند ../../../ اسپاگتی:

import Button from '../../../../components/button';

در چنین مواردی به جای واردات نسبی، ممکن است بخواهیم استفاده کنیم واردات مطلق. با فرض اینکه components دایرکتوری در ریشه وجود دارد، ممکن است بخواهیم import عبارات به شکل زیر است:

import Button from 'components/button';

ما مشتاقیم اعلام کنیم که Next.js 9.4 راه‌اندازی واردات مطلق را برای پروژه‌های جاوا اسکریپت و تایپ اسکریپت بسیار آسان می‌کند. تنها کاری که باید انجام دهید این است که اضافه کنید baseUrl پیکربندی به jsconfig.json (پروژه های JS) یا tsconfig.json (پروژه های TS).

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

این اجازه می دهد تا واردات مطلق از . (دایرکتوری ریشه). همچنین با VSCode و سایر ویرایشگرها ادغام می شود و از ناوبری کد و سایر ویژگی های ویرایشگر پشتیبانی می کند.

توجه: اگر قبلاً پیکربندی نام مستعار ماژول Webpack خود را تغییر داده اید تا اجازه واردات مطلق را بدهد، اکنون می توان این پیکربندی را حذف کرد.

علاوه بر این، Next.js 9.4 نیز پشتیبانی می کند paths گزینه ای که به شما امکان می دهد نام مستعار ماژول سفارشی ایجاد کنید. به عنوان مثال، موارد زیر به شما اجازه استفاده می دهد @/design-system به جای components/design-system:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/design-system/*": ["components/design-system/*"]
    }
  }
}

سپس می توانید از نام مستعار خود به این صورت استفاده کنید:

// Imports 'components/design-system/button'
import Button from '@/design-system/button';

باید مشخص کنید baseUrl اگر مشخص کنید paths. می توانید در مورد آن بیشتر بدانید paths گزینه در اسناد TypeScript.

هنگامی که پشتیبانی داخلی Sass در Next.js 9.3 منتشر شد، بازخورد دریافت کردیم مبنی بر اینکه زیرمجموعه‌ای از کاربران می‌خواهند کامپایلر sass را پیکربندی کنند. به عنوان مثال برای پیکربندی includePaths.

این در حال حاضر با کمک امکان پذیر است sassOptions وارد کنید next.config.js:

const path = require('path');
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

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

در حال اجرا next dev در نسخه های قبل از 9.4

در حال اجرا next dev در 9.4

ما از دیدن ادامه رشد در پذیرش Next.js هیجان‌زده هستیم:

• خرج کردیم 1066 مشارکت کنندگان مستقل
• این پروژه در GitHub ستاره دار است 48000 بارها

به انجمن Next.js در بحث های GitHub بپیوندید. Discussions یک فضای اجتماعی است که به شما امکان می دهد با سایر کاربران Next.js ارتباط برقرار کرده و سؤال بپرسید.

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

ما از جامعه خود و همه بازخوردها و نظرات خارجی که به شکل دادن به این نسخه کمک کرد سپاسگزاریم.