Next.js 9.3 нь статик сайт үүсгэх, 404 оновчлол болон бусад зүйлсийн дэмжлэгтэй ирдэг

Дараа нь.js 9.3

Next.js бол сервер тал дээр үзүүлэхэд зориулсан React бүтэц юм, үүнийг бүтээгчид нь React програмуудад зориулагдсан тэг тохиргооны нэг командын багаж хэлбэрээр танилцуулдаг.

Энэ хүрээ нь React урд талын програмыг хялбархан үүсгэх боломжийг олгодог нийтлэг бүтцийг бий болгодог болон сервер талын рендеринг ил тод удирддаг. Next.js хувилбар 9.3 Даваа гарагт шинэ онцлог, зарим сайжруулалттайгаар нээлтээ хийсэн бөгөөд үүнд бид статик сайтуудыг бий болгох чадварыг гол шинэлэг зүйл болгон ашиглаж болно.

Next.js 9.3 дээр ямар шинэ зүйл байна вэ?

Next.js 9.0 гарснаар, хүрээ нь статик автомат оновчлолын тухай ойлголтыг нэвтрүүлсэн. A хуудсанд хориглох шаардлага байхгүй getInitialProps гэх мэт өгөгдлийг сэргээх, автоматаар HTML хэлбэрээр үзүүлэх болно нэгэнт баригдсан.

Өгөгдлийг задлах шаардлагыг хааж байсан ч гэсэн хөрвүүлэх үед статик HTML дээр хуудас хийхийг хүсч болох бусад тохиолдол байдаг. Энэ нь жишээлбэл, маркетингийн хуудсуудын тухай юм агуулгын менежментийн систем (CMS) -ээр ажилладаг.

Next.js 9.3 нь өгөгдлийг сэргээх хоёр шинэ аргыг танилцуулж байна: getStaticProps болон getServerSideProps.

Эдгээр шинэ аргууд тэдгээр нь getInitialProps загвараас олон давуу талтай байдагSSG (Static Side Generation) ба SSR (Server Side Rendering) болох зүйлсийн хооронд тодорхой ялгаа байгаа тул. Эдгээр нь API нэмэлтүүд юм.

Бүх шинэ функцууд нь хоцрогдсон нийцтэй ба аажмаар баталж болно. Элэгдэл байхгүй бөгөөд getInitialProps хэвийн ажиллаж байна. Динамик чиглүүлэлтийг олж авахын тулд getStaticPaths параметрийг нэмсэн.

  • getStaticProps: барилгын явцад өгөгдөл олж авах боломжийг олгодог;
  • getStaticPaths - Өгөгдөлд суурилсан динамик чиглүүлэлтийг зааж өгөх;
  • getServerSideProps: хүсэлт тус бүрт өгөгдөл авах боломжийг олгодог.

Энэхүү шинэ хувилбараас ялгарах өөр нэг өөрчлөлт бол урьдчилж харах горимын дэмжлэг юм. GetStaticProps-ийг танилцуулж байна Next.js дээр шинэ боломжийг нээж өгдөг, Next.js үзүүлэх чадварыг тодорхой нөхцөлд шаардлагаар ашиглах гэх мэт.

Жишээлбэл, ноорог урьдчилж үзэх үед CMS-д та статик үзүүлэлтийг алгасахыг хүсэх болно хуудсыг ноорог агуулгын дагуу эрэлтэд оруулах нийтлэгдсэн агуулгын оронд. Next.js-ийг зөвхөн энэ тохиолдолд статик бүтцийг алгасахыг хүсч байна. Next.js багийн мэдээлснээр урьдчилж харах горим нь танд үүнийг хийх боломжийг олгодог.

