Next.js - त्वरित गाइड

Next.js रिएक्ट आधारित फ्रेमवर्क है जिसमें सर्वर साइड रेंडरिंग क्षमता है। यह बहुत तेज़ और SEO फ्रेंडली है।

Next.js का उपयोग करके, आप काफी आसानी से मजबूत प्रतिक्रिया आधारित अनुप्रयोग बना सकते हैं और उनका परीक्षण कर सकते हैं। Next.js. की प्रमुख विशेषताएं निम्नलिखित हैं

Hot Code Reload - Next.js सर्वर संशोधित फ़ाइलों का पता लगाता है और उन्हें स्वचालित रूप से पुनः लोड करता है।
Automatic Routing- रूटिंग के लिए किसी भी यूआरएल को कॉन्फ़िगर करने की आवश्यकता नहीं है। फ़ाइलों को पृष्ठ फ़ोल्डर में रखा जाना है। सभी url को फाइल सिस्टम में मैप किया जाएगा। अनुकूलन किया जा सकता है।
Component specific styles - स्टाइल-जेएसएक्स वैश्विक के साथ-साथ घटक विशिष्ट शैलियों के लिए समर्थन प्रदान करता है।
Server side rendering - प्रतिक्रिया घटक सर्वर पर पहले से रेंडर हैं इसलिए क्लाइंट पर तेजी से लोड होता है।
Node Ecosystem - Next.js नोड नोड पारिस्थितिकी तंत्र के साथ अच्छी तरह से आधारित जैल प्रतिक्रिया कर रहे हैं।
Automatic code split- Next.js उन पुस्तकालयों के साथ पृष्ठों को प्रस्तुत करता है जिनकी उन्हें आवश्यकता होती है। Next.js एक बड़ी जावास्क्रिप्ट फ़ाइल बनाने के बजाय, कई संसाधन बनाता है। जब कोई पृष्ठ लोड किया जाता है, तो उसके साथ केवल आवश्यक जावास्क्रिप्ट पेज लोड किया जाता है।
Prefetch - Next.js लिंक घटक प्रदान करता है जिसका उपयोग कई घटकों को जोड़ने के लिए किया जाता है जो पृष्ठभूमि में पृष्ठ संसाधनों को प्रीफ़ैच करने के लिए प्रीफ़ेट प्रॉपर्टी का समर्थन करता है।
Dynamic Components - Next.js जावास्क्रिप्ट मॉड्यूल और रिएक्ट कंपोनेंट्स को गतिशील रूप से आयात करने की अनुमति देता है।
Export Static Site - Next.js आपके वेब एप्लिकेशन से पूर्ण स्थैतिक साइट को निर्यात करने की अनुमति देता है।
Built-in Typescript Support - Next.js को टाइपस्क्रिप्ट में लिखा गया है और उत्कृष्ट टाइपस्क्रिप्ट सहायता प्रदान करता है।

जैसा कि Next.js एक प्रतिक्रिया आधारित ढांचा है, हम नोड वातावरण का उपयोग कर रहे हैं। अब सुनिश्चित करें कि आपके पास हैNode.js तथा npmआपके सिस्टम पर स्थापित है। Next.js को स्थापित करने के लिए आप निम्न कमांड का उपयोग कर सकते हैं -

npm install next react react-dom

एक बार Next.js के सफलतापूर्वक इंस्टॉल हो जाने पर आप निम्नलिखित आउटपुट देख सकते हैं -

+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s

अब, एक नोड package.json बनाएँ -

npm init

Package.json बनाते समय डिफ़ॉल्ट मान चुनें -

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}
Is this OK? (yes)

अब Next.js कमांड को शामिल करने के लिए package.json के स्क्रिप्ट सेक्शन को अपडेट करें।

{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "next",
      "build": "next build",
      "start": "next start"
   },
   "author": "",
   "license": "ISC"
}

पेज डायरेक्टरी बनाएं।

नेक्स्टज फोल्डर के भीतर एक पेज फोल्डर बनाएं और निम्नलिखित कंटेंट के साथ एक index.js फाइल बनाएं।

