ಪರಿವಿಡಿ[ಮರೆಮಾಡಿ][ತೋರಿಸಿ]
ಸಾಫ್ಟ್ವೇರ್ ಲೈಬ್ರರಿ ಅಥವಾ ಫ್ರೇಮ್ವರ್ಕ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ, ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳಲಾಗುತ್ತದೆ.
ನಾನು "ಡೆವಲಪರ್ ಅನುಭವ" ಅನ್ನು ಉಲ್ಲೇಖಿಸಿದಾಗ, ಡೆವಲಪರ್ಗಳು ನಿಜವಾಗಿ ಕೆಲಸವನ್ನು ಹೇಗೆ ಮಾಡುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಾನು ಉಲ್ಲೇಖಿಸುತ್ತಿದ್ದೇನೆ. ಡೆವಲಪರ್ಗಳು ಬಳಸಲು ಆನಂದಿಸಬಹುದಾದ ಲೈಬ್ರರಿಗಳು ಅಥವಾ ಚೌಕಟ್ಟುಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತಾರೆ.
ನಾವು ಈಗ ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ಚೌಕಟ್ಟುಗಳನ್ನು ಹೊಂದಲು ಇದು ಪ್ರಾಥಮಿಕ ಕಾರಣಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಡೆವಲಪರ್ಗಳಾಗಿ, ನಮ್ಮ ಕಾರ್ಯಗಳಲ್ಲಿ ನಮಗೆ ಸಹಾಯ ಮಾಡಲು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪರಿಕರಗಳನ್ನು ರಚಿಸಿದಾಗ ನಾವು ಮೊದಲಿನಿಂದ ಪ್ರಾರಂಭಿಸಬೇಕಾಗಿಲ್ಲ.
ಫ್ರೇಮ್ವರ್ಕ್ಗಳು ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಡೆವಲಪರ್ಗಳಿಂದ ರಚಿಸಲಾದ ಮತ್ತು ಬಳಸಲಾಗುವ ಸಾಫ್ಟ್ವೇರ್ ತುಣುಕುಗಳಾಗಿವೆ ಮತ್ತು NextJS ಅವುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.
ಈ ಪೋಸ್ಟ್ನಲ್ಲಿ, ನಾವು Nextjs, ಅದರ ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ನಾವು ಅದನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕುರಿತು ಹೋಗುತ್ತೇವೆ. ನಾವು ನೇರವಾಗಿ ಜಿಗಿಯೋಣ.
Next.js ಎಂದರೇನು?
ಮುಂದೆ ಸ್ಥಿರ ವೆಬ್ಪುಟಗಳು ಮತ್ತು ರಿಯಾಕ್ಟ್-ಆಧಾರಿತ ಆನ್ಲೈನ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ನಿರ್ಮಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್ವರ್ಕ್ ಆಗಿದೆ. ವಿಂಡೋಸ್, ಲಿನಕ್ಸ್ ಮತ್ತು ಮ್ಯಾಕ್ ಸೇರಿದಂತೆ ವಿವಿಧ ಪ್ಲಾಟ್ಫಾರ್ಮ್ಗಳಿಗಾಗಿ ಉತ್ತಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಇದು ನಿಮ್ಮನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
ನೀವು ರಿಯಾಕ್ಟ್ನೊಂದಿಗೆ ಕನಿಷ್ಠ ಪರಿಚಿತತೆಯನ್ನು ಹೊಂದಿದ್ದರೆ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು ಬಯಸಿದರೆ ನೀವು Next.js ಫ್ರೇಮ್ವರ್ಕ್ನೊಂದಿಗೆ ಪರಿಚಿತರಾಗಿರಬೇಕು.
ನೀವು ಪ್ರಾರಂಭಿಸಲು ಅಗತ್ಯವಿರುವ ಎಲ್ಲದರೊಂದಿಗೆ Next.js ಬಂದರೂ ಸಹ, ನೀವು NPM ಮತ್ತು ನೂಲು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್, CSS ಮತ್ತು SCSS, ಸ್ಥಿರ ರಫ್ತು ಮತ್ತು ಸರ್ವರ್ಲೆಸ್ ನಿಯೋಜನೆ ನಡುವೆ ಆಯ್ಕೆ ಮಾಡಬಹುದು.
ವೈಶಿಷ್ಟ್ಯಗಳು
- ರೂಟಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮಾಡಲಾಗುತ್ತದೆ - ನೀವು ಯಾವುದನ್ನೂ ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕಾಗಿಲ್ಲ ಏಕೆಂದರೆ ಯಾವುದೇ URL ಅನ್ನು ಫೈಲ್ಸಿಸ್ಟಮ್ಗೆ ಮ್ಯಾಪ್ ಮಾಡಲಾಗಿದೆ, ಪುಟಗಳ ಫೋಲ್ಡರ್ನಲ್ಲಿರುವ ಫೈಲ್ಗಳಿಗೆ (ನೀವು ಕಸ್ಟಮೈಸ್ ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿದ್ದೀರಿ, ಸಹಜವಾಗಿ).
- ಸಿಂಗಲ್ ಫೈಲ್ನ ಕಾಂಪೊನೆಂಟ್ಗಳು - ಸ್ಟೈಲ್ಡ್-ಜೆಎಸ್ಎಕ್ಸ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಘಟಕಕ್ಕೆ ಸ್ಕೋಪ್ ಮಾಡಲಾದ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸುವುದು ಸರಳವಾಗಿದೆ, ಇದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಸಂಯೋಜಿಸಲಾಗಿದೆ ಮತ್ತು ಅದೇ ತಂಡವು ಉತ್ಪಾದಿಸುತ್ತದೆ.
- ಹಾಟ್ ಕೋಡ್ ಅನ್ನು ಮರುಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ - Next.js ಡಿಸ್ಕ್ನಲ್ಲಿ ಉಳಿಸಲಾದ ಮಾರ್ಪಾಡುಗಳನ್ನು ಪತ್ತೆ ಮಾಡಿದಾಗ, ಅದು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡುತ್ತದೆ.
- ಡೈನಾಮಿಕ್ ಘಟಕಗಳು - ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು ಮತ್ತು ಘಟಕಗಳನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು.
- ಸ್ಥಿರ ರಫ್ತುಗಳು - ಮುಂದಿನ ರಫ್ತು ಆಜ್ಞೆಯೊಂದಿಗೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಿರವಾದ ಸೈಟ್ ಅನ್ನು ರಫ್ತು ಮಾಡಲು Next.js ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- ಪರಿಸರದೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆ - Next.js ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ನೋಡ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಸಂಯೋಜಿಸುತ್ತದೆ.
- ಕೋಡ್ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿಭಜಿಸುವುದು - ಪುಟಗಳನ್ನು ನಿರೂಪಿಸಲು ಅಗತ್ಯವಿರುವ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತದೆ. ಅಪ್ಲಿಕೇಶನ್ನ ಎಲ್ಲಾ ಕೋಡ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅನ್ನು ರಚಿಸುವ ಬದಲು, Next.js ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹಲವು ಸಂಪನ್ಮೂಲಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ.
next.js ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು?
ಅನುಸ್ಥಾಪನ
Next.js ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲು ಮತ್ತು ನಿರ್ಮಿಸಲು ನೀವು ನೋಡ್ 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.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 ಅನ್ನು ರಿಯಾಕ್ಟ್ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಇದು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪ್ಮೆಂಟ್ ಟೂಲ್ಕಿಟ್ ಆಗಿದೆ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ರಚಿಸುವುದು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಅದು ನನ್ನ ನೆಚ್ಚಿನ ಆಯ್ಕೆಯಾಗಿದೆ.
ಆದರೆ Next.js ಏನು ಮಾಡಿದೆ ಎಂಬುದರಲ್ಲಿ ಉತ್ತಮವಾಗಿಲ್ಲದಿದ್ದರೆ ಅದು ಸಾಕಾಗುವುದಿಲ್ಲ ... ಸರಿ?
ಆದ್ದರಿಂದ, ಅದು ನಿಖರವಾಗಿ ಏನು ಮಾಡುತ್ತದೆ?
ಅದನ್ನು ಗ್ರಹಿಸಲು ನಾವು ಮೊದಲು ಕೆಲವು ಪರಿಕಲ್ಪನೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು. Next.js ಜನಪ್ರಿಯತೆಯನ್ನು ಗಳಿಸಿತು ಏಕೆಂದರೆ ಇದು ಅನೇಕ ವೆಬ್ ಡೆವಲಪರ್ಗಳು ಕ್ಲೈಂಟ್-ಸೈಡ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳೊಂದಿಗೆ (ಬ್ರೌಸರ್ನಲ್ಲಿ) ಹೊಂದಿರುವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಿದೆ. ಈ ಏಕ-ಪುಟ ಅಪ್ಲಿಕೇಶನ್ಗಳು (SPA ಗಳು) ಉತ್ತಮ ಅನುಭವವನ್ನು ಹೊಂದಿವೆ ಏಕೆಂದರೆ ಅವುಗಳು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಲು ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಿಲ್ಲ ಮತ್ತು ಹೆಚ್ಚಿನ ಸಂವಾದಕ್ಕೆ ಅವಕಾಶ ಮಾಡಿಕೊಟ್ಟವು.
ಆದಾಗ್ಯೂ, ಈ ರೀತಿಯ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿನ ಹೆಚ್ಚಿನ ವಸ್ತುವು ಬ್ರೌಸರ್ನಲ್ಲಿ ನಿರ್ವಹಿಸಿದಾಗ ಮಾತ್ರ ಗೋಚರಿಸುವುದರಿಂದ, ವೆಬ್ ಕ್ರಾಲರ್ಗಳು ಅಂತಹ ಅಪ್ಲಿಕೇಶನ್ನ ಪಠ್ಯ ವಿಷಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟಕರ ಸಮಯವನ್ನು ಹೊಂದಿರುತ್ತಾರೆ.
ಪರಿಣಾಮವಾಗಿ, ಅವರ ಜನಪ್ರಿಯತೆಯ ಹೊರತಾಗಿಯೂ, ಅನೇಕ SPA ಗಳು ಗೂಗಲ್ನಂತಹ ದೊಡ್ಡ ಸರ್ಚ್ ಇಂಜಿನ್ಗಳಿಗೆ ಅನಾಮಧೇಯವಾಗಿ ಉಳಿದಿವೆ. Next.js ಈಗ ರಿಯಾಕ್ಟ್ ಘಟಕಗಳ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಗಾಗಿ ಹೆಚ್ಚು ದೃಢವಾದ ಅಂತರ್ನಿರ್ಮಿತ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒಳಗೊಂಡಿದೆ.
Next.js ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಸರ್ವರ್ನಲ್ಲಿ JavaScript ಕೋಡ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಡೆವಲಪರ್ಗಳಿಗೆ ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಮೂಲಭೂತ, ಸೂಚಿಕೆ ಮಾಡಬಹುದಾದ HTML ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಪರ
- ಬಳಕೆದಾರ-ಅನುಭವಕ್ಕೆ ಅದ್ಭುತವಾಗಿದೆ
- ಎಸ್ಇಒಗೆ ಉತ್ತಮವಾಗಿದೆ
- ಡೈನಾಮಿಕ್ನಂತೆ ವರ್ತಿಸುವ ಸೂಪರ್-ಫಾಸ್ಟ್ ಸ್ಟ್ಯಾಟಿಕ್ ವೆಬ್ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿ
- UI ಮತ್ತು UX ಅನ್ನು ನಿರ್ಮಿಸುವಲ್ಲಿ ನಮ್ಯತೆ.
- ಅನೇಕ ಅಭಿವೃದ್ಧಿ ಅನುಕೂಲಗಳು
- ಉತ್ತಮ ಸಮುದಾಯ ಬೆಂಬಲ
ಕಾನ್ಸ್
- ವೆಬ್ಸೈಟ್ಗಳು ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ಗಳು ನಿರ್ಮಿಸಲು ಅಥವಾ ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ನಿರ್ದಿಷ್ಟ ಸಮಯವನ್ನು ಹೊಂದಿರುತ್ತವೆ.
- ಕೆಲವು ಕಾರ್ಯಗಳಿಗಾಗಿ, Next.js ಅಸಮರ್ಪಕವಾಗಿದೆ. Node.js ಪರಿಕರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಡೆವಲಪರ್ಗಳು ಡೈನಾಮಿಕ್ ಮಾರ್ಗಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
ತೀರ್ಮಾನ
ನೀವು ನೋಡುವಂತೆ, Next.js ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ತರ್ಕ ಮತ್ತು UI ಹೆಚ್ಚು ಮುಖ್ಯವಾದುದನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಸಮಕಾಲೀನ, ಮುಂಭಾಗ-ಸಮೃದ್ಧ ಮತ್ತು API-ಚಾಲಿತ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ರಚಿಸಲು ಅಗತ್ಯವಿರುವ ಎಲ್ಲವನ್ನೂ ಒಳಗೊಂಡಿದೆ.
ಸ್ಥಿರ HTML ಪುಟಗಳನ್ನು ನಿರ್ಮಿಸುವ ಸಾಮರ್ಥ್ಯದಿಂದಾಗಿ ಬ್ಲಾಗ್ಗಳು ಮತ್ತು ವ್ಯಾಪಾರ ವೆಬ್ಸೈಟ್ಗಳಂತಹ ವಿಷಯ-ಮಾತ್ರ ಯೋಜನೆಗಳಿಗೆ ಸಹ ಇದು ಸೂಕ್ತವಾಗಿದೆ.
ಪ್ರಸ್ತುತ ಆವೃತ್ತಿಗಳೊಂದಿಗೆ, Next.js ಉನ್ನತ ಮಟ್ಟದ ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ನಿರ್ವಹಿಸುವುದಲ್ಲದೆ, ದೃಶ್ಯ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಸಾಧನಗಳನ್ನು ನೀಡುತ್ತದೆ, ಈ ಚೌಕಟ್ಟಿಗೆ ಉಜ್ವಲ ಭವಿಷ್ಯವನ್ನು ಖಾತ್ರಿಪಡಿಸುತ್ತದೆ.
ಪ್ರತ್ಯುತ್ತರ ನೀಡಿ