Next.js ਦਾ ਪ੍ਰਾਰੰਭਿਕ ਮਾਰਗਦਰਸ਼ਕ: ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਚੋਣ

ਪਰੀਚਯ

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

Next.js ਕੀ ਹੈ?

Next.js ਇੱਕ React ਦਾ ਫਰੇਮਵਰਕ ਹੈ, ਜੋ ਵਿਕਾਸਕਰਤਾਵਾਂ ਨੂੰ ਉਤਪਾਦਨ ਲਈ ਤਿਆਰ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਇਹ ਕਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਫੀਚਰਾਂ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ:

• ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ (SSR) ਅਤੇ ਸਟੈਟਿਕ ਜਨਰੇਸ਼ਨ (SSG): ਸਰਵਰ 'ਤੇ ਪੰਨਿਆਂ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਰੈਂਡਰ ਕਰਨ ਦਾ ਸਮਰਥਨ, ਲੋਡਿੰਗ ਦੀ ਗਤੀ ਅਤੇ SEO ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ।
• ਰੂਟਿੰਗ: ਇੰਬਿਲਟ ਫਾਈਲ ਸਿਸਟਮ ਰੂਟਿੰਗ, ਪੰਨਿਆਂ ਅਤੇ API ਰੂਟਿੰਗ ਦੇ ਪ੍ਰਬੰਧਨ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ।
• API ਰੂਟਿੰਗ: ਇੱਕੋ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ API ਬਣਾਉਣ ਦੀ ਸਮਰਥਾ, ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਸਰਵਰ ਦੀ ਲੋੜ।
• ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਅਨੁਕੂਲਨ: ਆਟੋਮੈਟਿਕ ਕੋਡ ਸਪਲਿਟਿੰਗ, ਸ਼ੁਰੂਆਤੀ ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਘਟਾਉਂਦੀ ਹੈ।

Next.js ਨੂੰ ਇੰਸਟਾਲ ਕਰਨਾ

Next.js ਨੂੰ ਇੰਸਟਾਲ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਹੈ, ਸਿਰਫ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੇ ਵਿਕਾਸ ਦੇ ਵਾਤਾਵਰਨ ਵਿੱਚ Node.js ਇੰਸਟਾਲ ਹੈ। ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਹੁਕਮਾਂ ਦੇ ਨਾਲ ਇੱਕ ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ:

npx create-next-app@latest my-next-app  
cd my-next-app  
npm run dev  

ਉਪਰੋਕਤ ਹੁਕਮ ਚਲਾਉਣ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ http://localhost:3000 'ਤੇ ਇੱਕ ਨਵਾਂ Next.js ਐਪ ਸ਼ੁਰੂ ਹੋ ਗਿਆ ਹੈ।

ਪ੍ਰੋਜੈਕਟ ਦੀ ਸੰਰਚਨਾ

Next.js ਐਪ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਇੱਕ ਡਿਫਾਲਟ ਡਾਇਰੈਕਟਰੀ ਸੰਰਚਨਾ ਦੇਖੋਗੇ:

my-next-app/  
├── node_modules/  
├── public/  
├── src/  
│   ├── pages/  
│   ├── styles/  
│   └── components/  
├── package.json  
└── next.config.js  

• pages/: ਪੰਨਿਆਂ ਨੂੰ ਰੱਖਣ ਵਾਲੀ ਡਾਇਰੈਕਟਰੀ, ਹਰ .js ਫਾਈਲ ਆਪਣੇ ਆਪ ਵਿੱਚ ਇੱਕ ਰੂਟ ਨਾਲ ਜੁੜੇਗੀ।
• public/: ਸਟੈਟਿਕ ਫਾਈਲਾਂ ਦੀ ਡਾਇਰੈਕਟਰੀ, ਇਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਰੱਖੀਆਂ ਗਈਆਂ ਫਾਈਲਾਂ ਨੂੰ ਸਿੱਧਾ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ।
• styles/: CSS ਫਾਈਲਾਂ ਨੂੰ ਰੱਖਣ ਵਾਲੀ ਡਾਇਰੈਕਟਰੀ, ਜੋ ਗਲੋਬਲ ਜਾਂ ਵਿਸ਼ੇਸ਼ ਕੰਪੋਨੈਂਟਾਂ ਦੇ ਸ਼ੈਲੀ ਲਈ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ।

ਪੰਨੇ ਅਤੇ ਰੂਟ ਬਣਾਉਣਾ

Next.js ਦੇ ਪੰਨੇ ਫਾਈਲ ਸਿਸਟਮ ਦੇ ਆਧਾਰ 'ਤੇ ਰੂਟਿੰਗ ਪ੍ਰਬੰਧਨ ਕਰਦੇ ਹਨ। pages/ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਫਾਈਲ ਬਣਾਓ, ਜਿਵੇਂ ਕਿ about.js, ਜਿਸ ਵਿੱਚ ਸਮੱਗਰੀ ਹੇਠਾਂ ਦਿੱਤੀ ਗਈ ਹੈ:

export default function About() {  
  return  

# ਸਾਡੇ ਬਾਰੇ  

;  
}  

ਇਹ ਆਪਣੇ ਆਪ /about ਰੂਟ ਬਣਾਏਗਾ ਜਿਸ ਨਾਲ ਇਸ ਪੰਨੇ ਤੱਕ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ।

ਸਟੈਟਿਕ ਜਨਰੇਸ਼ਨ ਅਤੇ ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ

Next.js ਡੇਟਾ ਪ੍ਰਾਪਤੀ ਦੀ ਰਣਨੀਤੀ ਦੇ ਆਧਾਰ 'ਤੇ ਸਟੈਟਿਕ ਜਨਰੇਸ਼ਨ (Static Generation) ਅਤੇ ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ (Server-side Rendering) ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਆਓ ਦੇਖੀਏ ਕਿ ਇਹ ਕਿਵੇਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

ਸਟੈਟਿਕ ਜਨਰੇਸ਼ਨ (Static Generation)

ਜਦੋਂ ਪ੍ਰੋਜੈਕਟ ਬਣਾਇਆ ਜਾ ਰਿਹਾ ਹੈ, ਤਾਂ ਸਮੱਗਰੀ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਜਨਰੇਟ ਕਰਨ ਲਈ, ਤੁਸੀਂ getStaticProps ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ:

export async function getStaticProps() {  
  const data = await fetch('https://api.example.com/data');  
  const json = await data.json();  

  return {  
    props: {  
      data: json,  
    },  
  };  
}  

export default function Page({ data }) {  
  return {data.title};  
}  

ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ (Server-side Rendering)

ਜੇ ਤੁਸੀਂ ਹਰ ਵਾਰੀ ਬੇਨਤੀ 'ਤੇ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ getServerSideProps ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ:

export async function getServerSideProps() {  
  const res = await fetch('https://api.example.com/data');  
  const data = await res.json();  

  return { props: { data } };  
}  

export default function Page({ data }) {  
  return {data.title};  
}  

CSS ਅਤੇ ਸ਼ੈਲੀਆਂ ਸ਼ਾਮਲ ਕਰਨਾ

Next.js CSS ਸ਼ੈਲੀਆਂ ਸ਼ਾਮਲ ਕਰਨ ਦੇ ਕਈ ਤਰੀਕੇ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ styles/ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ CSS ਫਾਈਲ ਬਣਾਉਣਾ ਅਤੇ ਜਿਨ੍ਹਾਂ ਪੰਨਿਆਂ ਵਿੱਚ ਲੋੜ ਹੈ ਉਨ੍ਹਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ:

import styles from './styles/Home.module.css';  

export default function Home() {  
  return  

# Next.js ਵਿੱਚ ਤੁਹਾਡਾ ਸੁਆਗਤ ਹੈ!  

;  
}  

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ CSS-in-JS ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਰਗੀਆਂ styled-components ਜਾਂ Emotion ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦੇ ਹੋ।

API ਰੂਟ

ਤੁਸੀਂ pages/api/ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ API ਰੂਟ ਬਣਾਉਣ ਲਈ ਫਾਈਲਾਂ ਬਣਾਉਣਗੇ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ hello.js ਫਾਈਲ ਬਣਾਓ:

export default function handler(req, res) {  
  res.status(200).json({ message: 'Hello API' });  
}  

API ਰੂਟ ਬੇਨਤੀਆਂ ਅਤੇ ਜਵਾਬਾਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦੇ ਹਨ, ਫਰੰਟ-ਐਂਡ ਨੂੰ ਗਤੀਸ਼ੀਲ ਡੇਟਾ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਦੀ ਸਮਰਥਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

Next.js ਐਪ ਨੂੰ ਡਿਪਲੋਇ ਕਰਨਾ

ਸਭ ਤੋਂ ਆਸਾਨ ਡਿਪਲੋਇਮੈਂਟ ਤਰੀਕਾ Vercel ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ, ਜੋ Next.js ਦੀ ਵਿਕਾਸ ਟੀਮ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਮੁਫਤ ਹੋਸਟਿੰਗ ਪਲੇਟਫਾਰਮ ਹੈ। ਸਿਰਫ ਕੋਡ ਨੂੰ GitHub 'ਤੇ ਧੱਕੋ, ਫਿਰ Vercel ਨਾਲ GitHub ਖਾਤਾ ਜੋੜੋ, ਤਾਂ ਕਿ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਡਿਪਲੋਇ ਕੀਤਾ ਜਾ ਸਕੇ।

ਨਿਸ਼ਕਰਸ਼

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

ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਕੋਈ ਸਵਾਲ ਹਨ ਜਾਂ ਹੋਰ ਸਿੱਖਣ ਲਈ ਸਰੋਤਾਂ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਕਿਰਪਾ ਕਰਕੇ Next.js ਦੇ ਆਧਿਕਾਰਿਕ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਵੇਖਣ ਵਿੱਚ ਹਿਚਕਿਚਾਓ ਨਾ।