function HomePage() {
   return <div>Welcome to Next.js!</div>
}

export default HomePage

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

Next.js में, हम फाइल सिस्टम रूटिंग फीचर का उपयोग करके पेज बना सकते हैं और उनके बीच नेविगेट कर सकते हैं। हम उपयोग करेंगेLink पेज के बीच क्लाइंट साइड नेविगेशन करने के लिए घटक।

Next.js में, एक पृष्ठ एक प्रतिक्रिया घटक है और पेज निर्देशिका से निर्यात किया जाता है। प्रत्येक पृष्ठ अपने फ़ाइल नाम के आधार पर मार्ग से जुड़ा होता है। उदाहरण के लिए

pages/index.js '/' मार्ग से जुड़ा हुआ है।
pages/posts/first.js linked / पोस्ट / पहले ’मार्ग वगैरह से जुड़ा हुआ है।

चलिए एनवायरमेंट सेटअप चैप्टर में बनाए गए नेक्स्ट प्रोजेक्ट को अपडेट करते हैं ।

निम्नलिखित सामग्री के साथ पोस्ट निर्देशिका और First.js बनाएं।

export default function FirstPost() {
   return <h1>My First Post</h1>
}

होम पेज पर वापस जाने के लिए लिंक सपोर्ट जोड़ें। अपडेट इस प्रकार है।

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

पहले पृष्ठ पर नेविगेट करने के लिए होम पेज पर लिंक सपोर्ट जोड़ें। अपडेट index.js इस प्रकार है -

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

First Link पर क्लिक करें और आपको निम्न आउटपुट दिखाई देगा।

Next.js में, हम स्थैतिक पृष्ठों को छवियों की तरह बहुत आसानी से परोस सकते हैं public, एक शीर्ष स्तर निर्देशिका। हम इन फ़ाइलों को उसी तरह से देख सकते हैं जैसे कि पृष्ठ मेंpages निर्देशिका।

Next.js में, एक पृष्ठ एक प्रतिक्रिया घटक है और पेज निर्देशिका से निर्यात किया जाता है। प्रत्येक पृष्ठ अपने फ़ाइल नाम के आधार पर मार्ग से जुड़ा होता है।

चलिए पेजेज चैप्टर में प्रयुक्त नेक्स्ट प्रोजेक्ट को अपडेट करते हैं ।

सार्वजनिक निर्देशिका बनाएं और उसके भीतर कोई भी चित्र रखें। हमने logo.png, TutorialsPoint लोगो छवि ली है।

अपडेट इस प्रकार है।

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

यहाँ हमने index.js फ़ाइल में logo.png का संदर्भ जोड़ा है।

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

सार्वजनिक निर्देशिका एसईओ उद्देश्य के मामले में भी उपयोगी है। इसका उपयोग web.txt, Google साइट सत्यापन या वेब एप्लिकेशन में किसी भी अन्य स्थिर संपत्ति के लिए किया जा सकता है।

Next.js में, हम प्रत्येक प्रतिक्रिया पृष्ठों के सिर अनुभाग को बहुत आसानी से संशोधित कर सकते हैं <Head> घटक जो इनबिल्ट है प्रतिक्रिया करें।

चलिए पेजेज चैप्टर में प्रयुक्त नेक्स्ट प्रोजेक्ट को अपडेट करते हैं ।

अपडेट index.js इस प्रकार है -

import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export default HomePage

अपडेट इस प्रकार है।

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
   return (
      <>
      <Head>
         <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
         <Link href="/">
            <a>Home</a>
         </Link>
      </h2>
      </>	  
   )
}

यहाँ हमने index.js फ़ाइल में logo.png का संदर्भ जोड़ा है।

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

फर्स्ट पेज लिंक पर क्लिक करें और फर्स्ट पोस्ट पेज में परिवर्तित शीर्षक को सत्यापित करें।

Next.js में, हम स्टाइल-जेएसएक्स नामक सीएसएस-इन-जेएस लाइब्रेरी के इनबिल्ट का उपयोग कर सकते हैं। यह एक प्रतिक्रिया घटक के भीतर सीएसएस लिखने की अनुमति देता है और इन शैलियों को घटक के लिए बंद कर दिया जाएगा।

