Next.js ਕੀ ਹੈ? ਐਪ ਬਣਾਉਣ ਵਾਲਿਆਂ ਲਈ ਸਰਲ ਗਾਈਡ

Next.js ਵੈੱਬਸਾਈਟਾਂ ਅਤੇ ਵੈੱਬ ਐਪਾਂ ਬਣਾਉਣ ਲਈ React ਦਾ ਫਰੇਮਵਰਕ ਹੈ। React ਤੁਹਾਨੂੰ ਇੰਟਰਫੇਸ ਦੇ ਬਿਲਡਿੰਗ ਬਲਾਕ ਦਿੰਦਾ ਹੈ: ਬਟਨ, ਫਾਰਮ, ਸੂਚੀਆਂ। Next.js ਉਹਨਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਬਾਕੀ ਵੈੱਬਸਾਈਟ ਜੋੜਦਾ ਹੈ: ਪੇਜ ਅਤੇ URL, ਪੇਜਾਂ ਨੂੰ ਸਰਵਰ 'ਤੇ ਰੈਂਡਰ ਕਰਨਾ ਤਾਂ ਜੋ ਉਹ ਪੜ੍ਹਨ ਲਈ ਤਿਆਰ ਪਹੁੰਚਣ, ਡਾਟਾ ਲੋਡ ਕਰਨਾ, ਅਤੇ ਉਸੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੈਕਐਂਡ ਕੋਡ ਚਲਾਉਣਾ। ਇਹ ਓਪਨ ਸੋਰਸ ਹੈ, ਕੰਪਨੀ Vercel ਨੇ ਬਣਾਇਆ, ਅਤੇ React ਸਾਈਟਾਂ ਬਣਾਉਣ ਦੇ ਸਭ ਤੋਂ ਵੱਧ ਵਰਤੇ ਜਾਂਦੇ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

AI ਨਾਲ ਬਣਾਉਣ ਵਿੱਚ Next.js ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ

ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ AI ਬਿਲਡਰ ਨੂੰ ਐਪ ਦਾ ਵਰਣਨ ਕਰਦੇ ਹੋ, ਤਾਂ ਉਸਨੂੰ ਇੱਕ ਤਕਨੀਕੀ ਨੀਂਹ ਚੁਣਨੀ ਪੈਂਦੀ ਹੈ। ਇਹ ਚੋਣ ਬਾਅਦ ਵਿੱਚ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਨੂੰ ਬਦਲਦੀ ਹੈ ਜਿਨ੍ਹਾਂ ਦੀ ਤੁਹਾਨੂੰ ਪਰਵਾਹ ਹੈ:

• ਖੋਜ ਵਿੱਚ ਦਿੱਖ। ਜਨਤਕ ਸਾਈਟ ਜਿਸਨੂੰ Google ਵਿੱਚ ਰੈਂਕ ਕਰਨਾ ਹੈ, ਅਸਲ HTML ਭੇਜਣ ਤੋਂ ਲਾਭ ਲੈਂਦੀ ਹੈ, ਅਤੇ Next.js ਇਹ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕਰਦਾ ਹੈ।
• ਬੈਕਐਂਡ ਕਿੱਥੇ ਰਹਿੰਦਾ ਹੈ। Next.js ਫਰੰਟਐਂਡ ਪੇਜ ਅਤੇ ਸਰਵਰ ਕੋਡ (ਜਿਵੇਂ "ਇਹ ਫਾਰਮ ਸੰਭਾਲੋ" ਜਾਂ "ਪੇਮੈਂਟ API ਕਾਲ ਕਰੋ") ਇੱਕੋ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਰੱਖਣ ਦਿੰਦਾ ਹੈ।
• ਹੋਸਟਿੰਗ। ਸਰਵਰ ਫੀਚਰਾਂ ਵਾਲੀ Next.js ਐਪ ਨੂੰ ਚਲਾਉਣ ਲਈ ਸਰਵਰ ਚਾਹੀਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਸਾਦੀ Vite ਐਪ ਸਿਰਫ਼ ਸਟੈਟਿਕ ਫਾਈਲਾਂ ਵਜੋਂ ਪਰੋਸੀ ਜਾ ਸਕਦੀ ਹੈ।

