ਵਿਸ਼ਾ - ਸੂਚੀ[ਛੁਪਾਓ][ਦਿਖਾਓ]
ਇੱਕ ਸੌਫਟਵੇਅਰ ਲਾਇਬ੍ਰੇਰੀ ਜਾਂ ਫਰੇਮਵਰਕ ਨੂੰ ਚੁਣਦੇ ਸਮੇਂ, ਡਿਵੈਲਪਰ ਅਨੁਭਵ ਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਧਿਆਨ ਵਿੱਚ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ।
ਜਦੋਂ ਮੈਂ "ਡਿਵੈਲਪਰ ਅਨੁਭਵ" ਦਾ ਜ਼ਿਕਰ ਕਰਦਾ ਹਾਂ, ਤਾਂ ਮੈਂ ਇਸ ਗੱਲ ਦਾ ਹਵਾਲਾ ਦੇ ਰਿਹਾ ਹਾਂ ਕਿ ਡਿਵੈਲਪਰ ਅਸਲ ਵਿੱਚ ਕੰਮ ਕਿਵੇਂ ਕਰਦੇ ਹਨ। ਡਿਵੈਲਪਰ ਲਾਇਬ੍ਰੇਰੀਆਂ ਜਾਂ ਫਰੇਮਵਰਕ ਚੁਣਦੇ ਹਨ ਜੋ ਵਰਤਣ ਲਈ ਮਜ਼ੇਦਾਰ ਹਨ।
ਇਹ ਇੱਕ ਮੁੱਖ ਕਾਰਨ ਹੈ ਕਿ ਸਾਡੇ ਕੋਲ ਹੁਣ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਫਰੇਮਵਰਕ ਕਿਉਂ ਹਨ। ਡਿਵੈਲਪਰ ਹੋਣ ਦੇ ਨਾਤੇ, ਜਦੋਂ ਸਾਡੇ ਕੰਮਾਂ ਵਿੱਚ ਸਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਮੌਜੂਦਾ ਟੂਲ ਬਣਾਏ ਗਏ ਹਨ ਤਾਂ ਸਾਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
ਫਰੇਮਵਰਕ ਸੌਫਟਵੇਅਰ ਦੇ ਟੁਕੜੇ ਹਨ ਜੋ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਬਣਾਏ ਅਤੇ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਅਤੇ NextJS ਉਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।
ਇਸ ਪੋਸਟ ਵਿੱਚ, ਅਸੀਂ Nextjs, ਇਸ ਦੀਆਂ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਅਤੇ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਅਸੀਂ ਇਸਨੂੰ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹਾਂ ਬਾਰੇ ਦੱਸਾਂਗੇ। ਚਲੋ ਅੰਦਰ ਛਾਲ ਮਾਰੀਏ।
Next.js ਕੀ ਹੈ?
Next.js ਸਥਿਰ ਵੈਬਪੇਜਾਂ ਅਤੇ ਪ੍ਰਤੀਕਿਰਿਆ-ਅਧਾਰਿਤ ਔਨਲਾਈਨ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਬਣਾਉਣ ਲਈ ਇੱਕ JavaScript ਫਰੇਮਵਰਕ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ ਵਿੰਡੋਜ਼, ਲੀਨਕਸ ਅਤੇ ਮੈਕ ਸਮੇਤ ਕਈ ਪਲੇਟਫਾਰਮਾਂ ਲਈ ਵਧੀਆ ਵੈੱਬ ਐਪਸ ਡਿਜ਼ਾਈਨ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਤੁਹਾਨੂੰ Next.js ਫਰੇਮਵਰਕ ਤੋਂ ਜਾਣੂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜੇਕਰ ਤੁਹਾਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆ ਨਾਲ ਘੱਟ ਤੋਂ ਘੱਟ ਜਾਣੂ ਹੈ ਅਤੇ ਤੁਸੀਂ ਪ੍ਰਤੀਕਿਰਿਆ ਈਕੋਸਿਸਟਮ ਬਾਰੇ ਹੋਰ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ।
ਭਾਵੇਂ Next.js ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੀ ਹਰ ਚੀਜ਼ ਦੇ ਨਾਲ ਆਉਂਦਾ ਹੈ, ਤੁਸੀਂ NPM ਅਤੇ ਯਾਰਨ, JavaScript ਅਤੇ TypeScript, CSS ਅਤੇ SCSS, ਸਥਿਰ ਨਿਰਯਾਤ, ਅਤੇ ਸਰਵਰ ਰਹਿਤ ਤੈਨਾਤੀ ਵਿਚਕਾਰ ਚੋਣ ਕਰ ਸਕਦੇ ਹੋ।
ਫੀਚਰ
- ਰੂਟਿੰਗ ਆਟੋਮੈਟਿਕਲੀ ਹੋ ਜਾਂਦੀ ਹੈ - ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ ਕਿਉਂਕਿ ਕਿਸੇ ਵੀ URL ਨੂੰ ਫਾਈਲ ਸਿਸਟਮ ਨਾਲ ਮੈਪ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪੇਜ ਫੋਲਡਰ ਦੀਆਂ ਫਾਈਲਾਂ ਨਾਲ (ਬੇਸ਼ਕ ਤੁਹਾਡੇ ਕੋਲ ਅਨੁਕੂਲਤਾ ਵਿਕਲਪ ਹਨ)।
- ਸਿੰਗਲ ਫਾਈਲ ਦੇ ਕੰਪੋਨੈਂਟਸ - ਸਟਾਈਲਡ-ਜੇਐਸਐਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਸਕੋਪ ਕੀਤੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਜੋੜਨਾ ਸਧਾਰਨ ਹੈ, ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਾਲ ਏਕੀਕ੍ਰਿਤ ਹੈ ਅਤੇ ਉਸੇ ਟੀਮ ਦੁਆਰਾ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।
- ਇੱਕ ਹੌਟ ਕੋਡ ਨੂੰ ਰੀਲੋਡ ਕਰਨਾ - ਜਦੋਂ Next.js ਡਿਸਕ ਵਿੱਚ ਸੁਰੱਖਿਅਤ ਕੀਤੀ ਇੱਕ ਸੋਧ ਦਾ ਪਤਾ ਲਗਾਉਂਦਾ ਹੈ, ਇਹ ਪੰਨੇ ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਦਾ ਹੈ।
- ਡਾਇਨਾਮਿਕ ਕੰਪੋਨੈਂਟਸ - ਤੁਸੀਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਮੋਡੀਊਲ ਅਤੇ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਲੋਡ ਕਰ ਸਕਦੇ ਹੋ।
- ਸਥਿਰ ਨਿਰਯਾਤ - Next.js ਤੁਹਾਨੂੰ ਅਗਲੀ ਨਿਰਯਾਤ ਕਮਾਂਡ ਨਾਲ ਤੁਹਾਡੇ ਐਪ ਤੋਂ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਥਿਰ ਸਾਈਟ ਨੂੰ ਨਿਰਯਾਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
- ਵਾਤਾਵਰਣ ਨਾਲ ਅਨੁਕੂਲਤਾ - Next.js JavaScript, ਨੋਡ, ਅਤੇ ਰੀਐਕਟ ਈਕੋਸਿਸਟਮ ਦੇ ਨਾਲ ਸਹਿਜੇ ਹੀ ਏਕੀਕ੍ਰਿਤ ਹੈ।
- ਸਪਲਿਟਿੰਗ ਕੋਡ ਆਟੋਮੈਟਿਕਲੀ - ਸਿਰਫ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਪੰਨਿਆਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਐਪ ਦੇ ਸਾਰੇ ਕੋਡ ਵਾਲੀ ਇੱਕ ਸਿੰਗਲ JavaScript ਫਾਈਲ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, Next.js ਸਮਝਦਾਰੀ ਨਾਲ ਐਪ ਨੂੰ ਕਈ ਸਰੋਤਾਂ ਵਿੱਚ ਵੰਡਦਾ ਹੈ।
ਇੱਕ next.js ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈਏ?
ਇੰਸਟਾਲੇਸ਼ਨ
ਤੁਸੀਂ Next.js ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਅਤੇ ਬਣਾਉਣ ਲਈ ਨੋਡ npx ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
ਇਹ ਇੱਕ ਫੋਲਡਰ ਅਤੇ Next.js ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਚਲਾਉਣ ਲਈ ਲੋੜੀਂਦੀਆਂ ਸਾਰੀਆਂ ਫਾਈਲਾਂ, ਸੰਰਚਨਾਵਾਂ ਅਤੇ ਹੋਰ ਆਈਟਮਾਂ ਤਿਆਰ ਕਰੇਗਾ।
ਤੁਸੀਂ ਐਪ ਨੂੰ ਤਿਆਰ ਕਰਨ ਤੋਂ ਬਾਅਦ ਲਾਂਚ ਕਰ ਸਕਦੇ ਹੋ।
ਪੰਨੇ ਅਤੇ ਰੂਟਿੰਗ
Next.js ਨਾਲ ਰੂਟਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ, ਸਾਨੂੰ ਰੂਟਿੰਗ ਫਰੇਮਵਰਕ ਨੂੰ ਨਿਯੁਕਤ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। Next.js ਨਾਲ ਰੂਟਿੰਗ ਸਥਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਹਵਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਨਵੀਂ Next.js ਐਪ ਬਣਾਉਣ ਲਈ create-next-app ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਐਪ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ 'ਪੇਜ਼' ਨਾਮਕ ਇੱਕ ਫੋਲਡਰ ਬਣਾਉਂਦਾ ਹੈ।
ਇਹ 'ਪੰਨੇ' ਫੋਲਡਰ ਉਹ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਰੂਟਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦੇ ਹੋ। ਨਤੀਜੇ ਵਜੋਂ, ਸਬ-ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਹਰੇਕ ਪ੍ਰਤੀਕਿਰਿਆ ਭਾਗ ਫਾਈਲ ਨੂੰ ਇੱਕ ਵੱਖਰੇ ਰੂਟ ਵਜੋਂ ਸੰਭਾਲਿਆ ਜਾਵੇਗਾ।
ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਫੋਲਡਰ ਵਿੱਚ ਉਹ ਫਾਈਲਾਂ ਹਨ:
- index.js
- about.js
- aricles.js
ਇਹ ਫਾਈਲ ਆਪਣੇ ਆਪ ਤਿੰਨ ਤਰੀਕਿਆਂ ਨਾਲ ਬਦਲ ਜਾਵੇਗੀ:
- ਸੂਚਕਾਂਕ ਪੰਨਾ ਲੋਕਲਹੋਸਟ/ਇੰਡੈਕਸ
- ਬਾਰੇ ਪੰਨਾ ਲੋਕਲਹੋਸਟ/ਬਾਰੇ
- ਬਲੌਗ ਪੇਜ ਲੋਕਲਹੋਸਟ/ਲੇਖ
ਇੱਕ about.js ਪੰਨੇ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੇਠਾਂ ਦਿਖਾਈ ਗਈ ਹੈ। ਪੰਨੇ ਬਾਰੇ ਕੁਝ ਵੀ ਨਹੀਂ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ। ਇਹ ਸਿਰਫ਼ ਇੱਕ ਸਟੈਂਡਰਡ ਰੀਐਕਟ ਫੰਕਸ਼ਨਲ ਕੰਪੋਨੈਂਟ ਹੈ।
ਰੂਟ
ਨੇਸਟਡ ਰੂਟ ਬਣਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਇੱਕ ਸਬਫੋਲਡਰ ਸਥਾਪਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ: ਪੰਨੇ/ਲੇਖ। ਉਸ ਫੋਲਡਰ ਦੇ ਅੰਦਰ ਆਪਣਾ 'contact.js' ਪ੍ਰਤੀਕਿਰਿਆ ਭਾਗ ਬਣਾਓ, ਅਤੇ ਇਹ ਪੰਨਾ ਲੋਕਲਹੋਸਟ/ਲੇਖ/ਸੰਪਰਕ ਤਿਆਰ ਕਰੇਗਾ।
ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਫਾਈਲ ਨੂੰ pages/articles.js ਵਿੱਚ ਅਤੇ ਦੂਜੀ ਨੂੰ pages/articles/index.js ਵਿੱਚ ਪਾਉਂਦੇ ਹੋ। ਦੋਵੇਂ ਲੋਕਲਹੋਸਟ/ਬਲੌਗ ਇੱਕੋ ਮਾਰਗ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, Next.js ਹੁਣੇ ਹੀ article.js ਫਾਈਲ ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ। ਡਾਇਨਾਮਿਕ ਰੂਟਾਂ ਬਾਰੇ ਕੀ, ਜਿਸ ਵਿੱਚ ਹਰੇਕ ਬਲੌਗ ਪੋਸਟ ਦਾ ਆਪਣਾ ਮਾਰਗ ਹੁੰਦਾ ਹੈ:
- ਲੋਕਲਹੋਸਟ/ਬਲੌਗ/ਪਹਿਲਾ-ਲੇਖ
- ਲੋਕਲਹੋਸਟ/ਬਲੌਗ/-ਦੂਜਾ-ਲੇਖ
ਬਰੈਕਟਸ ਨੋਟੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ Next.js ਵਿੱਚ ਇੱਕ ਡਾਇਨਾਮਿਕ ਰੂਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ: pages/article/[slug].js
ਲਿੰਕ ਰੂਟਸ
ਤੁਸੀਂ ਹੁਣ ਆਪਣਾ ਪਹਿਲਾ ਰਸਤਾ ਪੂਰਾ ਕਰ ਲਿਆ ਹੈ। ਮੈਂ ਅੰਦਾਜ਼ਾ ਲਗਾ ਰਿਹਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਪੁੱਛ ਰਹੇ ਹੋ ਕਿ ਪੰਨਿਆਂ ਨੂੰ ਉਹਨਾਂ ਰੂਟਾਂ ਨਾਲ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ। ਅਜਿਹਾ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ 'ਅਗਲਾ/ਲਿੰਕ' ਦੀ ਲੋੜ ਪਵੇਗੀ।
ਇੱਥੇ ਇੱਕ ਹੋਮ ਪੇਜ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜਿਸ ਵਿੱਚ ਇਸ ਬਾਰੇ ਪੰਨੇ ਦਾ ਲਿੰਕ ਸ਼ਾਮਲ ਹੈ:
ਜੇਕਰ ਤੁਸੀਂ ਲਿੰਕ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਹੇਠਾਂ ਦਿੱਤੇ ਸੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰੋ:
ਰੂਟਾਂ ਨੂੰ ਰੀਡਾਇਰੈਕਟ ਕਰੋ
ਉਦੋਂ ਕੀ ਜੇ ਤੁਹਾਨੂੰ ਕਿਸੇ ਖਾਸ ਪੰਨੇ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ? ਉਦਾਹਰਨ ਲਈ, ਜਦੋਂ ਇੱਕ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ? ਤੁਸੀਂ 'router.push' ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਨੂੰ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹੋ:
SEO
ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਪੰਨਿਆਂ ਨੂੰ 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 React ਦੇ ਸਿਖਰ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇਸਦੇ ਲਈ ਇੱਕ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਕਿੱਟ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ ਇਹ ਵੈੱਬ ਐਪਾਂ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਨ ਲਈ ਮੇਰੀ ਪਸੰਦੀਦਾ ਚੋਣ ਹੈ।
ਪਰ ਇਹ ਕਾਫ਼ੀ ਨਹੀਂ ਹੋਵੇਗਾ ਜੇਕਰ Next.js ਇਸ ਵਿੱਚ ਚੰਗਾ ਨਹੀਂ ਸੀ ... ਠੀਕ ਹੈ?
ਇਸ ਲਈ, ਇਹ ਅਸਲ ਵਿੱਚ ਕੀ ਕਰਦਾ ਹੈ?
ਇਸ ਨੂੰ ਸਮਝਣ ਲਈ ਸਾਨੂੰ ਪਹਿਲਾਂ ਕੁਝ ਸੰਕਲਪਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। Next.js ਨੇ ਪ੍ਰਸਿੱਧੀ ਪ੍ਰਾਪਤ ਕੀਤੀ ਕਿਉਂਕਿ ਇਸਨੇ ਇੱਕ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕੀਤਾ ਜੋ ਬਹੁਤ ਸਾਰੇ ਵੈਬ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਬ ਐਪਸ (ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ) ਨਾਲ ਸੀ। ਇਹਨਾਂ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਾਂ (SPAs) ਦਾ ਇੱਕ ਬਿਹਤਰ ਅਨੁਭਵ ਸੀ ਕਿਉਂਕਿ ਉਹਨਾਂ ਨੂੰ ਉਪਭੋਗਤਾ ਨੂੰ ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਸੀ ਅਤੇ ਹੋਰ ਇੰਟਰਐਕਟੀਵਿਟੀ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਗਈ ਸੀ।
ਹਾਲਾਂਕਿ, ਕਿਉਂਕਿ ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਐਪ ਵਿੱਚ ਬਹੁਤ ਸਾਰੀ ਸਮੱਗਰੀ ਉਦੋਂ ਹੀ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ ਜਦੋਂ ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਵੈੱਬ ਕ੍ਰੌਲਰਾਂ ਨੂੰ ਅਜਿਹੀ ਐਪ ਦੀ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਆਉਂਦੀ ਹੈ।
ਨਤੀਜੇ ਵਜੋਂ, ਉਹਨਾਂ ਦੀ ਪ੍ਰਸਿੱਧੀ ਦੇ ਬਾਵਜੂਦ, ਬਹੁਤ ਸਾਰੇ ਐਸਪੀਏ ਵੱਡੇ ਖੋਜ ਇੰਜਣਾਂ ਜਿਵੇਂ ਕਿ ਗੂਗਲ ਲਈ ਵੱਡੇ ਪੱਧਰ 'ਤੇ ਅਗਿਆਤ ਰਹੇ। Next.js ਵਿੱਚ ਹੁਣ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟਸ ਦੇ ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ (SSR) ਲਈ ਇੱਕ ਹੋਰ ਮਜਬੂਤ ਬਿਲਟ-ਇਨ ਵਿਧੀ ਸ਼ਾਮਲ ਹੈ।
Next.js ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਦੌਰਾਨ ਸਰਵਰ 'ਤੇ JavaScript ਕੋਡ ਬਣਾਉਣ ਅਤੇ ਉਪਭੋਗਤਾ ਨੂੰ ਬੁਨਿਆਦੀ, ਸੂਚਕਾਂਕ ਯੋਗ HTML ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਫ਼ਾਇਦੇ
- ਉਪਭੋਗਤਾ-ਅਨੁਭਵ ਲਈ ਵਧੀਆ
- ਐਸਈਓ ਲਈ ਵਧੀਆ
- ਇੱਕ ਸੁਪਰ-ਫਾਸਟ ਸਥਿਰ ਵੈਬਸਾਈਟ ਬਣਾਓ ਜੋ ਇੱਕ ਡਾਇਨਾਮਿਕ ਵਾਂਗ ਵਿਵਹਾਰ ਕਰਦੀ ਹੈ
- UI ਅਤੇ UX ਬਣਾਉਣ ਵਿੱਚ ਲਚਕਤਾ।
- ਬਹੁਤ ਸਾਰੇ ਵਿਕਾਸ ਫਾਇਦੇ
- ਮਹਾਨ ਭਾਈਚਾਰਕ ਸਹਾਇਤਾ
ਨੁਕਸਾਨ
- ਵੈੱਬਸਾਈਟਾਂ ਜਾਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਕੋਲ ਨਿਰਮਾਣ ਜਾਂ ਵਿਕਾਸ ਲਈ ਕੁਝ ਸਮਾਂ ਹੁੰਦਾ ਹੈ।
- ਕੁਝ ਕੰਮਾਂ ਲਈ, Next.js ਨਾਕਾਫ਼ੀ ਹੈ। ਡਿਵੈਲਪਰਾਂ ਨੂੰ Node.js ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਾਇਨਾਮਿਕ ਰੂਟ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
ਸਿੱਟਾ
ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ, Next.js ਰੀਐਕਟ ਐਪ ਵਿਕਾਸ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਚੀਜ਼ਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ - ਤੁਹਾਡੀ ਐਪ ਤਰਕ ਅਤੇ UI। ਇਸ ਵਿੱਚ ਸਮਕਾਲੀ, ਫਰੰਟਐਂਡ-ਅਮੀਰ ਅਤੇ API-ਸੰਚਾਲਿਤ ਐਪਸ ਬਣਾਉਣ ਲਈ ਲੋੜੀਂਦੀ ਹਰ ਚੀਜ਼ ਸ਼ਾਮਲ ਹੈ।
ਇਹ ਸਥਿਰ HTML ਪੰਨਿਆਂ ਨੂੰ ਬਣਾਉਣ ਦੀ ਯੋਗਤਾ ਦੇ ਕਾਰਨ, ਸਿਰਫ ਸਮੱਗਰੀ-ਪ੍ਰੋਜੈਕਟਾਂ, ਜਿਵੇਂ ਕਿ ਬਲੌਗ ਅਤੇ ਵਪਾਰਕ ਵੈੱਬਸਾਈਟਾਂ ਲਈ ਵੀ ਢੁਕਵਾਂ ਹੈ।
ਮੌਜੂਦਾ ਐਡੀਸ਼ਨਾਂ ਦੇ ਨਾਲ, Next.js ਨਾ ਸਿਰਫ਼ ਡਿਵੈਲਪਰ ਅਨੁਭਵ ਦੇ ਉੱਚ ਪੱਧਰ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ ਬਲਕਿ ਇਸ ਫਰੇਮਵਰਕ ਲਈ ਇੱਕ ਉੱਜਵਲ ਭਵਿੱਖ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵਿਜ਼ੂਅਲ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਣ ਲਈ ਟੂਲ ਵੀ ਦਿੰਦਾ ਹੈ।
ਕੋਈ ਜਵਾਬ ਛੱਡਣਾ