इस उदाहरण में, हम एक कंटेनर ऑब्जेक्ट बनाएंगे जिसका उपयोग अन्य घटकों को स्टाइल करने के लिए किया जाएगा।

आइए मेटा डेटा चैप्टर में प्रयुक्त नेक्स्ट प्रोजेक्ट को अपडेट करें ।

पहले रूट स्तर पर एक कंपोनेंट डायरेक्टरी बनाएं और एक फाइल कंटेनर जोड़ें। pmule.css इस प्रकार है -

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

घटक निर्देशिका में कंटेनर.जेएस फ़ाइल बनाएँ

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

अब First.js में कंटेनर घटक का उपयोग करें।

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउज़र में 3000 और पहले पोस्ट पर जाएं, आपको निम्न आउटपुट दिखाई देगा।

Next.js में, आइए वैश्विक शैलियों का निर्माण करें जो सभी पृष्ठों पर लागू की जाएंगी।

इस उदाहरण में, हम एक शैलियों का निर्माण करेंगे। सभी घटक जिनका उपयोग _app.js घटक का उपयोग करके किया जाएगा।

चलिए CSS सपोर्ट चैप्टर में प्रयुक्त नेक्स्ट प्रोजेक्ट को अपडेट करते हैं ।

पहले रूट स्तर पर एक स्टाइल डायरेक्टरी बनाएं और एक फाइल स्टाइल जोड़ें। इस प्रकार है -

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

पेज डायरेक्टरी में _app.js फाइल बनाएं

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

फर्स्ट पोस्ट लिंक पर क्लिक करें।

Next.js में, हम जानते हैं कि यह प्री-रेंडरिंग नामक पेज के लिए HTML उत्पन्न करता है। Next.JS दो प्रकार के पूर्व-प्रतिपादन का समर्थन करता है।

Static Generation- यह तरीका बिल्ड टाइम पर HTML पेज बनाता है। यह पूर्व-प्रदत्त HTML प्रत्येक अनुरोध पर भेजा जाता है। यह वेबसाइट मार्केटिंग वेबसाइट्स, ब्लॉग्स, ई-कॉमर्स प्रोडक्ट्स की वेसाइट्स, हेल्प, डॉक्यूमेंटेशन वेबसाइट्स के लिए उपयोगी है।
Server Side Generation- यह विधि प्रत्येक अनुरोध पर HTML पेज बनाती है। जब एचटीएमएल पेज की सामग्री प्रत्येक अनुरोध के साथ भिन्न हो सकती है तो यह विधि उपयुक्त है।

प्रति पृष्ठ पूर्व-प्रतिपादन

Next.JS प्रत्येक पृष्ठ के लिए प्री-रेंडरिंग विधि सेट करने की अनुमति देता है, जहां अधिकांश पृष्ठ स्थैतिक पीढ़ी का पालन करते हैं और अन्य पेज सर्वर साइड रेंडरिंग का उपयोग करेंगे।

डेटा के बिना स्टेटिक जनरेशन

डेटा के बिना स्टेटिक जेनरेशन हो सकती है जिस स्थिति में, HTML पेज डेटा तैयार करने की आवश्यकता के बिना तैयार होंगे और फिर रेंडर करना शुरू करेंगे। बाद में या अनुरोध पर डेटा प्राप्त किया जा सकता है। यह तकनीक उपयोगकर्ता को उपयोगकर्ता इंटरफ़ेस दिखाने में मदद करती है बिना किसी डेटा के मामले में आने में समय लगता है।

डेटा के साथ स्टेटिक जनरेशन

स्टेटिक जेनरेशन डेटा के साथ किया जा सकता है, जिस स्थिति में एचटीएमएल पेज तैयार नहीं होंगे, जब तक कि डेटा लेट न हो जाए, क्योंकि एचटीएमएल डेटा पर निर्भर हो सकता है। प्रत्येक घटक की एक विशेष विधि होती हैgetStaticProps जिसका उपयोग डेटा को लाने और डेटा को पेज के प्रॉप के रूप में पास करने के लिए किया जा सकता है ताकि पेज प्रॉप्स के अनुसार पास कर सके।

