មាតិកា[លាក់][បង្ហាញ]
នៅពេលជ្រើសរើសបណ្ណាល័យកម្មវិធី ឬក្របខ័ណ្ឌ បទពិសោធន៍របស់អ្នកអភិវឌ្ឍន៍ជាធម្មតាត្រូវបានយកមកពិចារណា។
នៅពេលខ្ញុំនិយាយអំពី "បទពិសោធន៍អ្នកអភិវឌ្ឍន៍" ខ្ញុំកំពុងសំដៅទៅលើរបៀបដែលអ្នកអភិវឌ្ឍន៍ពិតជាធ្វើការងារនេះ។ អ្នកអភិវឌ្ឍន៍ជ្រើសរើសបណ្ណាល័យ ឬក្របខ័ណ្ឌដែលរីករាយក្នុងការប្រើប្រាស់។
នេះគឺជាហេតុផលចម្បងមួយ ដែលហេតុអ្វីបានជាឥឡូវនេះយើងមានបណ្ណាល័យ និងក្របខ័ណ្ឌដែលពេញនិយមបំផុត។ ក្នុងនាមជាអ្នកអភិវឌ្ឍន៍ យើងមិនចាំបាច់ចាប់ផ្តើមពីដំបូងឡើយ នៅពេលដែលមានឧបករណ៍ដែលមានស្រាប់ត្រូវបានបង្កើតឡើង ដើម្បីជួយយើងក្នុងកិច្ចការរបស់យើង។
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 ថ្មី កម្មវិធីនឹងបង្កើត folder ហៅថា 'pages' តាមលំនាំដើម។
ថត 'ទំព័រ' នេះគឺជាកន្លែងដែលអ្នករក្សាផ្លូវរបស់អ្នក។ ជាលទ្ធផល ឯកសារសមាសធាតុប្រតិកម្មនីមួយៗនៅក្នុងថតរងនឹងត្រូវបានគ្រប់គ្រងជាផ្លូវដាច់ដោយឡែក។
ឧទាហរណ៍ ប្រសិនបើ folder មានឯកសារទាំងនោះ៖
- index.js ។
- អំពី.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/-second-article
ដោយប្រើសញ្ញាតង្កៀប អ្នកអាចកំណត់ផ្លូវថាមវន្តនៅក្នុង Next.js ។ ឧទាហរណ៍៖ pages/article/[slug].js
តំណភ្ជាប់ផ្លូវ
ឥឡូវនេះ អ្នកបានបញ្ចប់ផ្លូវដំបូងរបស់អ្នក។ ខ្ញុំស្មានថាអ្នកកំពុងសួរពីរបៀបភ្ជាប់ទំព័រទៅផ្លូវទាំងនោះ។ អ្នកនឹងត្រូវការ 'បន្ទាប់/តំណ' ដើម្បីធ្វើដូច្នេះបាន។
នេះជាឧទាហរណ៍នៃទំព័រដើមដែលរួមបញ្ចូលតំណភ្ជាប់ទៅកាន់ទំព័រអំពី៖
ប្រសិនបើអ្នកចង់ធ្វើរចនាប័ទ្មតំណ សូមប្រើវាក្យសម្ព័ន្ធខាងក្រោម៖
ប្តូរទិសផ្លូវ
ចុះបើអ្នកត្រូវការបង្ខំប្តូរទិសទៅទំព័រជាក់លាក់មួយ? ឧទាហរណ៍នៅពេលដែលប៊ូតុងមួយត្រូវបានចុច? អ្នកអាចសម្រេចបានដោយប្រើ 'router.push'៖
SEO
ទំព័រនៅក្នុងកម្មវិធីបណ្តាញទាមទារធាតុមេតា (ក្បាល) បន្ថែមលើទិន្នន័យនៅក្នុងតួ HTML ។ វានឹងត្រូវការការដំឡើងតម្រូវការបន្ថែមដែលមានឈ្មោះថា React Helmet នៅក្នុងកម្មវិធី React ។
យើងអាចប្រើសមាសភាគក្បាលពីបន្ទាប់/ក្បាលក្នុង Next ដើម្បីងាយស្រួលបន្ថែមទិន្នន័យមេតាទៅគេហទំព័ររបស់យើងដែលនឹងត្រូវបានបង្ហាញនៅក្នុងលទ្ធផលស្វែងរក និងបង្កប់៖
សមាសភាគ
ជាញឹកញាប់ អ្នកនឹងត្រូវបង្កើតសមាសធាតុ ឬឯកសារប្លង់។ ឧទាហរណ៍ សមាសភាគដែលបង្ហាញរបាររុករក។ យើងទើបតែបានប្រើថតទំព័រមកទល់ពេលនេះ។ ចុះបើសមាសធាតុរបស់អ្នកមិនមានន័យថាជាទំព័រផ្លូវ?
អ្នកមិនចង់ឱ្យអ្នកប្រើប្រាស់រុករកទៅទំព័រដូចជា localhost/navbar ទេ។ ប្រសិនបើអ្នកដាក់សមាសភាគ Navbar.js នៅក្នុងថតទំព័រ នោះជាអ្វីដែលនឹងកើតឡើង។ តើអ្នកគួរធ្វើអ្វីក្នុងស្ថានភាព?
គ្រាន់តែរក្សាទុកសមាសធាតុ 'មិនមែនទំព័រ' របស់អ្នកទាំងអស់នៅក្នុងថតដាច់ដោយឡែកមួយ។ គម្រោង Next.js ភាគច្រើនប្រើ moniker 'components' ហើយថតនេះត្រូវបានបង្កើតនៅក្នុងថត root នៃគម្រោងរបស់អ្នក។
សមាសភាគក្បាល
ការផ្ទុកទំព័រដំបូងត្រូវបានបង្ហាញដោយ Next.js នៅផ្នែកខាងម៉ាស៊ីនមេ។ វាធ្វើដូចនេះដោយការកែប្រែ HTML នៃទំព័ររបស់អ្នក។ ផ្នែកក្បាលត្រូវបានរួមបញ្ចូល។
សមាសភាគក្បាល Next.js ត្រូវបានប្រើដើម្បីផ្តល់ស្លាកផ្នែកបឋមកថា ដូចជាចំណងជើង និងមេតា។ សមាសភាគក្បាលត្រូវបានប្រើនៅក្នុងឧទាហរណ៍នៃសមាសភាគប្លង់នេះ។
រកមិនឃើញទំព័រ 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 រួមបញ្ចូលយន្តការដែលភ្ជាប់មកជាមួយដ៏រឹងមាំជាងមុនសម្រាប់ការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេ (SSR) នៃសមាសធាតុ React ។
Next.js អនុញ្ញាតឱ្យអ្នកអភិវឌ្ឍន៍បង្កើតកូដ JavaScript នៅលើម៉ាស៊ីនមេកំឡុងពេលដំណើរការបង្កើត និងផ្តល់នូវ HTML ជាមូលដ្ឋានដែលអាចធ្វើលិបិក្រមបានដល់អ្នកប្រើប្រាស់។
គុណសម្បត្តិ
- ល្អសម្រាប់បទពិសោធន៍អ្នកប្រើប្រាស់
- ល្អសម្រាប់ SEO
- បង្កើតគេហទំព័រឋិតិវន្តលឿនរហ័សដែលមានឥរិយាបថដូចថាមវន្ត
- ភាពបត់បែនក្នុងការសាងសង់ UI & UX ។
- អត្ថប្រយោជន៍អភិវឌ្ឍន៍ជាច្រើន។
- ការគាំទ្រសហគមន៍ដ៏អស្ចារ្យ
គុណវិបត្តិ
- គេហទំព័រ ឬកម្មវិធីមានពេលវេលាជាក់លាក់ក្នុងការសាងសង់ ឬអភិវឌ្ឍ។
- សម្រាប់កិច្ចការជាក់លាក់ Next.js មិនគ្រប់គ្រាន់ទេ។ អ្នកអភិវឌ្ឍន៍គួរតែអាចបង្កើតផ្លូវថាមវន្តដោយប្រើឧបករណ៍ Node.js ។
សន្និដ្ឋាន
ដូចដែលអ្នកអាចឃើញ Next.js សម្រួលដល់ការអភិវឌ្ឍន៍កម្មវិធី React និងអនុញ្ញាតឱ្យអ្នកផ្តោតលើអ្វីដែលសំខាន់បំផុត – តក្កវិជ្ជាកម្មវិធី និង UI របស់អ្នក។ វារួមបញ្ចូលអ្វីគ្រប់យ៉ាងដែលត្រូវការដើម្បីបង្កើតកម្មវិធីទំនើប ផ្នែកខាងមុខ និងកម្មវិធីដែលដំណើរការដោយ API ។
វាក៏សមរម្យសម្រាប់គម្រោងសម្រាប់តែខ្លឹមសារ ដូចជាប្លុក និងគេហទំព័រអាជីវកម្ម ដោយសារតែសមត្ថភាពរបស់វាក្នុងការបង្កើតទំព័រ HTML ឋិតិវន្ត។
ជាមួយនឹងការបោះពុម្ពបច្ចុប្បន្ន Next.js មិនត្រឹមតែរក្សាបាននូវកម្រិតខ្ពស់នៃបទពិសោធន៍អ្នកអភិវឌ្ឍន៍ប៉ុណ្ណោះទេ ប៉ុន្តែថែមទាំងផ្តល់នូវឧបករណ៍សម្រាប់ការបង្កើនការអនុវត្តដែលមើលឃើញ និងបទពិសោធន៍អ្នកប្រើប្រាស់ ដែលធានាបាននូវអនាគតដ៏ភ្លឺស្វាងសម្រាប់ក្របខ័ណ្ឌនេះ។
សូមផ្ដល់យោបល់