Мундариҷа[Пинҳон кардан][Намоиш]
Ҳангоми интихоби китобхона ё чаҳорчӯбаи нармафзор, одатан таҷрибаи таҳиягар ба назар гирифта мешавад.
Вақте ки ман "таҷрибаи таҳиякунанда" -ро зикр мекунам, ман ба он ишора мекунам, ки таҳиягарон воқеан корро чӣ гуна иҷро мекунанд. Таҳиягарон китобхонаҳо ё чаҳорчӯбаҳоеро интихоб мекунанд, ки истифодаашон ҷолиб аст.
Ин яке аз сабабҳои асосии он аст, ки мо ҳоло китобхонаҳо ва чаҳорчӯбаҳои маъмултарин дорем. Ҳамчун таҳиягарон, мо набояд аз сифр оғоз кунем, вақте ки асбобҳои мавҷуда мавҷуданд, ки барои иҷрои вазифаҳоямон ба мо кӯмак мекунанд.
Frameworks қисмҳои нармафзоре мебошанд, ки аз ҷониби таҳиягарон барои сохтани барномаҳо сохта ва истифода мешаванд ва NextJS яке аз онҳост.
Дар ин мақола мо Nextjs, хусусиятҳои калидии он ва чӣ гуна метавонем онро барои сохтани барнома истифода барем. Биёед рост ворид шавем.
Next.js чист?
Next.js чаҳорчӯбаи JavaScript барои зуд ва осон сохтани веб-саҳифаҳои статикӣ ва барномаҳои онлайн дар асоси React мебошад. Он ба шумо имкон медиҳад, ки барномаҳои бузурги вебро барои платформаҳои гуногун, аз ҷумла Windows, Linux ва Mac таҳия кунед.
Шумо бояд бо чаҳорчӯбаи Next.js шинос бошед, агар шумо бо реаксия ҳадди ақалл ошноӣ дошта бошед ва мехоҳед дар бораи экосистемаи реаксия маълумоти бештар гиред.
Гарчанде ки Next.js бо ҳама чизест, ки барои оғоз кардан лозим аст, шумо метавонед байни NPM ва Yarn, JavaScript ва TypeScript, CSS ва SCSS, содироти статикӣ ва ҷойгиркунии бе сервер интихоб кунед.
Вижагиҳо
- Масир ба таври худкор анҷом дода мешавад - Ба шумо лозим нест, ки чизеро танзим кунед, зеро ҳама гуна URL ба системаи файлӣ, ба файлҳои ҷузвдони саҳифаҳо харита шудааст (шумо вариантҳои мутобиқсозӣ доред, албатта).
- Унсурҳои як файли ягона - Илова кардани услубҳои фарогир ба ҷузъ бо истифода аз styled-jsx, ки комилан муттаҳид ва аз ҷониби як даста истеҳсол шудааст, осон аст.
- Боркунии рамзи гарм - Вақте ки Next.js тағироти дар диск сабтшударо муайян мекунад, он саҳифаро дубора бор мекунад.
- Компонентҳои динамикӣ - Шумо метавонед модулҳои JavaScript ва ҷузъҳои реаксияро динамикӣ бор кунед.
- Содироти статикӣ - Next.js ба шумо имкон медиҳад, ки сайти комилан статикиро аз барномаи худ бо фармони содироти навбатӣ содир кунед.
- Мутобиқат бо муҳити зист – Next.js бефосила бо экосистемаҳои JavaScript, Node ва React ҳамгиро мешавад.
- Ба таври худкор тақсим кардани кодҳо - Барои намоиш додани саҳифаҳо танҳо китобхонаҳо ва JavaScript лозиманд. Ба ҷои сохтани файли ягонаи JavaScript, ки дорои ҳамаи кодҳои барнома аст, Next.js оқилона барномаро ба захираҳои зиёд тақсим мекунад.
Чӣ тавр барномаи next.js эҷод кардан мумкин аст?
насби
Шумо метавонед фармони node npx -ро барои насб ва сохтани лоиҳаи Next.js истифода баред.
Ин папка ва ҳамаи файлҳо, конфигуратсияҳо ва ҷузъҳои дигареро, ки барои иҷрои лоиҳаи Next.js лозиманд, тавлид мекунад.
Шумо метавонед барномаро пас аз тавлиди он оғоз кунед.
Саҳифаҳо ва масир
Барои коркарди масирҳо бо Next.js, ба мо лозим нест, ки чаҳорчӯбаи масирро истифода барем. Маршрут бо Next.js насб кардан осон аст. Вақте ки шумо фармони create-next-app-ро барои сохтани барномаи нави Next.js истифода мебаред, барнома ба таври нобаёнӣ папкаеро бо номи "саҳифаҳо" месозад.
Ин ҷузвдони "саҳифаҳо" дар он ҷоест, ки шумо хатсайрҳои худро нигоҳ медоред. Дар натиҷа, ҳар як файли ҷузъҳои реаксия дар зеркаталог ҳамчун масири алоҳида коркард карда мешавад.
Масалан, агар папка ин файлҳоро дар бар гирад:
- индекс.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/ilk-мақола
- localhost/blog/-маколаи дуюм
Бо истифода аз қайди қавс, шумо метавонед дар Next.js масири динамикӣ муайян кунед. Масалан: pages/article/[slug].js
Роҳҳои пайванд
Шумо ҳоло масири аввалини худро анҷом додед. Ман гумон мекунам, ки шумо мепурсед, ки чӣ гуна саҳифаҳоро ба он хатсайрҳо пайваст кунед. Барои ин ба шумо "оянда/пайванд" лозим аст.
Ин аст як мисоли саҳифаи хонагӣ, ки истинод ба саҳифаи Дар бораи онро дар бар мегирад:
Агар шумо хоҳед, ки пайвандро услубӣ кунед, синтаксиси зеринро истифода баред:
Роҳҳои масир
Чӣ мешавад, агар ба шумо лозим аст, ки масирро ба саҳифаи муайян маҷбур кунед? Масалан, вақте ки тугма пахш карда мешавад? Шумо метавонед инро бо истифода аз 'router.push' иҷро кунед:
SEO
Саҳифаҳо дар барномаҳои веб ба ҷуз аз маълумот дар дохили бадани HTML унсурҳои мета (сарлавҳа) талаб мекунанд. Ин талаб мекунад, ки як талаботи иловагӣ бо номи React Helmet дар барномаи React насб карда шавад.
Мо метавонем ҷузъи Head-ро аз оянда/сар дар Next истифода барем, то метамаълумотро ба вебсаҳифаҳои мо ба осонӣ илова кунем, ки дар натиҷаҳои ҷустуҷӯ ва дохилкунӣ намоиш дода мешаванд:
Унсурњои
Ба шумо аксар вақт лозим меояд, ки ҷузъҳо ё файли тарҳрезиро таҳия кунед. Масалан, ҷузъе, ки наворро пешкаш мекунад. Мо ҳоло папкаи саҳифаҳоро истифода бурдем. Чӣ мешавад, агар ҷузъи шумо саҳифаи масир набошад?
Шумо намехоҳед, ки корбар ба саҳифае ба монанди 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) таҷрибаи беҳтаре доштанд, зеро онҳо ба корбар барои дубора бор кардани саҳифа эҳтиёҷ надоштанд ва барои интерактивии бештар иҷозат доданд.
Аммо, азбаски қисми зиёди мавод дар ин гуна барнома танҳо вақте ки он дар браузер иҷро карда мешавад, намоён мешавад, браузерҳои веб дар фаҳмидани мундариҷаи матни чунин барнома душворӣ мекашанд.
Дар натиҷа, сарфи назар аз маъруфияти худ, бисёре аз SPAҳо барои муҳаррикҳои бузурги ҷустуҷӯӣ, ба монанди Google, беном монданд. Next.js ҳоло як механизми мустаҳками дарунсохтро барои намоиши сервер (SSR) ҷузъҳои React дар бар мегирад.
Next.js ба таҳиягарон имкон медиҳад, ки дар давоми раванди сохтани коди JavaScript дар сервер созанд ва ба корбар HTML-и асосӣ ва индексатсияшавандаро пешниҳод кунанд.
тарафдор
- Беҳтарин барои таҷрибаи корбар
- Беҳтарин барои SEO
- Сохтани вебсайти статикии хеле зуд, ки мисли динамикӣ рафтор мекунад
- чандирӣ дар сохтани UI ва UX.
- Афзалиятҳои зиёди рушд
- Дастгирии бузурги ҷомеа
Омӯз
- Вебсайтҳо ё барномаҳо барои сохтан ё таҳия вақти муайян доранд.
- Барои вазифаҳои муайян, Next.js нокифоя аст. Таҳиягарон бояд бо истифода аз абзорҳои Node.js хатсайрҳои динамикӣ созанд.
хулоса
Тавре ки шумо мебинед, Next.js таҳияи барномаҳои React-ро осон мекунад ва ба шумо имкон медиҳад, ки диққататонро ба чизҳои муҳимтарин - мантиқи барнома ва интерфейси интерфейси худ равона кунед. Он ҳама чизро дар бар мегирад, ки барои эҷоди замимаҳои замонавӣ, бо интерфейси бой ва аз API корбаршуда лозим аст.
Он инчунин барои лоиҳаҳои танҳо мундариҷа, ба монанди блогҳо ва вебсайтҳои тиҷоратӣ, аз сабаби қобилияти сохтани саҳифаҳои HTML статикӣ мувофиқ аст.
Бо нашрҳои ҷорӣ, Next.js на танҳо сатҳи баланди таҷрибаи таҳиягаронро нигоҳ медорад, балки инчунин асбобҳоро барои баланд бардоштани самаранокии визуалӣ ва таҷрибаи корбар пешниҳод мекунад ва ояндаи дурахшони ин чаҳорчӯбаро таъмин мекунад.
Дин ва мазҳаб