getStaticProps () फ़ंक्शन उत्पादन में निर्माण समय पर चलता है और देव मोड में हर अनुरोध के लिए चलता है।

उसी को प्रदर्शित करने के लिए एक उदाहरण बनाते हैं।

इस उदाहरण में, हम डेटा प्राप्त करने के लिए सर्वर हिट बनाने के लिए एक अपडेट इंडेक्स.जेएस और फर्स्ट.जेएस पेज बनाएंगे।

चलिए ग्लोबल सीएसएस सपोर्ट चैप्टर में प्रयुक्त नेक्स्ट प्रोजेक्ट को अपडेट करते हैं ।

GetServerSideProps () विधि का उपयोग करने के लिए पृष्ठ निर्देशिका में index.js फ़ाइल को अपडेट करें। इस पद्धति को अनुरोध के अनुसार कहा जाएगा।

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

GetStaticProps () विधि का उपयोग करने के लिए पृष्ठ निर्देशिका में first.js फ़ाइल को अपडेट करें। इस विधि को एक बार बुलाया जाएगा।

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

फर्स्ट पोस्ट लिंक पर क्लिक करें।

Next.js फ़ाइल सिस्टम आधारित राउटर का उपयोग करता है। जब भी हम किसी पेज को जोड़ते हैंpagesनिर्देशिका, यह स्वचालित रूप से url के माध्यम से उपलब्ध है। इस राउटर के नियम निम्नलिखित हैं।

Index Routes- निर्देशिका के रूट के लिए एक फ़ोल्डर नक्शे में मौजूद एक index.js फ़ाइल। उदाहरण के लिए -
- पेज / index.js के नक्शे '/' के लिए।
- पेज / पोस्ट / index.js के नक्शे '/ पोस्ट'।
Nested Routes- पेज डायरेक्टरी में कोई नेस्टेड फोल्डर स्ट्रक्चर क्योंकि राउटर यूआरएल अपने आप आ जाता है। उदाहरण के लिए -
- पेज / सेटिंग्स / डैशबोर्ड / about.js नक्शे '/ सेटिंग्स / डैशबोर्ड / के बारे में'।
- पेज / पोस्ट / First.js के नक्शे '/ पोस्ट / पहले'।
Dynamic Routes- हम url से मिलान करने के लिए नामित पैरामीटर का उपयोग कर सकते हैं। उसी के लिए कोष्ठक का प्रयोग करें। उदाहरण के लिए -
- पृष्ठ / पोस्ट / [आईडी] .js नक्शे '/ पदों /: आईडी' जहां हम 'जैसे पोस्ट / 1' URL का उपयोग कर सकते हैं।
- पृष्ठ / [उपयोगकर्ता] /settings.js के नक्शे '/ पदों /: उपयोगकर्ता / सेटिंग्स' जहाँ हम '/ abc / सेटिंग्स' जैसे URL का उपयोग कर सकते हैं।
- पृष्ठ / पोस्ट / [... सभी] .js के नक्शे '/ पोस्ट / *' जहां हम किसी भी URL का उपयोग कर सकते हैं जैसे '/ पोस्ट / 2020 / जून /'

पेज लिंकिंग

Next.JS लिंक प्रतिक्रिया घटक का उपयोग करके क्लाइंट पक्ष पर पृष्ठों को लिंक करने की अनुमति देता है। इसके निम्नलिखित गुण हैं -

href- पेज डायरेक्टरी में पेज का नाम। उदाहरण के लिए/posts/first जो पृष्ठ / पोस्ट निर्देशिका में मौजूद First.js को संदर्भित करता है।

उसी को प्रदर्शित करने के लिए एक उदाहरण बनाते हैं।

इस उदाहरण में, हम डेटा प्राप्त करने के लिए सर्वर हिट करने के लिए index.js और first.js पेज अपडेट करेंगे।

निम्नलिखित के रूप में पृष्ठ निर्देशिका में index.js फ़ाइल को अपडेट करें।

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