Mythex ਨਵੇਂ ਪ੍ਰੋਜੈਕਟ Vite + React + TypeScript + Tailwind 'ਤੇ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਮੰਗਦੇ ਹੋ ਤਾਂ Next.js ਵਰਤਦਾ ਹੈ। ਤੁਹਾਡੇ ਪਹਿਲੇ ਪ੍ਰੋਂਪਟ ਵਿੱਚ "Use Next.js" ਕਾਫ਼ੀ ਹੈ (ਤਕਨੀਕ ਕਿਵੇਂ ਚੁਣੀ ਜਾਂਦੀ ਹੈ)। ਇਸ ਲਈ ਇਹ ਜਾਣਨਾ ਮਦਦਗਾਰ ਹੈ ਕਿ ਇਹ ਮੰਗਣਾ ਕਦੋਂ ਠੀਕ ਹੈ।

ਰੋਜ਼ ਦੀ ਮਿਸਾਲ

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

ਤੁਸੀਂ ਉਹੀ ਘਰ ਢਿੱਲੀਆਂ ਇੱਟਾਂ ਨਾਲ ਵੀ ਬਣਾ ਸਕਦੇ ਹੋ, ਬੱਸ ਤੁਹਾਨੂੰ ਖੁਦ ਤੈਅ ਕਰਨਾ ਪਵੇਗਾ ਕਿ ਕਮਰੇ ਕਿਵੇਂ ਜੁੜਦੇ ਹਨ, ਮੁੱਖ ਦਰਵਾਜ਼ਾ ਕਿੱਥੇ ਹੈ ਅਤੇ ਪਾਣੀ ਕਿਵੇਂ ਆਉਂਦਾ ਹੈ। Next.js ਇਹ ਫੈਸਲੇ ਇੱਕ ਮਿਆਰੀ ਢੰਗ ਨਾਲ ਤੁਹਾਡੇ ਲਈ ਲੈਂਦਾ ਹੈ, ਤਾਂ ਜੋ ਹਰ Next.js ਪ੍ਰੋਜੈਕਟ ਦਾ ਲੇਆਉਟ ਇੱਕੋ ਜਿਹਾ ਹੋਵੇ ਅਤੇ ਕੋਈ ਨਵਾਂ ਡਿਵੈਲਪਰ (ਜਾਂ AI) ਜਲਦੀ ਰਸਤਾ ਲੱਭ ਲਵੇ।

Next.js React ਵਿੱਚ ਕੀ ਜੋੜਦਾ ਹੈ

Next.js ਪੇਜਾਂ ਨੂੰ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ। App Router (app/ ਫੋਲਡਰ) ਨਵਾਂ ਹੈ ਅਤੇ Server Components ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। Pages Router (pages/ ਫੋਲਡਰ) ਅਸਲੀ ਹੈ ਅਤੇ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ। ਨਵੇਂ ਪ੍ਰੋਜੈਕਟ ਆਮ ਤੌਰ 'ਤੇ App Router ਵਰਤਦੇ ਹਨ। ਜੇ ਤੁਹਾਡੇ AI ਬਿਲਡਰ ਦਾ ਕੋਡ ਜਾਂ ਕੋਈ ਟਿਊਟੋਰੀਅਲ ਅਣਜਾਣਾ ਲੱਗੇ, ਤਾਂ ਅਕਸਰ ਇਹੀ ਕਾਰਨ ਹੁੰਦਾ ਹੈ।

ਇੱਕ ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ: ਸਥਾਨਕ ਕੈਫ਼ਿਆਂ ਦੀ ਜਨਤਕ ਡਾਇਰੈਕਟਰੀ

