Мазмуну[Жашыруу][Көрсөтүү]
Программалык камсыздоонун китепканасын же алкагын тандоодо, адатта, иштеп чыгуучунун тажрыйбасы эске алынат.
Мен "иштеп чыгуучунун тажрыйбасы" деп айтканда, мен иштеп чыгуучулар ишти кантип аткарып жатканын айтып жатам. Иштеп чыгуучулар колдонууга жагымдуу болгон китепканаларды же алкактарды тандашат.
Бул бизде азыр эң популярдуу китепканаларга жана алкактарга ээ болушунун негизги себептеринин бири. Иштеп чыгуучулар катары, бизге тапшырмаларды аткарууга жардам берүү үчүн жаратылган куралдар бар болгондо, биз нөлдөн башташыбыз керек эмес.
Алкактар - бул программалык камсыздоонун бөлүктөрү, алар иштеп чыгуучулар тарабынан тиркемелерди куруу үчүн колдонулат жана NextJS алардын бири.
Бул постто биз Nextjs, анын негизги өзгөчөлүктөрү жана аны тиркемени түзүү үчүн кантип колдонсок болорун карап чыгабыз. Келиңиз, дароо кирип кетели.
Next.js деген эмне?
Next.js статикалык веб-баракчаларды жана React негизиндеги онлайн тиркемелерди тез жана оңой куруу үчүн JavaScript негизи. Бул сизге Windows, Linux жана Mac сыяктуу ар кандай платформалар үчүн сонун веб-тиркемелерди иштеп чыгууга мүмкүндүк берет.
Эгерде сиз реакцияны минималдуу деңгээлде билсеңиз жана реакциянын экосистемасы жөнүндө көбүрөөк билгиңиз келсе, Next.js алкактары менен тааныш болушуңуз керек.
Next.js баштоо үчүн керектүү нерселердин баары менен келгенине карабастан, сиз NPM жана Yarn, JavaScript жана TypeScript, CSS жана SCSS, статикалык экспорт жана серверсиз жайылтуунун ортосунда тандай аласыз.
Өзгөчөлүктөрү
- Маршрутизация автоматтык түрдө аткарылат – Эч нерсени конфигурациялоонун кереги жок, анткени каалаган URL файл тутумуна, барак папкасындагы файлдарга (албетте, сизде ыңгайлаштыруу параметрлери бар).
- Бир файлдын компоненттери – толугу менен интеграцияланган жана ошол эле команда тарабынан даярдалган styled-jsx аркылуу компонентке масштабдуу стилдерди кошуу оңой.
- Ысык кодду кайра жүктөө – Next.js дискке сакталган өзгөртүүнү аныктаганда, ал баракты кайра жүктөйт.
- Динамикалык компоненттер – Сиз JavaScript модулдарын жана React Components динамикалык жүктөй аласыз.
- Статикалык экспорт - Next.js кийинки экспорт буйругу менен колдонмоңуздан толугу менен статикалык сайтты экспорттоого мүмкүндүк берет.
- Айлана-чөйрөгө шайкештик - Next.js JavaScript, Node жана React экосистемалары менен үзгүлтүксүз интеграцияланат.
- Коддорду автоматтык түрдө бөлүү - Барактарды көрсөтүү үчүн талап кылынган китепканалар жана JavaScript гана колдонулат. Колдонмонун бардык кодун камтыган бир JavaScript файлын түзүүнүн ордуна, Next.js колдонмону акылдуу түрдө көптөгөн ресурстарга бөлөт.
Next.js тиркемесин кантип түзүүгө болот?
орнотуу
Next.js долбоорун орнотуу жана куруу үчүн node npx буйругун колдоно аласыз.
Бул папканы жана Next.js долбоорун иштетүү үчүн талап кылынган бардык файлдарды, конфигурацияларды жана башка нерселерди жаратат.
Колдонмону ал түзүлгөндөн кийин иштете аласыз.
Барактар жана Багыттоо
Next.js менен маршруттарды иштетүү үчүн, биз маршрутташтыруу алкагын колдонуунун кереги жок. Next.js менен маршрутту жөндөө оңой. Жаңы Next.js колдонмосун түзүү үчүн create-next-app буйругун колдонгонуңузда, колдонмо демейки боюнча "беттер" деп аталган папканы түзөт.
Бул "беттер" папкасы сиз өз маршруттарыңызды сактай турган жер. Натыйжада, подкаталогдогу ар бир реакция компоненттеринин файлы өзүнчө маршрут катары иштетилет.
Мисалы, папка ошол файлдарды камтыса:
- index.js
- about.js
- aricles.js
Бул файл автоматтык түрдө үч жол менен өзгөртүлөт:
- Индекс барагы localhost/index
- Localhost/about жөнүндө бет
- Блог баракчасы localhost/макалалар
about.js барагынын мисалы төмөндө көрсөтүлгөн. Көрүнүп тургандай, баракча жөнүндө эч нерсе берилген эмес. Бул жөн гана стандарттуу React функционалдык компоненти.
жолдор
Уюшкан каттамдарды түзүү үчүн, адегенде сиз подполковник түзүшүңүз керек. Мисалы: баракчалар/макалалар. Ошол папканын ичинде 'contact.js' реакция компонентиңизди түзүңүз жана ал localhost/articles/contact барагын жаратат.
Эгер сиз бир файлды pages/articles.js, экинчисин pages/articles/index.js коюңуз. Экөө тең бир эле жолду чагылдырат localhost/blog. Мындай кырдаалда Next.js жөн гана article.js файлын көрсөтөт. Ар бир блог постунун өз жолу бар динамикалык маршруттар жөнүндө эмне айтууга болот:
- localhost/blog/first-article
- localhost/blog/-экинчи макала
кашаа белгилер колдонуу, сиз Next.js динамикалык маршрут аныктай аласыз. Мисалы: pages/article/[slug].js
Маршруттар шилтемеси
Сиз азыр биринчи маршрутуңузду бүтүрдүңүз. Сиз барактарды ошол маршруттарга кантип туташтырууну сурап жатасыз деп ойлойм. Бул үчүн сизге "кийинки/шилтеме" керек болот.
Бул жерде жөнүндө бетке шилтемени камтыган башкы беттин мисалы:
Шилтемени стилдештирүүнү кааласаңыз, төмөнкү синтаксисти колдонуңуз:
Багыттоо Маршруттары
Белгилүү бир бетке багыттоону мажбурлашыңыз керек болсочы? Мисалы, баскыч басылганда? Муну 'router.push' колдонуу менен аткара аласыз:
SEO
Веб тиркемелериндеги барактар HTML корпусунун ичиндеги маалыматтардан тышкары мета (баш) элементтерди талап кылат. Бул React Тиркемесинде React Helmet деп аталган кошумча талапты орнотууну талап кылат.
Издөө натыйжаларында жана жалгаштырууларда көрсөтүлө турган веб-баракчаларыбызга метаберилиштерди оңой кошуу үчүн Кийинкиден/башкадан Head компонентин колдоно алабыз:
компоненттери
Сиз көп учурда компоненттерди же макет файлын иштеп чыгышыңыз керек болот. Мисалы, навигация панелин көрсөткөн компонент. Биз азыр эле барактар папкасын колдонуп келдик. Эгер сиздин компонентиңиз маршрут баракчасы болбошу керек болсочы?
Сиз колдонуучунун localhost/navbar сыяктуу баракка өтүшүн каалабайсыз. Эгер сиз Navbar.js компонентин баракчалар папкасына жайгаштырсаңыз, анда ушундай болот. кырдаалда эмне кылуу керек?
Жөн гана бардык "бет эмес" компоненттериңизди өзүнчө папкага сактаңыз. Next.js долбоорлорунун көбү 'компоненттер' деген лакапты колдонушат жана бул папка долбооруңуздун түпкү папкасында түзүлөт.
Баш компоненти
Баштапкы бет жүктөө сервер тарабында Next.js тарабынан көрсөтүлөт. Ал муну сиздин баракчаңыздын HTMLди өзгөртүү менен жасайт. баш бөлүм камтылган.
Next.js Head компоненти аталыш жана мета сыяктуу баш бөлүм тегдерин берүү үчүн колдонулат. Head компоненти Layout компонентинин бул мисалында колдонулат.
404 бет түзүү табылган жок
Өзүңүздүн 404 ката бетиңизди жасоо мүмкүн. Сиз билдирүүнү ыңгайлаштырууну же өз баракчаңыздын дизайнын кошууну кааласаңыз болот. Барактар папкасында 404.js файлын түзүңүз.
404 катасы пайда болгондо, Next.js автоматтык түрдө бул баракка багыттайт. Бул жерде жекелештирилген 404 барактын мисалы:
Сервер тараптан берилиштерди алуу
Клиент тарабынан берилиштерди жүктөөнүн ордуна, Next.js сизге баштапкы маалыматтардын популяциясын жүргүзүүгө мүмкүндүк берет, бул серверден мурунтан эле толтурулган маалыматтар менен баракты жөнөтүүнү билдирет.
Сервер тараптагы маалыматтарды алуу үчүн эки тандооңуз бар:
- Ар бир суроо боюнча маалыматтар алынышы керек.
- Курулуш процессинде бир гана жолу маалымат алыңыз (статикалык сайт)
Ар бир суроо боюнча маалыматтарды алуу
getServerSideProps ыкмасы ар бир суроо-талапты сервер тарабында көрсөтүү үчүн колдонулат. Бул функция сиздин компонент файлыңыздын аягында киргизилиши мүмкүн. Next.js сиздин компоненттик бутаңызды автоматтык түрдө getServerSideProps объектисине толтурат, эгерде ал функция сиздин компонент файлыңызда болсо.
Куруу учурунда дайындарды алуу
GetStaticProps ыкмасы куруу учурунда сервер тарабын көрсөтүү үчүн колдонулат. Бул функция сиздин компонент файлыңыздын аягында киргизилиши мүмкүн. Бул ыкма сервердик кодду иштетет жана GET суроо-талабын серверге жөнөтөт, бирок биздин долбоор аяктаганда бир гана жолу.
Эмне үчүн Next.js үйрөнүшүң керек?
Мунун себептеринин бири Next.js реакттын үстүнө курулган, бул үчүн алдыңкы өнүккөн инструменттер. колдонуучу интерфейстерин түзүү бул веб-тиркемелерди иштеп чыгуу үчүн менин сүйүктүү тандоом.
Бирок Next.js өз ишин жакшы аткарбаса, бул жетишсиз болмок... туурабы?
Ошентип, ал так эмне кылат?
Аны түшүнүү үчүн алгач бир нече түшүнүктөрдү аныкташыбыз керек. Next.js популярдуулукка ээ болду, анткени ал көптөгөн веб-иштеп чыгуучулар кардар тараптагы желе колдонмолору менен болгон көйгөйдү чечкен (браузерде). Бул бир беттик тиркемелер (SPA) жакшыраак тажрыйбага ээ болгон, анткени алар колдонуучуга баракты кайра жүктөөнүн кереги жок болчу жана көбүрөөк интерактивдүүлүккө жол берген.
Бирок, ушул сыяктуу колдонмодогу материалдардын негизги бөлүгү ал браузерде аткарылганда гана көрүнгөндүктөн, веб жөрмөлөгүчтөр мындай колдонмонун тексттик мазмунун түшүнүү кыйынга турат.
Натыйжада, популярдуулугуна карабастан, көптөгөн SPAлар Google сыяктуу чоң издөө системалары үчүн анонимдүү бойдон калууда. Next.js азыр React компоненттеринин сервердик рендеринги (SSR) үчүн бекем орнотулган механизмди камтыйт.
Next.js иштеп чыгуучуларга куруу процессинде серверде JavaScript кодун курууга жана колдонуучуга негизги, индекстелүүчү HTMLди берүүгө мүмкүндүк берет.
жакшы
- Колдонуучу тажрыйбасы үчүн сонун
- SEO үчүн сонун
- Динамикалык сыяктуу иштеген супер-тез статикалык веб-сайтты куруңуз
- UI жана UX курууда ийкемдүүлүк.
- Көптөгөн өнүгүү артыкчылыктары
- Улуу коомчулуктун колдоосу
жактары
- Вебсайттарда же тиркемелерде курууга же иштеп чыгууга белгилүү бир убакыт бар.
- Кээ бир тапшырмалар үчүн Next.js жетишсиз. Иштеп чыгуучулар Node.js куралдарын колдонуу менен динамикалык маршруттарды түзө алышы керек.
жыйынтыктоо
Көрүнүп тургандай, Next.js React тиркемесин иштеп чыгууну жөнөкөйлөтүп, эң маанилүү нерсеге – колдонмоңуздун логикасына жана UIге көңүл бурууга мүмкүндүк берет. Ал заманбап, алдыңкы жана API менен иштеген колдонмолорду түзүү үчүн зарыл болгон нерселердин бардыгын камтыйт.
Ал статикалык HTML баракчаларды түзө алгандыктан, блогдор жана бизнес веб-сайттары сыяктуу мазмундуу долбоорлорго да ылайыктуу.
Учурдагы чыгарылыштары менен Next.js иштеп чыгуучунун жогорку тажрыйбасын гана сактабастан, визуалдык аткарууну жана колдонуучу тажрыйбасын жогорулатуу үчүн куралдарды берет, бул алкактын жаркын келечегин камсыз кылат.
Таштап Жооп