Next.js ਬੁਨਿਆਦ: ਪੰਨੇ ਬਣਾਉਣਾ ਅਤੇ ਬੁਨਿਆਦੀ Routing ਵਿਆਖਿਆ ਕੀਤੀ ਗਈ

ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ, ਪੰਨਿਆਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਅਤੇ ਉਹਨਾਂ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਹੈ। ਇਸ ਲੇਖ ਲੜੀ ਵਿੱਚ, ਅਸੀਂ ਪੰਨੇ ਬਣਾਉਣ ਅਤੇ ਵਿੱਚ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੀਆਂ ਬੁਨਿਆਦੀ ਗੱਲਾਂ ਦਾ ਅਧਿਐਨ ਕਰਾਂਗੇ Next.js । ਇਹ ਬੁਨਿਆਦੀ ਸੰਕਲਪ ਲਚਕਦਾਰ ਅਤੇ ਪ੍ਰਬੰਧਨਯੋਗ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹਨ।

ਪਹਿਲਾ ਪੰਨਾ ਬਣਾਉਣਾ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ

ਪਹਿਲਾਂ, ਆਓ ਸਮਝੀਏ ਕਿ ਵਿੱਚ ਇੱਕ ਸਧਾਰਨ ਪੰਨਾ ਕਿਵੇਂ ਬਣਾਇਆ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ Next.js । pages ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਫਾਈਲਾਂ ਬਣਾ ਕੇ ਪੰਨੇ ਬਣਾ ਸਕਦੇ ਹੋ । ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਸੁਆਗਤ ਪੰਨਾ ਬਣਾਉਣ ਲਈ, ਤੁਸੀਂ ਡਾਇਰੈਕਟਰੀ welcome.js ਵਿੱਚ ਨਾਮ ਦੀ ਇੱਕ ਫਾਈਲ ਬਣਾ ਸਕਦੇ ਹੋ। pages

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

ਉਪਰੋਕਤ ਕੋਡ ਸਨਿੱਪਟ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਸਧਾਰਨ ਸਵਾਗਤ ਪੰਨਾ ਬਣਾਇਆ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਮਾਰਗ ਤੱਕ ਪਹੁੰਚ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ "ਸੁਆਗਤ ਹੈ !" /welcome ਸੁਨੇਹਾ ਵੇਖੋਗੇ. Next.js ਪ੍ਰਦਰਸ਼ਿਤ.

ਮੂਲ Routing

Next.js ਇੱਕ ਮਜ਼ਬੂਤ ​​ਅਤੇ ਅਨੁਭਵੀ routing ਸਿਸਟਮ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਪੰਨਿਆਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। Routing in ਡਾਇਰੈਕਟਰੀ Next.js 'ਤੇ ਅਧਾਰਤ ਹੈ pages, ਇਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਹਰੇਕ ਫਾਈਲ ਇੱਕ ਖਾਸ ਮਾਰਗ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਡਾਇਰੈਕਟਰੀ about.js ਦੇ ਅੰਦਰ ਨਾਮ ਦੀ ਇੱਕ ਫਾਈਲ ਮਾਰਗ pages 'ਤੇ ਪਹੁੰਚਯੋਗ ਇੱਕ ਪੰਨਾ ਬਣਾਏਗੀ /about ।

ਲਿੰਕ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਬਣਾਉਣਾ

ਪੰਨਿਆਂ ਦੇ ਵਿਚਕਾਰ ਲਿੰਕ ਬਣਾਉਣ ਅਤੇ ਉਹਨਾਂ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ, ਅਸੀਂ ਲਾਇਬ੍ਰੇਰੀ <Link> ਤੋਂ ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। next/link ਹੇਠਾਂ ਸੁਆਗਤ ਪੰਨੇ ਤੋਂ ਸਾਡੇ ਬਾਰੇ ਪੰਨੇ ਲਈ ਲਿੰਕ ਬਣਾਉਣ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ।

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਜਦੋਂ ਤੁਸੀਂ "ਸਾਡੇ ਬਾਰੇ ਹੋਰ ਜਾਣੋ" ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ /about ਪੰਨੇ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕੀਤਾ ਜਾਵੇਗਾ।

ਸਿੱਟਾ

ਇਸ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਖੋਜ ਕੀਤੀ ਹੈ ਕਿ ਸਧਾਰਨ ਪੰਨਿਆਂ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ Next.js ਅਤੇ pages ਡਾਇਰੈਕਟਰੀ ਅਤੇ <Link> ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਪੰਨਿਆਂ ਵਿਚਕਾਰ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ। ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਸ਼ੁਰੂਆਤੀ ਕਦਮ ਹਨ Next.js । ਆਗਾਮੀ ਲੇਖਾਂ ਵਿੱਚ, ਅਸੀਂ Next.js ਡਾਇਨਾਮਿਕ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਹੋਰ ਪਹਿਲੂਆਂ ਦੀ ਪੜਚੋਲ ਕਰਨਾ ਜਾਰੀ ਰੱਖਾਂਗੇ।