ਕਲਪਨਾ ਕਰੋ ਕਿ ਇੱਕ ਸਾਈਟ ਹੈ ਜੋ ਤੁਹਾਡੇ ਸ਼ਹਿਰ ਦੇ ਕੈਫ਼ਿਆਂ ਦੀ ਸੂਚੀ ਦਿੰਦੀ ਹੈ, ਹਰ ਕੈਫ਼ੇ ਲਈ ਇੱਕ ਪੇਜ ਨਾਲ, ਜੋ ਤੁਸੀਂ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ।

ਇੱਕ ਕੈਫ਼ੇ ਲਈ Next.js ਪੇਜ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਲੱਗ ਸਕਦਾ ਹੈ:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

ਜਦੋਂ ਕੋਈ (ਜਾਂ Google) /cafes/blue-door 'ਤੇ ਜਾਂਦਾ ਹੈ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ:

1. Next.js URL ਨੂੰ ਉਸ ਫਾਈਲ ਨਾਲ ਮਿਲਾਉਂਦਾ ਹੈ। [slug] ਫੋਲਡਰ ਦਾ ਮਤਲਬ ਹੈ "ਕੋਈ ਵੀ ਕੈਫ਼ੇ"।
2. ਕੰਪੋਨੈਂਟ ਸਰਵਰ 'ਤੇ ਚੱਲਦਾ ਹੈ, ਡਾਟਾਬੇਸ ਤੋਂ ਕੈਫ਼ੇ ਪੜ੍ਹਦਾ ਹੈ ਅਤੇ HTML ਬਣਾਉਂਦਾ ਹੈ।
3. ਬਰਾਊਜ਼ਰ ਨੂੰ ਪੂਰਾ ਪੇਜ ਮਿਲਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਕੈਫ਼ੇ ਦਾ ਨਾਂ ਅਤੇ ਪਤਾ ਪਹਿਲਾਂ ਤੋਂ ਹੁੰਦਾ ਹੈ, ਡਾਟਾ ਲਈ JavaScript ਦੀ ਉਡੀਕ ਨਹੀਂ।

ਸਾਦੀ client-side React ਐਪ ਨਾਲ ਬਰਾਊਜ਼ਰ ਪਹਿਲਾਂ ਲਗਭਗ ਖਾਲੀ ਪੇਜ ਲੈਂਦਾ, ਫਿਰ JavaScript ਡਾਊਨਲੋਡ ਕਰਦਾ, ਫਿਰ ਕੈਫ਼ੇ ਲਿਆਉਂਦਾ, ਅਤੇ ਫਿਰ ਦਿਖਾਉਂਦਾ। ਖੋਜ ਇੰਜਣ ਅਕਸਰ ਇਹ ਸੰਭਾਲ ਲੈਂਦੇ ਹਨ, ਪਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਣਿਆ ਪੇਜ ਵਧੇਰੇ ਭਰੋਸੇਯੋਗ ਹੁੰਦਾ ਹੈ। ਵੇਖੋ AI ਨਾਲ ਬਣੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਲਈ SEO।

ਇਸਦੀ ਤੁਲਨਾ ਲੌਗਇਨ ਪਿੱਛੇ ਸਟਾਫ਼ ਲਈ ਡੈਸ਼ਬੋਰਡ ਨਾਲ ਕਰੋ: ਖੋਜ ਇੰਜਣ ਇਸਨੂੰ ਵੈਸੇ ਵੀ ਨਹੀਂ ਵੇਖ ਸਕਦੇ, ਇਸ ਲਈ ਸਰਵਰ ਰੈਂਡਰਿੰਗ ਦਾ ਫਾਇਦਾ ਘੱਟ ਹੈ, ਅਤੇ ਇੱਕ ਸਾਦੀ Vite ਐਪ ਅਕਸਰ ਬਿਹਤਰ ਫਿੱਟ ਹੁੰਦੀ ਹੈ।

ਮੁੱਖ ਸ਼ਬਦ