फर्स्ट पोस्ट लिंक पर क्लिक करें।

Next.js में, हम गतिशील रूप से मार्ग बना सकते हैं। इस उदाहरण में, हम मक्खी और उनकी रूटिंग पर पेज बनाएंगे।

Step 1. Define [id].js file- [आईडी] .js डायनामिक पृष्ठ का प्रतिनिधित्व करता है जहां आईडी सापेक्ष पथ होगा। इस फाइल को पेज / पोस्ट डायरेक्टरी में परिभाषित करें।
Step 2. Define lib/posts.js- posts.js आईडी और सामग्री का प्रतिनिधित्व करता है। रूट डाइरेक्टरी को रूट डायरेक्टरी में बनाया जाना है।

[Id] .js

[Id] .js फ़ाइल को getStaticPaths () पद्धति से अपडेट करें जो id के आधार पर सामग्री प्राप्त करने के लिए पथ और getStaticProps () विधि सेट करती है।

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      <Container>
         {postData.id}
         <br />
         {postData.title}
         <br />
         {postData.date}
      </Container>
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

posts.js

Posts.js में id पाने के लिए getAllPostIds () और संबंधित सामग्री प्राप्त करने के लिएPPDData () शामिल हैं।

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '7/12/2020'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: ब्राउजर में 3000 / पोस्ट / एक और आपको निम्न आउटपुट दिखाई देगा।

ओपन लोकलहोस्ट: एक ब्राउज़र में 3000 / पोस्ट / दो और आपको निम्न आउटपुट दिखाई देगा।

Next.js में, अब तक हम एक पेज से दूसरे पेज पर जाने के लिए लिंक रिएक्शन घटक का उपयोग कर रहे हैं। राउटर घटक का उपयोग करके समान रूप से प्राप्त करने के लिए एक प्रोग्रामेटिक तरीका है। आमतौर पर राउटर घटक का उपयोग html टैग के साथ किया जाता है।

निम्नलिखित के रूप में पृष्ठ निर्देशिका में index.js फ़ाइल को अपडेट करें।

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/posts/one')}>First Post</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 और आपको निम्न आउटपुट दिखाई देगा।

फर्स्ट पोस्ट पर क्लिक करें जो लिंक नहीं है लेकिन क्लिक करने योग्य है।

Next.js में, उथला मार्ग एक ही पृष्ठ पर नेविगेट करने के लिए संदर्भित करता है, लेकिन GetServerSideProps, getStaticProps और getInitialProps विधियों के लिए कोई कॉल नहीं है।

उथले राउटिंग करने के लिए, हम उथले झंडे के साथ राउटर को सही मानते हैं। नीचे दिए गए उदाहरण देखें।

निम्नलिखित के रूप में पृष्ठ निर्देशिका में index.js फ़ाइल को अपडेट करें।

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउज़र में 3000 और फिर रीलोड लिंक पर क्लिक करें और आपको निम्न आउटपुट दिखाई देगा।

API रूट्स Next.js. का उपयोग करके बाकी API बनाने का एक तरीका है Next.js में मौजूद किसी भी फ़ाइल को मैप करता है/pages/apiफ़ोल्डर और एपीआई अंत बिंदु के रूप में माना जाएगा। एपीआई समारोह का एक उदाहरण -

export default (req, res) => {
   ...
}

विचार करने के लिए कुछ महत्वपूर्ण बिंदु निम्नलिखित हैं।

req - req http.IncomingMessage का एक उदाहरण है और अनुरोध से डेटा प्राप्त करने के लिए उपयोग किया जाता है।
res - रेस http.ServerResponse का एक उदाहरण है और इसका उपयोग प्रतिक्रिया के रूप में डेटा भेजने के लिए किया जाता है।

उसी को प्रदर्शित करने के लिए एक उदाहरण बनाते हैं।

इस उदाहरण में, हम एक user.js बनाने जा रहे हैं pages/api निर्देशिका।

निम्नलिखित के रूप में पेज / एपीआई निर्देशिका में user.js फ़ाइल बनाएँ।

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ name: 'Robert' }))
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउज़र में 3000 / एपीआई / उपयोगकर्ता और आपको निम्न आउटपुट दिखाई देगा।

