Мазмұны[Жасыру][Көрсету]
Бағдарламалық жасақтама кітапханасын немесе құрылымды таңдағанда, әдетте әзірлеушінің тәжірибесі ескеріледі.
«Әзірлеушінің тәжірибесі» туралы айтқанымда, мен әзірлеушілер жұмысты қалай орындайтынын айтып отырмын. Әзірлеушілер пайдалануға ыңғайлы кітапханаларды немесе фреймворктарды таңдайды.
Бұл қазір бізде ең танымал кітапханалар мен фреймворктардың болуының негізгі себептерінің бірі. Әзірлеушілер ретінде бізге тапсырмаларды орындауға көмектесу үшін жасалған құралдар бар кезде нөлден бастаудың қажеті жоқ.
Фреймворктар – әзірлеушілер қолданбаларды құру үшін жасайтын және пайдаланатын бағдарламалық жасақтаманың бөліктері және NextJS олардың бірі.
Бұл постта біз Nextjs, оның негізгі мүмкіндіктері және оны қолданбаны құру үшін қалай пайдалануға болатынын қарастырамыз. Бірден секірейік.
Next.js дегеніміз не?
Келесі.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/бірінші мақала
- localhost/blog/-екінші мақала
Жақша белгілерін пайдалану арқылы Next.js ішінде динамикалық бағытты анықтауға болады. Мысалы: pages/article/[slug].js
Бағыттарды байланыстыру
Сіз бірінші маршрутыңызды аяқтадыңыз. Сіз беттерді сол маршруттарға қалай қосу керектігін сұрап жатырсыз деп ойлаймын. Ол үшін сізге «келесі/сілтеме» керек.
Мұнда туралы бетіне сілтеме бар басты беттің мысалы берілген:
Сілтемені стильдеуді қаласаңыз, келесі синтаксисті пайдаланыңыз:
Бағыттарды қайта бағыттау
Белгілі бір бетке қайта бағыттауды мәжбүрлеу қажет болса ше? Мысалы, түйме басылғанда? Мұны «router.push» арқылы орындауға болады:
SEO
Веб қолданбаларындағы беттер HTML корпусындағы деректерге қосымша мета (бас) элементтерін қажет етеді. Бұл React қолданбасында React Helmet деп аталатын қосымша талапты орнатуды қажет етеді.
Іздеу нәтижелерінде және ендірулерде көрсетілетін веб-беттерімізге метадеректерді оңай қосу үшін біз Next ішіндегі келесі/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 бағдарламасының алдыңғы қатарлы әзірлеу құралдары жинағы React үстіне құрастырылған. пайдаланушы интерфейстерін құру бұл веб-қолданбаларды жобалаудағы менің сүйікті таңдауым.
Бірақ Next.js өз ісінде жақсы болмаса, жеткіліксіз болар еді... дұрыс па?
Сонымен, ол нақты не істейді?
Оны түсіну үшін алдымен бірнеше ұғымды анықтауымыз керек. Next.js танымал болды, себебі ол көптеген веб-әзірлеушілер клиенттік веб-бағдарламалармен (шолғышта) болған мәселені шешті. Бұл бір беттік қолданбалар (SPA) жақсырақ тәжірибеге ие болды, өйткені олар пайдаланушыға бетті қайта жүктеуді қажет етпеді және көбірек интерактивтілікке мүмкіндік берді.
Дегенмен, мұндай қолданбадағы материалдың негізгі бөлігі шолғышта орындалғанда ғана көрінетіндіктен, веб-тексерушілер мұндай қолданбаның мәтіндік мазмұнын түсіну қиынға соғады.
Нәтижесінде, танымал болғанына қарамастан, көптеген SPAs Google сияқты үлкен іздеу жүйелеріне жасырын болып қалды. Next.js енді React құрамдастарын серверлік рендерингке (SSR) арналған сенімдірек ендірілген механизмді қамтиды.
Next.js әзірлеушілерге құрастыру процесі кезінде серверде JavaScript кодын құрастыруға және пайдаланушыға негізгі, индекстелетін HTML беруге мүмкіндік береді.
артықшылықтары
- Пайдаланушы тәжірибесі үшін тамаша
- SEO үшін тамаша
- Динамикалық сияқты әрекет ететін өте жылдам статикалық веб-сайтты жасаңыз
- UI және UX құрудағы икемділік.
- Көптеген даму артықшылықтары
- Үлкен қауымдастықтың қолдауы
Минус
- Веб-сайттарда немесе қолданбаларда құру немесе әзірлеу үшін белгілі бір уақыт бар.
- Белгілі бір тапсырмалар үшін Next.js жеткіліксіз. Әзірлеушілер Node.js құралдарын пайдаланып динамикалық маршруттарды құра алуы керек.
қорытынды
Көріп отырғаныңыздай, Next.js React қолданбасын әзірлеуді жеңілдетеді және ең маңызды нәрсеге – қолданба логикасына және UI интерфейсіне назар аударуға мүмкіндік береді. Ол заманауи, интерфейске бай және API қолдайтын қолданбаларды жасау үшін қажеттінің барлығын қамтиды.
Сондай-ақ ол тұрақты HTML беттерін құру мүмкіндігіне байланысты блогтар мен бизнес веб-сайттары сияқты тек мазмұнды жобаларға сәйкес келеді.
Ағымдағы шығарылымдармен Next.js әзірлеушілер тәжірибесінің жоғары деңгейін қолдап қана қоймайды, сонымен қатар осы құрылымның жарқын болашағын қамтамасыз ететін визуалды өнімділік пен пайдаланушы тәжірибесін арттыруға арналған құралдарды береді.
пікір қалдыру