ਆਮ ਗਲਤਫਹਿਮੀਆਂ

• "Next.js React ਦੀ ਥਾਂ ਲੈਂਦਾ ਹੈ।" ਅਜਿਹਾ ਨਹੀਂ। ਇਹ React ਵਰਤਦਾ ਹੈ। ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਅਜੇ ਵੀ React ਕੰਪੋਨੈਂਟ ਹਨ।
• "Next.js ਹਮੇਸ਼ਾ ਬਿਹਤਰ ਚੋਣ ਹੈ।" ਇਹ ਵਧੇਰੇ ਸਮਰੱਥ ਹੈ, ਅਤੇ ਸਮਝਣ ਲਈ ਵੀ ਵਧੇਰੇ ਹੈ। ਸਰਵਰ ਰੈਂਡਰਿੰਗ, ਕੈਸ਼ਿੰਗ ਅਤੇ ਸਰਵਰ ਤੇ ਕਲਾਇੰਟ ਕੋਡ ਵਿਚਕਾਰ ਫਰਕ ਉਲਝਣ ਵਾਲੇ ਬੱਗਾਂ ਦੇ ਆਮ ਕਾਰਨ ਹਨ। ਲੌਗਇਨ ਪਿੱਛੇ ਜ਼ਿਆਦਾਤਰ ਕੰਮ ਵਾਲੀ ਐਪ ਲਈ ਸਾਦੀ React ਐਪ ਅਕਸਰ ਸਰਲ ਹੁੰਦੀ ਹੈ।
• "Next.js ਸਿਰਫ਼ Vercel 'ਤੇ ਚੱਲਦਾ ਹੈ।" ਇਹ ਓਪਨ ਸੋਰਸ ਹੈ ਅਤੇ ਕਿਸੇ ਵੀ Node.js ਸਰਵਰ ਜਾਂ Docker ਕੰਟੇਨਰ ਵਿੱਚ ਚੱਲ ਸਕਦਾ ਹੈ। ਜੇ ਸਰਵਰ ਫੀਚਰ ਨਾ ਵਰਤੋ ਤਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਟੈਟਿਕ ਐਕਸਪੋਰਟ ਵੀ ਸੰਭਵ ਹੈ।
• "Next.js ਵਰਤਣ ਨਾਲ ਚੰਗਾ SEO ਯਕੀਨੀ ਹੈ।" ਇਹ ਪੜ੍ਹਨਯੋਗ ਪੇਜ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਰੈਂਕਿੰਗ ਅਜੇ ਵੀ ਟਾਈਟਲ, ਸਮੱਗਰੀ, ਰਫ਼ਤਾਰ ਅਤੇ ਲਿੰਕਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ।
• "Next.js ਵਿੱਚ ਸਰਵਰ ਕੋਡ ਆਪਣੇ ਆਪ ਨਿੱਜੀ ਹੈ।" ਕਲਾਇੰਟ ਲਈ ਚਿੰਨ੍ਹਿਤ ਕੋਡ ਬਰਾਊਜ਼ਰ ਤੱਕ ਪਹੁੰਚਦਾ ਹੈ। ਰਾਜ਼ ਸਿਰਫ਼ ਸਰਵਰ-ਓਨਲੀ ਕੋਡ ਵਿੱਚ ਰਹਿਣੇ ਚਾਹੀਦੇ ਹਨ ਅਤੇ ਐਨਵਾਇਰਮੈਂਟ ਵੇਰੀਏਬਲ ਵਿੱਚ।

ਆਪਣੇ AI ਬਿਲਡਰ ਤੋਂ ਕੀ ਪੁੱਛਣਾ ਹੈ