{"name":"Robert"}

Next.JS में API रूट्स में बिल्ट-इन मिडलवेर्स हैं जो आने वाले अनुरोध को पार्स करने में मदद करते हैं।

इसके बाद मध्यवर्गीय हैं

req.cookies- कुकीज़ ऑब्जेक्ट में अनुरोध द्वारा भेजी गई कुकीज़ होती हैं। डिफ़ॉल्ट मान {} है।
req.query- क्वेरी ऑब्जेक्ट में क्वेरी स्ट्रिंग होती है। डिफ़ॉल्ट मान {} है।
req.body- क्वेरी ऑब्जेक्ट में 'सामग्री-प्रकार' का उपयोग करके अनुरोधित निकाय शामिल है। डिफ़ॉल्ट मान शून्य है।

उसी को प्रदर्शित करने के लिए एक उदाहरण बनाते हैं।

इस उदाहरण में, हम एक user.js को अपडेट करने जा रहे हैं pages/api निर्देशिका।

चलिए एपीआई रूट्स चैप्टर में प्रयुक्त नेक्स्ट प्रोजेक्ट को अपडेट करते हैं ।

निम्नलिखित के रूप में पेज / एपीआई निर्देशिका में user.js फ़ाइल बनाएँ।

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ query: req.query }))
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

Open http: // localhost: 3000 / api / user? काउंटर = 1 एक ब्राउज़र में और आप निम्न आउटपुट देखेंगे।

{"query":{"counter":"1"}}

res ऑब्जेक्ट में एक्सप्रेस.जे जैसे हेल्पर के तरीके हैं जिससे सेवाओं को बनाने के लिए विकास में आसानी हो।

निम्नलिखित प्रतिक्रिया सहायक तरीके हैं

res.status(code)- इस विधियों ने प्रतिक्रिया की स्थिति निर्धारित की। पारित कोड एक मान्य HTTP स्थिति होना चाहिए।
req.json(json)- यह विधि एक JSON प्रतिक्रिया देता है। json पारित एक वैध JSON ऑब्जेक्ट होना चाहिए।
req.send(body)- यह विधियाँ HTTP प्रतिसाद भेजता है। प्रतिक्रिया स्ट्रिंग, ऑब्जेक्ट या बफर हो सकती है।

उसी को प्रदर्शित करने के लिए एक उदाहरण बनाते हैं।

इस उदाहरण में, हम एक user.js को अपडेट करने जा रहे हैं pages/api निर्देशिका।

चलिए एपीआई रूट्स चैप्टर में प्रयुक्त नेक्स्ट प्रोजेक्ट को अपडेट करते हैं ।

निम्नलिखित के रूप में पेज / एपीआई निर्देशिका में user.js फ़ाइल बनाएँ।

export default (req, res) => {
   res.status(200).json({ name: 'Robert' });
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

Open http: // localhost: 3000 / एपीआई / एक ब्राउज़र में उपयोगकर्ता और आपको निम्न आउटपुट दिखाई देगा।

{ name: 'Robert' }

Next.js, टाइपस्क्रिप्ट के लिए निष्पादन योग्य समर्थन है। प्रोजेक्ट में टाइपस्क्रिप्ट को सक्षम करने के लिए कुछ कदम निम्नलिखित हैं।

Tsconfig.json बनाएँ

रूट डायरेक्टरी में tsconfig.json बनाएँ। हम इसे शुरू में खाली रख रहे हैं। अब सर्वर शुरू करें।

Next.JS tsconfig.json का पता लगाएगा और कंसोल पर follwing संदेश दिखाएगा।

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

        npm install --save-dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...

टाइपस्क्रिप्ट स्थापित करें

टाइपस्क्रिप्ट और संबंधित पुस्तकालयों को स्थापित करने के लिए एनपीएम इंस्टॉल कमांड को चलाएं।

npm install --save-dev typescript @types/react @types/node
...

+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.


Your tsconfig.json has been populated with default values.

event - compiled successfully
wait  - compiling...
event - compiled successfully

Tsconfig.json खोलें

NextJS सर्वर ने tsconfig.json को संशोधित किया है।

{
   "compilerOptions": {
      "target": "es5",
      "lib": [
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve"
   },
   "exclude": [
      "node_modules"
   ],
   "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
   ]
}

हैलो बनाएँ

पेज / एपी डायरेक्टरी में हेल्लो बनाएँ। जो हमारे लिए एक आराम सेवा के रूप में काम करेगा।

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}

