பொருளடக்கம்[மறை][காட்டு]
ஒரு மென்பொருள் நூலகம் அல்லது கட்டமைப்பைத் தேர்ந்தெடுக்கும்போது, டெவலப்பர் அனுபவம் பொதுவாக கணக்கில் எடுத்துக்கொள்ளப்படும்.
"டெவலப்பர் அனுபவம்" என்று நான் குறிப்பிடும்போது, டெவலப்பர்கள் உண்மையில் வேலையை எப்படிச் செய்கிறார்கள் என்பதைக் குறிப்பிடுகிறேன். டெவலப்பர்கள் பயன்படுத்துவதற்கு சுவாரஸ்யமாக இருக்கும் நூலகங்கள் அல்லது கட்டமைப்புகளைத் தேர்வு செய்கிறார்கள்.
இப்போது எங்களிடம் மிகவும் பிரபலமான நூலகங்கள் மற்றும் கட்டமைப்புகள் இருப்பதற்கான முதன்மைக் காரணங்களில் இதுவும் ஒன்றாகும். டெவலப்பர்களாக, எங்கள் பணிகளில் எங்களுக்கு உதவுவதற்காக உருவாக்கப்பட்ட கருவிகள் இருக்கும் போது நாம் புதிதாக தொடங்க வேண்டியதில்லை.
கட்டமைப்புகள் என்பது மென்பொருளின் துண்டுகள் ஆகும், அவை டெவலப்பர்களால் உருவாக்கப்பட்டு பயன்பாடுகளை உருவாக்க பயன்படுத்தப்படுகின்றன, மேலும் NextJS அவற்றில் ஒன்றாகும்.
இந்த இடுகையில், Nextjs, அதன் முக்கிய அம்சங்கள் மற்றும் ஒரு பயன்பாட்டை உருவாக்க அதை எவ்வாறு பயன்படுத்தலாம் என்பதைப் பார்ப்போம். உடனே உள்ளே குதிப்போம்.
Next.js என்றால் என்ன?
அடுத்தது நிலையான வலைப்பக்கங்கள் மற்றும் எதிர்வினை அடிப்படையிலான ஆன்லைன் பயன்பாடுகளை விரைவாகவும் எளிதாகவும் உருவாக்குவதற்கான ஜாவாஸ்கிரிப்ட் கட்டமைப்பாகும். விண்டோஸ், லினக்ஸ் மற்றும் மேக் உள்ளிட்ட பல்வேறு தளங்களுக்கு சிறந்த வலை பயன்பாடுகளை வடிவமைக்க இது உங்களை அனுமதிக்கிறது.
வினைத்திறனுடன் உங்களுக்கு குறைந்தபட்ச பரிச்சயம் இருந்தால் மற்றும் எதிர்வினை சுற்றுச்சூழல் அமைப்பு பற்றி மேலும் அறிய விரும்பினால் Next.js கட்டமைப்பை நீங்கள் நன்கு அறிந்திருக்க வேண்டும்.
நீங்கள் தொடங்குவதற்கு தேவையான அனைத்தையும் Next.js கொண்டு வந்தாலும், நீங்கள் NPM மற்றும் நூல், ஜாவாஸ்கிரிப்ட் மற்றும் டைப்ஸ்கிரிப்ட், CSS மற்றும் SCSS, நிலையான ஏற்றுமதி மற்றும் சேவையகமற்ற வரிசைப்படுத்தல் ஆகியவற்றிற்கு இடையே தேர்ந்தெடுக்கலாம்.
அம்சங்கள்
- ரூட்டிங் தானாக செய்யப்படுகிறது - நீங்கள் எதையும் உள்ளமைக்க வேண்டியதில்லை, ஏனெனில் எந்த URLஐயும் கோப்பு முறைமையில், பக்கங்கள் கோப்புறையில் உள்ள கோப்புகளுக்கு (உங்களுக்கு தனிப்பயனாக்க விருப்பங்கள் உள்ளன, நிச்சயமாக).
- ஒரு ஒற்றை கோப்பின் கூறுகள் - styled-jsx ஐப் பயன்படுத்தி கூறுகளுக்கு ஸ்கோப் செய்யப்பட்ட பாணிகளைச் சேர்ப்பது எளிது, இது முற்றிலும் ஒருங்கிணைக்கப்பட்டு ஒரே குழுவால் தயாரிக்கப்படுகிறது.
- ஹாட் குறியீட்டை மீண்டும் ஏற்றுகிறது - Next.js வட்டில் சேமிக்கப்பட்ட மாற்றத்தைக் கண்டறிந்தால், அது பக்கத்தை மீண்டும் ஏற்றுகிறது.
- டைனமிக் கூறுகள் - நீங்கள் ஜாவாஸ்கிரிப்ட் தொகுதிகள் மற்றும் எதிர்வினை கூறுகளை மாறும் வகையில் ஏற்றலாம்.
- நிலையான ஏற்றுமதிகள் - Next.js ஆனது அடுத்த ஏற்றுமதி கட்டளையுடன் உங்கள் பயன்பாட்டிலிருந்து முற்றிலும் நிலையான தளத்தை ஏற்றுமதி செய்ய உங்களை அனுமதிக்கிறது.
- சூழலுடன் இணக்கத்தன்மை - Next.js ஜாவாஸ்கிரிப்ட், நோட் மற்றும் ரியாக்ட் சுற்றுச்சூழல் அமைப்புகளுடன் தடையின்றி ஒருங்கிணைக்கிறது.
- குறியீடுகளை தானாகப் பிரித்தல் - தேவையான நூலகங்கள் மற்றும் ஜாவாஸ்கிரிப்ட் மட்டுமே பக்கங்களை வழங்க பயன்படுகிறது. பயன்பாட்டின் அனைத்து குறியீடுகளையும் கொண்ட ஒரு ஜாவாஸ்கிரிப்ட் கோப்பை உருவாக்குவதற்குப் பதிலாக, Next.js புத்திசாலித்தனமாக பயன்பாட்டை பல ஆதாரங்களாகப் பிரிக்கிறது.
Next.js பயன்பாட்டை எவ்வாறு உருவாக்குவது?
நிறுவல்
Next.js திட்டத்தை நிறுவவும் உருவாக்கவும் நீங்கள் node npx கட்டளையைப் பயன்படுத்தலாம்.
இது ஒரு கோப்புறையை உருவாக்கும் மற்றும் Next.js திட்டத்தை இயக்க தேவையான அனைத்து கோப்புகள், உள்ளமைவுகள் மற்றும் பிற உருப்படிகளை உருவாக்கும்.
பயன்பாடு உருவாக்கப்பட்டவுடன் அதைத் தொடங்கலாம்.
பக்கங்கள் & ரூட்டிங்
Next.js மூலம் வழிகளைக் கையாள, நாங்கள் ரூட்டிங் கட்டமைப்பைப் பயன்படுத்த வேண்டியதில்லை. Next.js மூலம் ரூட்டிங் அமைப்பது மிகவும் வசதியானது. ஒரு புதிய Next.js பயன்பாட்டை உருவாக்க நீங்கள் create-next-app கட்டளையைப் பயன்படுத்தும் போது, பயன்பாடு இயல்பாகவே 'pages' என்ற கோப்புறையை உருவாக்குகிறது.
இந்த 'பக்கங்கள்' கோப்புறையில் நீங்கள் உங்கள் வழிகளை பராமரிக்கிறீர்கள். இதன் விளைவாக, துணை அடைவில் உள்ள ஒவ்வொரு எதிர்வினை கூறுகளின் கோப்பும் ஒரு தனி வழியாகக் கையாளப்படும்.
எடுத்துக்காட்டாக, கோப்புறையில் அந்தக் கோப்புகள் இருந்தால்:
- index.js
- about.js
- aricles.js
இந்த கோப்பு தானாகவே மூன்று வழிகளில் மாற்றப்படும்:
- குறியீட்டு பக்கம் லோக்கல் ஹோஸ்ட்/இன்டெக்ஸ்
- பற்றி பக்கம் லோக்கல் ஹோஸ்ட்/பற்றி
- வலைப்பதிவு பக்கம் லோக்கல் ஹோஸ்ட்/கட்டுரைகள்
about.js பக்கத்தின் உதாரணம் கீழே காட்டப்பட்டுள்ளது. நீங்கள் பார்க்க முடியும் என, பக்கத்தைப் பற்றி எதுவும் வழங்கப்படவில்லை. இது ஒரு நிலையான எதிர்வினை செயல்பாட்டு கூறு ஆகும்.
தடங்கல்
உள்ளமைக்கப்பட்ட வழிகளை உருவாக்க, நீங்கள் முதலில் ஒரு துணை கோப்புறையை நிறுவ வேண்டும். உதாரணமாக: பக்கங்கள்/கட்டுரைகள். அந்த கோப்புறையில் உங்கள் 'contact.js' எதிர்வினை கூறுகளை உருவாக்கவும், அது லோக்கல் ஹோஸ்ட்/கட்டுரைகள்/தொடர்பு பக்கத்தை உருவாக்கும்.
நீங்கள் ஒரு கோப்பை pages/articles.js மற்றும் மற்றொரு கோப்பை pages/ articles/index.js இல் வைத்தால். லோக்கல் ஹோஸ்ட்/வலைப்பதிவு இரண்டும் ஒரே பாதையை பிரதிபலிக்கின்றன. இந்த சூழ்நிலையில், Next.js article.js கோப்பை ரெண்டர் செய்யும். டைனமிக் வழிகளைப் பற்றி என்ன, ஒவ்வொரு வலைப்பதிவு இடுகைக்கும் அதன் சொந்த பாதை உள்ளது:
- உள்ளூர் ஹோஸ்ட்/வலைப்பதிவு/முதல் கட்டுரை
- உள்ளூர் ஹோஸ்ட்/வலைப்பதிவு/-இரண்டாவது கட்டுரை
அடைப்புக்குறி குறியீட்டைப் பயன்படுத்தி, Next.js இல் டைனமிக் வழியை நீங்கள் வரையறுக்கலாம். உதாரணமாக: பக்கங்கள்/கட்டுரை/[ஸ்லக்].js
இணைப்பு வழிகள்
இப்போது உங்கள் முதல் வழியை முடித்துவிட்டீர்கள். அந்த வழிகளில் பக்கங்களை எவ்வாறு இணைப்பது என்று நீங்கள் கேட்கிறீர்கள் என்று நினைக்கிறேன். அவ்வாறு செய்ய உங்களுக்கு 'அடுத்த/இணைப்பு' தேவை.
அறிமுகப் பக்கத்திற்கான இணைப்பை உள்ளடக்கிய முகப்புப் பக்கத்தின் உதாரணம் இங்கே:
நீங்கள் இணைப்பை வடிவமைக்க விரும்பினால், பின்வரும் தொடரியல் பயன்படுத்தவும்:
வழிமாற்றுகள்
ஒரு குறிப்பிட்ட பக்கத்திற்குத் திருப்பிவிடுமாறு கட்டாயப்படுத்தினால் என்ன செய்வது? உதாரணமாக, ஒரு பொத்தானை அழுத்தும் போது? 'router.push' ஐப் பயன்படுத்தி நீங்கள் இதைச் செய்யலாம்:
எஸ்சிஓ
வலைப் பயன்பாடுகளில் உள்ள பக்கங்களுக்கு HTML உடலில் உள்ள தரவுகளுடன் கூடுதலாக மெட்டா (தலை) கூறுகள் தேவைப்படுகின்றன. இது ரியாக்ட் அப்ளிகேஷனில் ரியாக்ட் ஹெல்மெட் என்ற கூடுதல் தேவையை நிறுவ வேண்டியிருக்கும்.
தேடல் முடிவுகள் மற்றும் உட்பொதிவுகளில் காட்டப்படும் எங்களின் வலைப்பக்கங்களில் மெட்டாடேட்டாவை எளிதாகச் சேர்க்க, அடுத்தது/ஹெட் என்பதிலிருந்து ஹெட் கூறுகளைப் பயன்படுத்தலாம்:
கூறுகள்
நீங்கள் அடிக்கடி கூறுகள் அல்லது தளவமைப்பு கோப்பை உருவாக்க வேண்டும். உதாரணமாக, navbar ஐ வழங்கும் ஒரு கூறு. நாங்கள் இதுவரை பக்கங்கள் கோப்புறையைப் பயன்படுத்தியுள்ளோம். உங்கள் கூறு ஒரு வழிப் பக்கமாக இருக்கவில்லை என்றால் என்ன செய்வது?
லோக்கல் ஹோஸ்ட்/நேவ்பார் போன்ற பக்கத்திற்கு பயனர் செல்ல வேண்டாம். பக்கங்கள் கோப்புறையில் Navbar.js கூறுகளை வைத்தால், அதுதான் நடக்கும். சூழ்நிலையில் நீங்கள் என்ன செய்ய வேண்டும்?
உங்கள் 'பக்கமல்ல' கூறுகள் அனைத்தையும் தனி கோப்புறையில் சேமிக்கவும். பெரும்பாலான Next.js திட்டப்பணிகள் 'கூறுகள்' என்ற மோனிகரைப் பயன்படுத்துகின்றன, மேலும் இந்தக் கோப்புறை உங்கள் திட்டத்தின் மூலக் கோப்புறையில் உருவாக்கப்படும்.
தலை கூறு
ஆரம்ப பக்க சுமை, சர்வர் பக்கத்தில் 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 ஆனது ரியாக்டின் மேல் கட்டப்பட்டுள்ளது. பயனர் இடைமுகங்களை உருவாக்குதல் வலை பயன்பாடுகளை வடிவமைப்பதில் எனக்கு மிகவும் பிடித்த தேர்வு.
நெக்ஸ்ட்.ஜேஸ் செய்ததில் நன்றாக இல்லை என்றால் அது போதாது... சரியா?
எனவே, அது சரியாக என்ன செய்கிறது?
அதைப் புரிந்துகொள்வதற்கு முதலில் நாம் சில கருத்துக்களை வரையறுக்க வேண்டும். நெக்ஸ்ட்.ஜேஸ் பிரபலமடைந்தது, ஏனெனில் இது பல வலை டெவலப்பர்கள் கிளையன்ட் பக்க வலை பயன்பாடுகளில் (உலாவியில்) கொண்டிருந்த சிக்கலை தீர்த்தது. இந்த ஒற்றைப் பக்க பயன்பாடுகள் (SPAs) சிறந்த அனுபவத்தைப் பெற்றன, ஏனெனில் பயனர்கள் பக்கத்தை மறுஏற்றம் செய்ய வேண்டிய அவசியமில்லை மற்றும் அதிக ஊடாடலுக்கு அனுமதித்தது.
இருப்பினும், இதுபோன்ற செயலியில் உள்ள பெரும்பாலான உள்ளடக்கம் உலாவியில் செயல்படும் போது மட்டுமே தெரியும் என்பதால், வலை கிராலர்கள் அத்தகைய பயன்பாட்டின் உரை உள்ளடக்கத்தைப் புரிந்துகொள்வது கடினம்.
இதன் விளைவாக, அவற்றின் பிரபலம் இருந்தபோதிலும், பல SPAக்கள் கூகுள் போன்ற பெரிய தேடுபொறிகளுக்கு பெரும்பாலும் அநாமதேயமாகவே இருந்தன. Next.js இப்போது ரியாக்ட் கூறுகளின் சர்வர்-சைட் ரெண்டரிங் (எஸ்எஸ்ஆர்)க்கான மிகவும் வலுவான உள்ளமைக்கப்பட்ட பொறிமுறையை உள்ளடக்கியுள்ளது.
Next.js ஆனது டெவலப்பர்களை உருவாக்குவதற்கான செயல்பாட்டின் போது சேவையகத்தில் JavaScript குறியீட்டை உருவாக்க அனுமதிக்கிறது மற்றும் பயனருக்கு அடிப்படை, அட்டவணைப்படுத்தக்கூடிய HTML ஐ வழங்குகிறது.
நன்மை
- பயனர் அனுபவத்திற்கு சிறந்தது
- SEO க்கு சிறந்தது
- ஒரு அதிவேக நிலையான வலைத்தளத்தை உருவாக்குங்கள், அது மாறும் தன்மையைப் போல் செயல்படுகிறது
- UI & UX கட்டமைப்பில் நெகிழ்வுத்தன்மை.
- பல வளர்ச்சி நன்மைகள்
- பெரும் சமூக ஆதரவு
பாதகம்
- இணையதளங்கள் அல்லது பயன்பாடுகள் கட்டமைக்க அல்லது உருவாக்க ஒரு குறிப்பிட்ட நேரத்தைக் கொண்டுள்ளன.
- குறிப்பிட்ட பணிகளுக்கு, Next.js போதுமானதாக இல்லை. Node.js கருவிகளைப் பயன்படுத்தி டெவலப்பர்கள் டைனமிக் வழிகளை உருவாக்க முடியும்.
தீர்மானம்
நீங்கள் பார்க்கிறபடி, Next.js ஆனது ரியாக்ட் ஆப்ஸ் மேம்பாட்டை எளிதாக்குகிறது மற்றும் உங்கள் ஆப்ஸ் லாஜிக் மற்றும் UI - மிக முக்கியமானவற்றில் கவனம் செலுத்த உங்களை அனுமதிக்கிறது. இது சமகால, முன்பக்க-பணக்கார மற்றும் API-இயங்கும் பயன்பாடுகளை உருவாக்க தேவையான அனைத்தையும் உள்ளடக்கியது.
நிலையான HTML பக்கங்களை உருவாக்கும் திறனின் காரணமாக, வலைப்பதிவுகள் மற்றும் வணிக வலைத்தளங்கள் போன்ற உள்ளடக்கம் மட்டுமேயான திட்டங்களுக்கும் இது பொருத்தமானது.
தற்போதைய பதிப்புகளுடன், Next.js உயர் மட்ட டெவலப்பர் அனுபவத்தை பராமரிப்பது மட்டுமல்லாமல், காட்சி செயல்திறன் மற்றும் பயனர் அனுபவத்தை அதிகரிப்பதற்கான கருவிகளையும் வழங்குகிறது, இந்த கட்டமைப்பிற்கு பிரகாசமான எதிர்காலத்தை உறுதி செய்கிறது.
ஒரு பதில் விடவும்