• "Next.js ਨੂੰ App Router ਨਾਲ ਵਰਤੋ" ਆਪਣੇ ਪਹਿਲੇ ਪ੍ਰੋਂਪਟ ਵਿੱਚ, ਜੇ ਤੁਸੀਂ ਇਹ ਚਾਹੁੰਦੇ ਹੋ।
• "ਕਿਹੜੇ ਪੇਜ ਸਰਵਰ 'ਤੇ ਰੈਂਡਰ ਹੁੰਦੇ ਹਨ, ਕਿਹੜੇ ਸਟੈਟਿਕ ਹਨ ਅਤੇ ਕਿਹੜੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੇ ਹਨ, ਅਤੇ ਕਿਉਂ?"
• "ਜਨਤਕ ਮਾਰਕੀਟਿੰਗ ਅਤੇ ਲਿਸਟਿੰਗ ਪੇਜਾਂ ਨੂੰ ਸਰਵਰ-ਰੈਂਡਰ ਜਾਂ ਸਟੈਟਿਕ ਬਣਾਓ, ਸਹੀ ਟਾਈਟਲ ਅਤੇ ਵੇਰਵਿਆਂ ਨਾਲ।"
• "API ਕੁੰਜੀਆਂ ਸਿਰਫ਼ ਸਰਵਰ-ਓਨਲੀ ਕੋਡ ਅਤੇ ਐਨਵਾਇਰਮੈਂਟ ਵੇਰੀਏਬਲ ਵਿੱਚ ਰੱਖੋ। ਦਿਖਾਓ ਕਿ ਹਰ ਇੱਕ ਕਿੱਥੋਂ ਪੜ੍ਹੀ ਜਾਂਦੀ ਹੈ।"
• "ਕੀ ਇਸ ਐਪ ਨੂੰ Next.js ਦੀ ਲੋੜ ਹੈ, ਜਾਂ ਜੋ ਅਸੀਂ ਬਣਾ ਰਹੇ ਹਾਂ ਉਸ ਲਈ Vite + React ਐਪ ਸਰਲ ਹੋਵੇਗੀ?"

Mythex ਵਿੱਚ Next.js

Mythex ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ Vite + React + TypeScript + Tailwind ਵਰਤਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਪ੍ਰੋਂਪਟ ਵਿੱਚ ਮੰਗਦੇ ਹੋ ਤਾਂ Next.js 'ਤੇ ਬਦਲ ਜਾਂਦਾ ਹੈ; ਇਸਨੂੰ ਸ਼ੁਰੂ ਵਿੱਚ ਨਾਂ ਲੈਣ ਨਾਲ ਬਾਅਦ ਵਿੱਚ ਬਦਲਣ ਦੇ ਮੁਕਾਬਲੇ ਕ੍ਰੈਡਿਟ ਬਚਦੇ ਹਨ। ਤੁਸੀਂ ਐਪ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਵੇਖਦੇ ਹੋ, ਅਤੇ Publish ਇਸਨੂੰ ਬਿਨਾਂ ਆਪਣੀ ਹੋਸਟਿੰਗ ਸੈੱਟ ਕੀਤੇ ਇੱਕ ਲਾਈਵ URL 'ਤੇ ਡਿਪਲੌਏ ਕਰਦਾ ਹੈ। Mythex ਦੇ ਡੌਕਸ ਦੱਸਦੇ ਹਨ ਕਿ ਕਲਾਇੰਟ-ਰੈਂਡਰ ਹੋਣ ਵਾਲੀਆਂ ਸਿੰਗਲ-ਪੇਜ ਐਪਾਂ ਦਾ SEO ਸਰਵਰ-ਰੈਂਡਰ ਜਾਂ ਸਟੈਟਿਕ HTML ਨਾਲੋਂ ਕਮਜ਼ੋਰ ਹੈ, ਇਸ ਲਈ ਜੇ ਖੋਜ ਮਹੱਤਵਪੂਰਨ ਹੈ ਤਾਂ ਸ਼ੁਰੂ ਵਿੱਚ ਹੀ ਇਹ ਕਹਿਣਾ ਚੰਗਾ ਹੈ (ਤੁਹਾਡੀ ਐਪ ਲਈ SEO)।

ਸਵਾਲ