Горим урьдчилж харах нь хэрэглэгчдэд үүсгэсэн хуудсыг алгасах боломжийг олгодог Хүсэлтийн дагуу буцах статикаар (SSR) ноорог хуудас, жишээлбэл CMS. Гэхдээ энэ нь зөвхөн тодорхой CMS системээр хязгаарлагдахгүй. Урьдчилан харах горим нь getStaticProps болон getServerSideProps-тэй шууд нэгтгэгддэг бөгөөд ингэснээр ямар ч төрлийн өгөгдлийг сэргээх шийдлээр ашиглах боломжтой болно.

Next.js 9.2 нь суулгасан CSS-ийн дэмжлэгийг нэмсэн, гэхдээ Next.js 9.3 нь Sass-д дэмжлэг нэмсэн. Дэлхийн хэв маягийн хүснэгтүүд болон CSS модулиуд, мөн суулгагдсан CSS дэмжигддэг. Next.js нь Sass файлуудтай CSS модулиудыг дэмждэг болсон файлыг нэрлэх конвенцийг ашиглах [нэр] .module.scss. Өмнө нь Next.js 5+ дээр суулгасан next-sass-ийн дэмжлэгээс ялгаатай нь дэлхийн Sass болон CSS модулиуд одоо зэрэгцэн орших боломжтой болжээ.

Модулиуд CSS нь өвөрмөц ангийн нэрийг автоматаар үүсгэх замаар Sass-ийг дотооддоо удирдах боломжийг танд олгоно.

9.0 хувилбартай Next.js-ээс, HTML дээр автоматаар хийгдээгүй хуудас байсан статик: 404 хуудас.

Үүний цаана байгаа гол шалтгаан нь 404-ийг хооллож байсан алдааны хуудсыг 404-ээс илүү боловсруулсан байх явдал юм. Жишээлбэл, алдаануудыг бас зохицуулж байсан. 404 хуудсыг байхгүй замд зориулж гаргасан тул хуудсыг захиалгаар үзүүлэх нь өртөг өндөр, ачаалал нэмэгдэхэд хүргэж болзошгүй юм сервер. Framework хувилбар 9.3 нь зүйлийг сайжруулж, автоматаар статик оновчлолыг санал болгодог 404 хуудас.

Одоо таны хүсэлтэд error.js гаалийн хуудсыг оруулаагүй тохиолдолд файл Next.js нь 404 хуудсыг автоматаар статикаар үүсгэдэг 404-т үйлчлэх үед үүнийг ашигладаг бөгөөд энэ нь автоматаар хийгддэг тул өөрчлөлт оруулах шаардлагагүй болно.

Та мөн энэ хуудсыг өөрчлөх боломжтой. Анхдагч 404 хуудсыг солихын тулд та 404.js файл үүсгэж болно.

Хэрэв та энэ талаар илүү ихийг мэдэхийг хүсвэл зөвлөгөө авч болно дараах холбоос. 


Нийтлэлийн агуулга нь бидний зарчмуудыг баримталдаг редакцийн ёс зүй. Алдааны талаар мэдээлэхийн тулд товшино уу энд байна.

Сэтгэгдэл бичих эхний хүн бай

Сэтгэгдэлээ үлдээгээрэй

Таны и-мэйл хаяг хэвлэгдсэн байх болно. Шаардлагатай талбарууд нь тэмдэглэгдсэн байна *

*

*

  1. Мэдээллийг хариуцах: Мигель Анхель Гатан
  2. Мэдээллийн зорилго: СПАМ-ыг хянах, сэтгэгдлийн менежмент.
  3. Хууль ёсны байдал: Таны зөвшөөрөл
  4. Мэдээллийн харилцаа холбоо: Хуулийн үүргээс бусад тохиолдолд мэдээллийг гуравдагч этгээдэд дамжуулахгүй.
  5. Өгөгдөл хадгалах: Occentus Networks (ЕХ) -с зохион байгуулсан мэдээллийн сан
  6. Эрх: Та хүссэн үедээ мэдээллээ хязгаарлаж, сэргээж, устгаж болно.