የሶፍትዌር ቤተ-መጽሐፍትን ወይም ማዕቀፍን በሚመርጡበት ጊዜ የገንቢው ልምድ ብዙውን ጊዜ ግምት ውስጥ ይገባል.
“የገንቢ ልምድን” ስጠቅስ፣ ገንቢዎች በትክክል ስራውን እንዴት እንደሚሰሩት ነው። ገንቢዎች ለመጠቀም አስደሳች የሆኑ ቤተ-መጻሕፍትን ወይም ማዕቀፎችን ይመርጣሉ።
አሁን በጣም ተወዳጅ የሆኑ ቤተ-መጻሕፍት እና ማዕቀፎች እንዲኖሩን ከሚያደርጉት አንዱ ምክንያት ይህ ነው። እንደ ገንቢዎች ለተግባሮቻችን የሚረዱን የተፈጠሩ መሳሪያዎች ሲኖሩ ከባዶ መጀመር የለብንም ።
Frameworks አፕሊኬሽኖችን ለመሥራት በገንቢዎች የተፈጠሩ እና የሚጠቀሙባቸው ሶፍትዌሮች ናቸው፣ እና NextJS አንዱ ነው።
በዚህ ልጥፍ፣ Nextjsን፣ ቁልፍ ባህሪያቱን እና አፕሊኬሽን ለመገንባት እንዴት እንደምንጠቀምበት እንመለከታለን። በቀጥታ እንግባ።
Next.js ምንድን ነው?
ቀጣይ ቋሚ ድረ-ገጾችን እና ምላሽ ላይ የተመሰረቱ የመስመር ላይ መተግበሪያዎችን በፍጥነት እና በቀላሉ ለመገንባት የጃቫ ስክሪፕት ማዕቀፍ ነው። ዊንዶውስ፣ ሊኑክስ እና ማክን ጨምሮ ለተለያዩ መድረኮች ምርጥ የድር መተግበሪያዎችን እንዲነድፍ ያስችሎታል።
ስለ ምላሽ ምላሽ በትንሹ የሚያውቁት ከሆነ እና ስለ አጸፋዊ ስነ-ምህዳሩ የበለጠ ለማወቅ ከፈለጉ ከ Next.js ማዕቀፍ ጋር በደንብ ማወቅ አለብዎት።
ምንም እንኳን Next.js ለመጀመር የሚያስፈልግዎትን ሁሉ ይዞ ቢመጣም በNPM እና Yarn፣ JavaScript እና TypeScript፣ CSS እና SCSS፣ Static Export እና Serverless Deployment መካከል መምረጥ ትችላለህ።
ዋና መለያ ጸባያት
- ማዘዋወር በራስ-ሰር ይከናወናል - ምንም ነገር ማዋቀር አያስፈልግዎትም ምክንያቱም ማንኛውም ዩአርኤል በፋይል ሲስተም ፣ በገጾች አቃፊ ውስጥ ላሉ ፋይሎች (በእርግጥ የማበጀት አማራጮች አሉዎት)።
- የአንድ ነጠላ ፋይል አካላት - ሙሉ በሙሉ የተቀናጀ እና በተመሳሳይ ቡድን የሚመረተውን styled-jsxን በመጠቀም ወደ ክፍሉ የተቀመጡ ቅጦች ማከል ቀላል ነው።
- ትኩስ ኮድን እንደገና መጫን - Next.js በዲስክ ላይ የተቀመጠ ማሻሻያ ሲያገኝ ገጹን እንደገና ይጭናል.
- ተለዋዋጭ አካላት - የጃቫ ስክሪፕት ሞጁሎችን በተለዋዋጭ መጫን እና አካላትን ምላሽ መስጠት ይችላሉ።
- የማይንቀሳቀስ ወደ ውጭ መላክ - Next.js በሚቀጥለው ወደ ውጭ መላኪያ ትእዛዝ ሙሉ በሙሉ የማይንቀሳቀስ ጣቢያ ከመተግበሪያዎ ወደ ውጭ ለመላክ ይፈቅድልዎታል።
- ከአካባቢው ጋር ተኳሃኝነት - Next.js ከጃቫ ስክሪፕት ፣ ኖድ እና ምላሽ ሥነ-ምህዳሮች ጋር ያለችግር ይዋሃዳል።
- የመከፋፈል ኮዶች በራስ-ሰር - ገጾችን ለመስራት የሚያስፈልጉት ቤተ-መጻሕፍት እና ጃቫስክሪፕት ብቻ ጥቅም ላይ ይውላሉ። ሁሉንም የመተግበሪያውን ኮድ የያዘ ነጠላ የጃቫ ስክሪፕት ፋይል ከመፍጠር ይልቅ Next.js መተግበሪያውን በብዙ ሃብቶች ይከፋፍለዋል።
Next.js መተግበሪያን እንዴት መፍጠር እንደሚቻል?
መግጠም
Next.js ፕሮጀክት ለመጫን እና ለመገንባት የ node npx ትዕዛዝን መጠቀም ትችላለህ።
ይህ አቃፊ እና የ Next.js ፕሮጀክት ለማስኬድ የሚያስፈልጉትን ሁሉንም ፋይሎች፣ ውቅሮች እና ሌሎች ነገሮች ያመነጫል።
መተግበሪያው አንዴ እንደተፈጠረ ማስጀመር ይችላሉ።
ገጾች እና መስመር
ከ Next.js ጋር መንገዶችን ለማስተናገድ፣ የማዞሪያ ማዕቀፍ መቅጠር አያስፈልገንም። በ Next.js ማዘዋወር ለመዘጋጀት ነፋሻማ ነው። አዲስ Next.js መተግበሪያን ለመገንባት የፍጠር-ቀጣይ-መተግበሪያን ትዕዛዝ ስትጠቀም መተግበሪያው በነባሪነት 'ገጽ' የሚባል አቃፊ ይፈጥራል።
ይህ 'ገጾች' ማህደር መንገዶችህን የምትጠብቅበት ነው። በውጤቱም፣ እያንዳንዱ ምላሽ ሰጪ አካላት በንዑስ ዳይሬክተሩ ውስጥ ያለው ፋይል እንደ የተለየ መንገድ ይያዛል።
ለምሳሌ፣ ማህደሩ እነዚህን ፋይሎች ከያዘ፡-
- index.js
- ስለ.js
- aricles.js
ይህ ፋይል በራስ-ሰር በሶስት መንገዶች ይቀየራል፡-
- የመረጃ ጠቋሚው ገጽ localhost/index
- ስለ ገጽ localhost/ስለ
- የብሎግ ገጽ localhost/ጽሑፎች
የ about.js ገጽ ምሳሌ ከዚህ በታች ይታያል። እርስዎ እንደሚመለከቱት ስለ ገጹ ምንም አልቀረበም። እሱ በቀላሉ መደበኛ React ተግባራዊ አካል ነው።
መንገዶች
የጎጆ መንገዶችን ለመስራት መጀመሪያ ንዑስ አቃፊ ማቋቋም አለቦት። ለምሳሌ፡- ገጾች/ጽሑፎች። በዚያ አቃፊ ውስጥ የእርስዎን 'contact.js' react ክፍል ይፍጠሩ እና ገጹን localhost/articles/contact ያመነጫል።
አንዱን ፋይል በገጾች/articles.js እና ሌላ በገጾች/ጽሁፎች/index.js ውስጥ ካስቀመጡ። ሁለቱም አካባቢያዊ አስተናጋጅ/ብሎግ አንድ አይነት መንገድ ያንፀባርቃሉ። በዚህ ሁኔታ Next.js የ article.js ፋይልን ብቻ ያቀርባል። እያንዳንዱ ብሎግ ልጥፍ የራሱ መንገድ ስላለው ስለ ተለዋዋጭ መንገዶችስ?
- localhost / ብሎግ / የመጀመሪያ-አንቀጽ
- localhost / ብሎግ / - ሁለተኛ-አንቀጽ
የቅንፍ ማስታወሻውን በመጠቀም በ Next.js ውስጥ ተለዋዋጭ መንገድን መግለፅ ይችላሉ። ለምሳሌ፡- ገጾች/አንቀጽ/[slug].js
የአገናኝ መንገዶች
አሁን የመጀመሪያውን መንገድዎን አጠናቅቀዋል። ገፆችን ከእነዚያ መንገዶች ጋር እንዴት ማገናኘት እንዳለብህ እየጠየቅክ እንደሆነ እገምታለሁ። ይህንን ለማድረግ 'next/link' ያስፈልገዎታል።
ወደ ስለ ገጹ የሚወስድ አገናኝን የሚያካትት የመነሻ ገጽ ምሳሌ ይኸውና፡
አገናኙን ቅጥ ማድረግ ከፈለጉ፣ የሚከተለውን አገባብ ይጠቀሙ፡-
መንገዶችን ማዘዋወር
ወደ አንድ የተወሰነ ገጽ ማዘዋወርን ማስገደድ ከፈለጉስ? ለምሳሌ፣ አንድ አዝራር ሲጫን? ይህንን 'router.push' በመጠቀም ማከናወን ይችላሉ፡-
ሲኢኦ
በድር መተግበሪያዎች ውስጥ ያሉ ገፆች በኤችቲኤምኤል አካል ውስጥ ካለው መረጃ በተጨማሪ ሜታ (ጭንቅላት) ንጥረ ነገሮችን ይፈልጋሉ። ይህ በReact መተግበሪያ ውስጥ React Helmet የሚባል ተጨማሪ መስፈርት መጫንን ያስገድዳል።
በፍለጋ ውጤቶች እና በመክተት ውስጥ የሚታዩትን ሜታዳታ ወደ ድረ-ገጾቻችን በቀላሉ ለመጨመር ከቀጣዩ/ዋና ወደ ቀጣይ ያለውን የጭንቅላት ክፍል መጠቀም እንችላለን፡-
ክፍሎች
ክፍሎችን ወይም የአቀማመጥ ፋይልን በተደጋጋሚ ማዘጋጀት ያስፈልግዎታል። ለምሳሌ፣ navbarን የሚያቀርብ አካል። እስካሁን የገጾቹን ማህደር ተጠቅመንበታል። የእርስዎ አካል የመሄጃ ገጽ እንዲሆን የታሰበ ካልሆነስ?
ተጠቃሚው እንደ localhost/navbar ወደ አንድ ገጽ እንዲሄድ አይፈልጉም። የNavbar.js አካልን በገጾች አቃፊ ውስጥ ካስቀመጡት ያ ነው የሚሆነው። በሁኔታው ውስጥ ምን ማድረግ አለብዎት?
በቀላሉ ሁሉንም የእርስዎን 'ገጽ አይደለም' ክፍሎች በተለየ አቃፊ ውስጥ ያከማቹ። አብዛኞቹ Next.js ፕሮጀክቶች ሞኒከር 'components' ይጠቀማሉ፣ እና ይህ አቃፊ በፕሮጀክትዎ ስር አቃፊ ውስጥ ነው የሚፈጠረው።
የጭንቅላት አካል
የመነሻ ገጽ ጭነት የሚከናወነው በ Next.js በአገልጋዩ በኩል ነው። ይህንን የሚያደርገው የገጽዎን HTML በማስተካከል ነው። የራስጌ ክፍል ተካትቷል።
የ Next.js Head ክፍል እንደ ርዕስ እና ሜታ ያሉ የራስጌ ክፍል መለያዎችን ለመስጠት ይጠቅማል። የጭንቅላት ክፍል በዚህ የአቀማመጥ አካል ምሳሌ ውስጥ ጥቅም ላይ ይውላል።
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 ተወዳጅነትን ያተረፈው ብዙ የድር ገንቢዎች ከደንበኛ-ጎን ድር መተግበሪያዎች (በአሳሹ ውስጥ) ያጋጠሙትን ችግር ስለፈታ ነው። እነዚህ ነጠላ-ገጽ አፕሊኬሽኖች (SPAs) ተጠቃሚው ገጹን እንደገና እንዲጭን ስለማይፈልጉ እና ለበለጠ መስተጋብር ስለሚፈቅዱ የተሻለ ልምድ ነበራቸው።
ነገር ግን፣ በእንደዚህ አይነት መተግበሪያ ውስጥ ያለው አብዛኛው ቁሳቁስ በአሳሹ ውስጥ ሲሰራ ብቻ የሚታይ ስለሆነ የድር ጎብኚዎች የእንደዚህ አይነት መተግበሪያን የፅሁፍ ይዘት ለመረዳት ይቸገራሉ።
በውጤቱም፣ ታዋቂነታቸውም ቢሆንም፣ ብዙ SPA ዎች እንደ ጎግል ላሉ ትልልቅ የፍለጋ ፕሮግራሞች ማንነታቸው ያልታወቁ ናቸው። Next.js አሁን ይበልጥ ጠንካራ የሆነ አብሮ የተሰራ ዘዴን ለአገልጋይ-ጎን ማሳየት (ኤስኤስአር) የReact ክፍሎች ያካትታል።
Next.js በግንባታው ሂደት ውስጥ ገንቢዎች የጃቫ ስክሪፕት ኮድ በአገልጋዩ ላይ እንዲገነቡ እና መሰረታዊ እና መረጃ ጠቋሚ HTML ለተጠቃሚው እንዲያቀርቡ ያስችላቸዋል።
ጥቅሙንና
- ለተጠቃሚ-ልምድ ጥሩ
- ለ SEO ምርጥ
- እንደ ተለዋዋጭ የሚመስል እጅግ በጣም ፈጣን የማይንቀሳቀስ ድር ጣቢያ ይገንቡ
- UI እና UX በመገንባት ላይ ተለዋዋጭነት።
- ብዙ የእድገት ጥቅሞች
- ታላቅ የማህበረሰብ ድጋፍ
ጉዳቱን
- ድረ-ገጾች ወይም መተግበሪያዎች ለመገንባት ወይም ለማዳበር የተወሰነ ጊዜ አላቸው።
- ለተወሰኑ ተግባራት Next.js በቂ አይደለም። ገንቢዎች Node.js መሳሪያዎችን በመጠቀም ተለዋዋጭ መንገዶችን መገንባት መቻል አለባቸው።
መደምደሚያ
እንደሚመለከቱት Next.js React መተግበሪያን ያቃልላል እና በጣም አስፈላጊ በሆኑት ላይ እንዲያተኩሩ ይፈቅድልዎታል - የእርስዎ መተግበሪያ ሎጂክ እና UI። ዘመናዊ፣ ፊት ለፊት የበለጸጉ እና በኤፒአይ የተጎለበተ መተግበሪያዎችን ለመፍጠር ሁሉንም ነገር ያካትታል።
ቋሚ HTML ገጾችን የመገንባት ችሎታ ስላለው ለይዘት-ብቻ ፕሮጀክቶች፣ እንደ ብሎጎች እና የንግድ ድር ጣቢያዎች ተገቢ ነው።
አሁን ባሉት እትሞች Next.js ከፍተኛ የገንቢ ልምድን ብቻ ሳይሆን ምስላዊ አፈጻጸምን እና የተጠቃሚ ተሞክሮን ለመጨመር መሳሪያዎችን ይሰጣል፣ለዚህ ማዕቀፍ የወደፊት ብሩህ ተስፋን ያረጋግጣል።
መልስ ይስጡ