Next.js सर्वर प्रारंभ करें

सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउजर में 3000 / एपीआई / हैलो और आपको निम्न आउटपुट दिखाई देगा।

{"text":"Welcome to TutorialsPoint"}

Next.js, नोड में पर्यावरण चर प्रकाशित करने के लिए समर्थन है, जिसे हम सर्वर, डेटाबेस आदि से कनेक्ट करने में उपयोग कर सकते हैं। इसके लिए, हमें रूट निर्देशिका में .env.local फ़ाइल बनाने की आवश्यकता है। हम .env.production भी बना सकते हैं।

बनाएँ .env.local

निम्नलिखित सामग्री के साथ रूट निर्देशिका में .env.local बनाएँ।

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Env.js बनाएं

पेज / पोस्ट निर्देशिका में निम्नलिखित सामग्री के साथ env.js नाम का एक पेज बनाएँ, जहाँ हम प्रक्रिया का उपयोग करके पर्यावरण चर का उपयोग करेंगे।

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

अब सर्वर शुरू करें।

Next.JS कंसोल पर fenwing संदेश .env.local का पता लगाएगा और दिखाएगा।

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

आउटपुट सत्यापित करें

ओपन लोकलहोस्ट: एक ब्राउज़र में 3000 / पोस्ट / एनवी और आपको निम्न आउटपुट दिखाई देगा।

अब तक हमने देव मोड में नमूना NEXT.JS एप्लीकेशन विकसित और चला दिया है, अब हम निम्न चरणों का उपयोग करते हुए उत्पादन तैयार तैनाती को स्थानीय स्तर पर करेंगे।

npm run build - तैयार उत्पादन, अत्यधिक अनुकूलित निर्माण का निर्माण करें।
npm run start - सर्वर शुरू करें।

तैयार उत्पादन में डेव मोड की तुलना में सोर्स मैप्स और हॉट कोड रीलोडिंग का अभाव है क्योंकि ये फीचर्स मुख्य रूप से डिबगिंग में उपयोग किए जाते हैं।

बिल्ड तैयार करें

प्रोडक्शन रेडी बिल्ड तैयार करने के लिए निम्न कमांड चलाएँ -।

npm run build

> [email protected] build \Node\nextjs
> next build

info  - Loaded env from \Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/3458401054237127135bcd3ee8eb2a19d67af299.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

सर्वर शुरू करें

उत्पादन सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ -।

npm run start

> [email protected] start \Node\nextjs
> next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000

आउटपुट सत्यापित करें

{"name":"Robert"}

NEXT.JS आवेदन शुरू, निर्माण और निर्यात के लिए एक CLI प्रदान करता है। इसे npx का उपयोग करके मंगवाया जा सकता है जो npm 5.2 पर आता है।

सीएलआई मदद

सीएलआई कमांड की सूची प्राप्त करने और उन पर मदद करने के लिए, निम्न कमांड टाइप करें।

npx next -h
   Usage
      $ next <command>

   Available commands
      build, start, export, dev, telemetry

   Options
      --version, -v   Version number
      --help, -h      Displays this message

   For more information run a command with the --help flag
      $ next build --help

प्रोडक्शन रेडी बिल्ड बनाएँ

निम्न कमांड टाइप करें।

npx next build
info  - Loaded env from D:\Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/ab55cb957ceed242a750c37a082143fb9d2f0cdf.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

विकास सर्वर बनाएँ और प्रारंभ करें

निम्न कमांड टाइप करें।

npx next dev

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully

उत्पादन सर्वर प्रारंभ करें

निम्न कमांड टाइप करें।

npx next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000