प्रकाशित

v1 में नई सुविधाएँ

अवलोकन

v1.0 में पेश की गई नई सुविधाओं पर एक पोस्ट। नई सुविधाएँ:

सभी नई सुविधाओं को जोड़ने के बावजूद पहली लोड JS 43kB से 39kB तक कम हो गई! 1

देखें अपग्रेड गाइड नीचे यदि आप टेम्पलेट के v0 संस्करण से माइग्रेट कर रहे हैं।

थीम रंग

आप टेलविंड कॉन्फ़िगरेशन फ़ाइल में प्राथमिक विशेषता को बदलकर थीम रंग को आसानी से संशोधित कर सकते हैं:

tailwind.config.js
थीम: {
    रंग: {
      प्राथमिक: रंग.teal,
      gray: रंग.तटस्थ,
      ...
    }
  ...
}

प्राथमिक रंग विशेषता को 50, 100, 200 ... 900 से कुंजियों और संबंधित रंग कोड मानों के साथ एक ऑब्जेक्ट सौंपा जाना चाहिए।

टेलविंड में आपके अपने वेबसाइट की थीमिंग के लिए उपयोग किए जा सकने वाले महान डिफ़ॉल्ट रंग पैलेट शामिल हैं। जाँच करें अनुकूलन रंग दस्तावेज़ीकरण पृष्ठ विकल्पों की पूरी श्रृंखला के लिए।

v1 से माइग्रेट कर रहे हैं? आप पिछली थीम पर वापस जा सकते हैं प्राथमिक को colors.sky (Tailwind 2.2.2 और उससे ऊपर, अन्यथा colors.lightBlue) और ग्रे को बदलकर colors.gray.

v1.1.2+ से, आप आसानी से अपनी कोड ब्लॉक की स्टाइल को संशोधित करके भी कस्टमाइज़ कर सकते हैं css/prism.css stylesheet. Token classnames prismjs के साथ संगत हैं, इसलिए आप किसी prismjs स्टाइलशीट से टोकन स्टाइल कॉपी और अनुकूलित कर सकते हैं, जैसे prism themes.

Xdm MDX कंपाइलर

हमने MDX बंडलर को इससे बदल दिया है नेक्स्ट-एमडीएक्स-रिमोट को mdx-bundler. यह उपयोग करता है xdm अंदर, नवीनतम micromark 3 और remark, rehype लाइब्रेरी।

चेतावनी: यदि आप कस्टम remark या rehype लाइब्रेरी का उपयोग कर रहे थे, तो कृपया micromark 3 संगत वाले में अपग्रेड करें। यदि आप अपग्रेड कर रहे हैं, तो कृपया हटा दें node_modules और package-lock.json ताकि पिछली निर्भरता संबंधी समस्याओं से बचा जा सके।

xdm से कई सुधार शामिल हैं @mdx-js/mdx, next-mdx-remote द्वारा आंतरिक रूप से उपयोग किया जाने वाला कंपाइलर, लेकिन कुछ ब्रेकिंग व्यवहार परिवर्तन हो सकते हैं। कृपया सत्यापित करने के लिए अपने मार्कडाउन आउटपुट की जांच करें।

कुछ नई संभावनाओं में import सिंटैक्स का उपयोग करके सीधे mdx फ़ाइल में कंपोनेंट्स लोड करना और js कोड शामिल करना शामिल है जिसे बिल्ड स्टेप पर कंपाइल और बंडल किया जा सकता है।

उदाहरण के लिए, पेज टाइटल कंपोनेंट को रेंडर करने के लिए निम्नलिखित jsx स्निपेट का सीधे MDX फ़ाइल में उपयोग किया जा सकता है:

// Or import PageTitle from './components/PageTitle.js' if you are using js
आयात PageTitle से './components/PageTitle.tsx'
;<PageTitle> MDX में JSX कंपोनेंट्स का उपयोग करना PageTitle>

डिफ़ॉल्ट कॉन्फ़िगरेशन सभी कंपोनेंट्स को इससे संबंधित रिजॉल्व करता है components directory।

ध्यान दें: बाहरी इमेज लोडर्स की आवश्यकता वाले कंपोनेंट्स के लिए अतिरिक्त esbuild कॉन्फ़िगरेशन की भी आवश्यकता होती है। ग्लोबल एप्लिकेशन स्टेट या लाइफसाइकिल पर निर्भर कंपोनेंट्स जैसे Nextjs Link कंपोनेंट भी इस सेटअप के साथ काम नहीं करेंगे क्योंकि प्रत्येक mdx फ़ाइल को स्वतंत्र रूप से बनाया गया है। ऐसे मामलों के लिए, कंपोनेंट प्रतिस्थापन का उपयोग करना बेहतर होता है।

सामग्री तालिका घटक

से प्रेरित Docusaurus और Gatsby के gatsby-remark-table-of-contents, toc दस्तावेज़ के सभी शीर्ष-स्तरीय शीर्षकों वाले चर को MDX फ़ाइल में पास किया जाता है और तदनुसार स्टाइल किया जा सकता है। सामग्री की तालिका (TOC) उत्पन्न करना आसान बनाने के लिए, आप मौजूदा TOCInline घटक का उपयोग कर सकते हैं।

उदाहरण के लिए, इस पोस्ट में TOC निम्नलिखित कोड के साथ उत्पन्न किया गया था:

<TOCInline toc={props.toc} exclude="अवलोकन" toHeading={2} />

आप शीर्षकों को कॉन्फ़िगर करके प्रदर्शित किए जाने वाले शीर्षकों को अनुकूलित कर सकते हैं fromHeading और toHeading props, या किसी स्ट्रिंग या स्ट्रिंग ऐरे को पास करके विशेष शीर्षकों को बाहर कर सकते हैं exclude prop। डिफ़ॉल्ट रूप से, गहराई 3 या उससे कम के सभी शीर्षक इंडेंट किए जाते हैं। इसे बदलकर कॉन्फ़िगर किया जा सकता है indentDepth गुण। एक asDisclosure prop का उपयोग TOC को एक विस्तार योग्य प्रकटीकरण तत्व के भीतर प्रस्तुत करने के लिए किया जा सकता है।

यहां प्रकटीकरण तत्व में प्रस्तुत पूर्ण TOC दिया गया है।

<TOCInline toc={props.toc} asDisclosure />
विषय सूची

लेआउट

आप फ्रंटमैटर फ़ील्ड को कॉन्फ़िगर करके MDX ब्लॉग सामग्री को लेआउट घटकों पर मैप कर सकते हैं। उदाहरण के लिए, यह पोस्ट नए PostSimple लेआउट के साथ लिखी गई है!

नए टेम्प्लेट जोड़ना

लेआउट टेम्प्लेट इसमें संग्रहीत हैं ./layouts फ़ोल्डर। आप अपने रिएक्ट कंपोनेंट्स को जोड़ सकते हैं जिन्हें आप इस फ़ोल्डर में मार्कडाउन सामग्री पर मैप करना चाहते हैं। कंपोनेंट फ़ाइल का नाम मार्कडाउन फ्रंटमैटर में निर्दिष्ट से मेल खाना चाहिए लेआउट फ़ील्ड।

एकमात्र आवश्यक फ़ील्ड है children जिसमें रेंडर की गई MDX सामग्री होती है, हालांकि आप शायद फ्रंटमैटर सामग्री पास करना चाहेंगे और इसे टेम्प्लेट में रेंडर करना चाहेंगे।

आप टेम्प्लेट को अन्य फ़ील्ड लेने के लिए कॉन्फ़िगर कर सकते हैं - देखें PostLayout एक उदाहरण के लिए कंपोनेंट।

यहाँ एक उदाहरण लेआउट है जिसे आप आगे अनुकूलित कर सकते हैं:

निर्यात default फ़ंक्शन ExampleLayout({ frontMatter, children }) {
  कॉन्स्ट { तारीख, शीर्षक } = frontMatter

  वापसी (
    <SectionContainer>
      <डिव>{तारीख}डिव>
      <h1>{शीर्षक}h1>
      <डिव>{children}डिव>
    SectionContainer>
  )
}

ब्लॉग पोस्ट फ्रंटमैटर को कॉन्फ़िगर करना

उपयोग करें लेआउट frontmatter फ़ील्ड उस टेम्प्लेट को निर्दिष्ट करने के लिए जिसे आप मार्कडाउन पोस्ट को मैप करना चाहते हैं। इस पोस्ट के फ्रंटमैटर का स्वरूप यहाँ दिया गया है:

---
शीर्षक: 'v1 में नई सुविधाएँ'
तारीख: '2021-05-26   '
टैग: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'नई लेआउट सुविधाओं का परिचय - आप फ्रंटमैटर फ़ील्ड को कॉन्फ़िगर करके mdx ब्लॉग सामग्री को लेआउट कंपोनेंट्स पर मैप कर सकते हैं'
लेआउट: PostSimple
---

आप संबंधित पेज सेक्शन में डिफ़ॉल्ट लेआउट को कॉन्फ़िगर कर सकते हैं DEFAULT_LAYOUT वेरिएबल को संशोधित करके। DEFAULT_LAYOUT ब्लॉग पोस्ट पेज के लिए PostLayout.

विस्तार करें

लेआउट एक रैपर पर मैप किया गया है जो संपूर्ण MDX सामग्री को लपेटता है।

निर्यात कॉन्स्ट MDXComponents = {
  छवि,
  एक: CustomLink,
  pre: Pre,
  रैपर: ({ components, लेआउट, ...बाकी }) => {
    कॉन्स्ट Layout = आवश्यक(`../layouts/${लेआउट}`).default
    वापसी <Layout {...बाकी} />
  },
}

निर्यात कॉन्स्ट MDXLayoutRenderer = ({ लेआउट, mdxSource, ...बाकी }) => {
  कॉन्स्ट MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])

  वापसी <MDXLayout लेआउट={लेआउट} components={MDXComponents} {...बाकी} />
}

उपयोग करें MDXLayoutRenderer किसी पेज पर कंपोनेंट जहाँ आप वांछित लेआउट को मैप करने के लिए लेआउट नाम स्वीकार करना चाहते हैं। आपको लेआउट फ़ोल्डर से लेआउट नाम पास करना होगा (यह बिल्कुल मेल खाना चाहिए)।

Analytics

टेम्पलेट अब सपोर्ट करता है plausible, सरल एनालिटिक्स और गूगल एनालिटिक्स। कॉन्फ़िगर करें siteMetadata.js वांछित एनालिटिक्स प्रदाता के अनुरूप सेटिंग्स के साथ।

analytics: {
    // supports plausible, simpleAnalytics or googleAnalytics
    plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
    simpleAnalytics: false, // true or false
    googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
  },

कस्टम इवेंट भी समर्थित हैं। आप इम्पोर्ट कर सकते हैं logEvent फ़ंक्शन से @components/analytics/[ANALYTICS-PROVIDER] फ़ाइल और रुचि की कुछ घटनाओं को ट्रिगर करते समय इसे कॉल करें। ध्यान दें: एनालिटिक्स प्रदाता के आधार पर अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता हो सकती है, कृपया अधिक जानकारी के लिए उनके आधिकारिक दस्तावेज़ देखें।

ब्लॉग टिप्पणियाँ प्रणाली

हमने इसके लिए भी समर्थन जोड़ दिया है giscus, utterances या disqus। सक्षम करने के लिए, बस कॉन्फ़िगर करें siteMetadata.js comments property with the desired provider and settings as specified in the config file.

comment: {
    // Select a provider and use the environment variables associated to it
    // https://vercel.com/docs/environment-variables
    provider: 'giscus', // supported providers: giscus, utterances, disqus
    giscusConfig: {
      // Visit the link below, and follow the steps in the 'configuration' section
      // https://giscus.app/
      repo: प्रक्रिया.env.NEXT_PUBLIC_GISCUS_REPO,
      repositoryId: प्रक्रिया.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
      category: प्रक्रिया.env.NEXT_PUBLIC_GISCUS_CATEGORY,
      categoryId: प्रक्रिया.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
      mapping: 'pathname', // supported options: pathname, url, title
      reactions: '1', // Emoji reactions: 1 = enable / 0 = disable
      // Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable
      metadata: '0',
      // theme example: light, dark, dark_dimmed, dark_high_contrast
      // transparent_dark, preferred_color_scheme, custom
      थीम: 'light',
      // theme when dark mode
      darkTheme: 'transparent_dark',
      // If the theme option above is set to 'custom`
      // please provide a link below to your custom theme css file.
      // example: https://giscus.app/themes/custom_example.css
      themeURL: '',
    },
    utterancesConfig: {
      // Visit the link below, and follow the steps in the 'configuration' section
      // https://utteranc.es/
      repo: प्रक्रिया.env.NEXT_PUBLIC_UTTERANCES_REPO,
      issueTerm: '', // supported options: pathname, url, title
      label: '', // label (optional): Comment 💬
      // theme example: github-light, github-dark, preferred-color-scheme
      // github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light
      थीम: '',
      // theme when dark mode
      darkTheme: '',
    },
    disqus: {
      // https://help.disqus.com/en/articles/1717111-what-s-a-shortname
      shortname: प्रक्रिया.env.NEXT_PUBLIC_DISQUS_SHORTNAME,
    },
  },

एकाधिक लेखक

लेखकों की जानकारी अब अलग कर दी गई है siteMetadata.js और इसमें संग्रहीत किया गया है data/authors फोल्डर में एक मार्कडाउन फ़ाइल के रूप में। कम से कम, आपके पास एक होना चाहिए default.md लेखक की जानकारी वाली फ़ाइल। आप आवश्यकतानुसार अतिरिक्त फ़ाइलें बना सकते हैं और फ़ाइल नाम का उपयोग लेखक के संदर्भ के रूप में किया जाएगा।

यहाँ बताया गया है कि लेखक की मार्कडाउन फ़ाइल कैसी दिख सकती है:

default.md
---
नाम: टेल्स एज़िमुथ
अवतार: /static/images/avatar.png
occupation: वायुमंडलीय विज्ञान के प्रोफेसर
company: स्टैनफोर्ड विश्वविद्यालय
email: address@yoursite.com
twitter: https://twitter.com/Twitter
लिंक्डइन: https://www.linkedin.com
गिटहब: https://github.com
---

अपने बारे में एक लंबा विवरण...

आप इस जानकारी का उपयोग टेम्प्लेट में कई जगहों पर कर सकते हैं। उदाहरण के लिए, पेज के अबाउट सेक्शन में, हम इस कोड लाइन से डिफ़ॉल्ट लेखक की जानकारी लेते हैं:

कॉन्स्ट authorDetails = await getFileBySlug('authors', ['default'])

यह AuthorLayout टेम्प्लेट में रेंडर किया गया है।

ब्लॉग पोस्ट में एकाधिक लेखक

ब्लॉग पोस्ट के फ्रंटमैटर में एक वैकल्पिक authors ऐरे फ़ील्ड स्वीकार किया जाता है। यदि कोई फ़ील्ड निर्दिष्ट नहीं है, तो यह माना जाता है कि डिफ़ॉल्ट लेखक का उपयोग किया गया है। पोस्ट से जुड़े कई लेखकों को रेंडर करने के लिए बस लेखकों का एक ऐरे पास करें।

उदाहरण के लिए, निम्नलिखित फ्रंटमैटर लेखकों को प्रदर्शित करेगा जो data/authors/default.md और data/authors/sparrowhawk.md

शीर्षक: 'My first post'
तारीख: '2021-01-12'
draft: false
summary: 'My first post'
authors: ['default', 'sparrowhawk']

एक डेमो मल्टीपल ऑथर्स पोस्ट में दिखाया गया है Introducing Tailwind Nextjs Starter Blog post.

कोड ब्लॉक के लिए कॉपी बटन

कोड ब्लॉक पर होवर करें और आपको GitHub-प्रेरित कॉपी बटन दिखाई देगा! आप इसे और अनुकूलित करने के लिए ./components/Pre.js को संशोधित कर सकते हैं। कंपोनेंट को MDXComponents में पास किया गया है और यह सभी 

 ब्लॉक को संशोधित करता है।
लाइन हाइलाइटिंग और लाइन नंबर
लाइन हाइलाइटिंग और लाइन नंबर अब नए rehype-prism-plus प्लगइन
निम्नलिखित जावास्क्रिप्ट कोड ब्लॉक:
```js {1, 3-4} showLineNumbers
var num1, num2, sum
num1 = prompt('Enter first number')
num2 = prompt('Enter second number')
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert('Sum = ' + sum) // "+" means combine into a string
```

इस प्रकार दिखाई देगा:
var num1, num2, sum
num1 = prompt('Enter first number')
num2 = prompt('Enter second number')
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert('Sum = ' + sum) // "+" means combine into a string

स्टyles को बदलने के लिए, फ़ाइल में निम्नलिखित क्लास सेलेक्टर्स बदलें: prism.css फ़ाइल:
.code-highlight {
  @apply float-left min-w-full;
}

.code-line {
  @apply -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4;
}

.code-line.inserted {
  @apply bg-green-500 bg-opacity-20;
}

.code-line.deleted {
  @apply bg-red-500 bg-opacity-20;
}

.highlight-line {
  @apply -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50;
}

.line-number::before {
  @apply -ml-2 mr-4 inline-block w-4 text-right text-gray-400;
  content: attr(line);
}

न्यूज़लेटर घटक (v1.1.3)
v1.1.3 में पेश किया गया, न्यूज़लेटर घटक आपको ऑडियंस बनाने का एक आसान तरीका देता है। यह निम्नलिखित प्रोवाइडर्स के साथ एकीकृत होता है:
इसका उपयोग करने के लिए, कॉन्फ़िगरेशन फ़ाइल में प्रदाता निर्दिष्ट करें जिसका आप उपयोग कर रहे हैं और आवश्यक पर्यावरण चर जोड़ें .env फ़ाइल में। आवश्यक चर के बारे में अधिक जानकारी के लिए, देखें .env.sample.
दो घटक निर्यात किए जाते हैं, एक डिफ़ॉल्ट NewsletterForm और एक BlogNewsletterForm घटक, जिसे एमडीएक्स घटक के रूप में भी पास किया जाता है और ब्लॉग पोस्ट में उपयोग किया जा सकता है:
<BlogNewsletterForm शीर्षक="जो पढ़ रहे हैं वह पसंद आया?" />

जो पढ़ रहे हैं वह पसंद आया?
यह घटक nextjs के एपीआई रूट पर निर्भर करता है, जिसके लिए नेक्स्टजेएस के सर्वर-साइड इंस्टेंस को सेटअप करने की आवश्यकता होती है और यह 100% स्थिर साइट निर्यात के साथ संगत नहीं है। उपयोगकर्ताओं को या तो स्वयं होस्ट करना चाहिए या वेर्सेल या नेटलिफ़ाई जैसे संगत प्लेटफ़ॉर्म का उपयोग करना चाहिए जो इस कार्यक्षमता का समर्थन करते हैं।
एक स्थिर साइट संगत विकल्प न्यूज़लेटर घटक में रूट को फ़ॉर्म एपीआई एंडपॉइंट प्रदाता के साथ बदलना है।
ग्रंथ सूची और उद्धरण (v1.2.1)
rehype-citation प्लगइन को v1.2.1 में xdm प्रसंस्करण पाइपलाइन में जोड़ा गया है। यह आपको किसी मौजूदा bibtex या CSL-json फ़ाइल से उद्धरणों को आसानी से प्रारूपित करने और ग्रंथ सूची डालने की अनुमति देता है।
उदाहरण के लिए, निम्नलिखित मार्कडाउन कोड सैंपल:
मानक उद्धरण [@Nash1950]
इन-टेक्स्ट उद्धरण जैसे @Nash1951
एकाधिक उद्धरण [see @Nash1950; @Nash1951, page 50]

**संदर्भ:**

[^ref]

इस प्रकार प्रस्तुत किया जाता है:
मानक उद्धरण (Nash, 1950)
इन-टेक्स्ट उद्धरण जैसे Nash (1951)
एकाधिक उद्धरण (see Nash, 1950, 1951, p. 50)
संदर्भ:
Nash, J. (1950). Equilibrium points in n-person games. Proceedings of the National Academy of Sciences, 36(1), 48–49.
Nash, J. (1951). Non-cooperative games. Annals of Mathematics, 286–295.
दस्तावेज़ के अंत में एक ग्रंथ सूची (bibliography) जोड़ी जाएगी, लेकिन इसे निर्दिष्ट करके बदला जा सकता है [^Ref] अभीष्ट स्थान पर टैग। प्लगइन APA उद्धरण प्रारूप का उपयोग करता है, लेकिन निम्नलिखित CSLs, 'apa', 'vancouver', 'harvard1', 'chicago', 'mla', या उपयोगकर्ता द्वारा निर्दिष्ट CSL फ़ाइल के पथ का भी समर्थन करता है।
देखें rehype-citation readme कॉन्फ़िगरेशन विकल्पों पर अधिक जानकारी के लिए।
स्व-होस्टेड फ़ॉन्ट (v1.5.0)
गूगल फ़ॉन्ट को यहाँ से सेल्फ-होस्टेड फ़ॉन्ट से बदल दिया गया है Fontsource। इससे निम्नलिखित फायदे मिलते हैं:
सेल्फ-होस्टिंग से परफॉरमेंस में काफी सुधार होता है क्योंकि गूगल फॉन्ट्स जैसी होस्टेड सेवाओं से फॉन्ट लोड करने पर एक अतिरिक्त (रेंडर ब्लॉकिंग) नेटवर्क अनुरोध करना पड़ता है। उदाहरण के लिए, साधारण वेबसाइटों के मामले में यह देखा गया है कि यह विजुअल लोड समय को दोगुना कर देता है।
फॉन्ट्स का वर्शन लॉक रहता है। गूगल अक्सर बिना किसी सूचना के अपने फॉन्ट्स में अपडेट भेजता रहता है, जो आपके लाइव प्रोडक्शन प्रोजेक्ट्स में बाधा बन सकता है। अपने फॉन्ट्स को किसी अन्य NPM डिपेंडेंसी की तरह मैनेज करें।
प्राइवेसी के प्रति प्रतिबद्ध रहें। गूगल वास्तव में अपने फॉन्ट्स के उपयोग को ट्रैक करता है और जो लोग प्राइवेसी को लेकर अत्यधिक चिंतित हैं, उनके लिए सेल्फ-होस्टिंग एक विकल्प है।
इससे फॉन्ट बंडल छोटा होता है और लोड होने का समय 0.1 सेकंड तेज़ हो जाता है (webpagetest comparison).
डिफ़ॉल्ट इंटर फॉन्ट को बदलने के लिए:
  1. पसंदीदा इंस्टॉल करें font - npm install -save @fontsource/
  2. यहाँ इम्पोर्ट अपडेट करें pages/_app.js- import '@fontsource/.css'
  3. अपडेट करें fontfamily tailwind css कॉन्फ़िगरेशन फ़ाइल में प्रॉपर्टी
अपग्रेड गाइड
v0 से v1 में कोड के महत्वपूर्ण हिस्सों को बदला गया है, जिसमें लेआउट के लिए समर्थन और एक नया mdx इंजन शामिल है।
यदि पिछला वाला आपकी ज़रूरतों को पूरा करता है, तो बदलने का कोई वास्तविक कारण नहीं है और सब कुछ माइग्रेट करने के बजाय आपके मौजूदा ब्लॉग में आपकी रुचि के अनुसार घटक परिवर्तनों को कॉपी करना आसान हो सकता है।
फिर भी, यदि आप ऐसा करना चाहते हैं और टेम्पलेट में बहुत अधिक बदलाव नहीं किया है, तो आप नए संस्करण को क्लोन कर सकते हैं और ब्लॉग पोस्ट को नए टेम्पलेट में कॉपी कर सकते हैं।
दूसरा विकल्प निम्नलिखित कोड के साथ नवीनतम टेम्पलेट संस्करण को खींचना होगा:
git remote add template git@github.com:timlrx/tailwind-nextjs-starter-blog.git
git pull template v1 --allow-unrelated-histories
rm -rf node_modules

आप इस प्रकार के माइग्रेशन का उदाहरण इस commit में देख सकते हैं जो मेरे व्यक्तिगत ब्लॉग के लिए है।
v1 में Vercel के साथ कुछ निर्माण समस्याओं से बचने के लिए feed.xml का उपयोग किया जाता है बजाय index.xmlके। यदि आप माइग्रेट कर रहे हैं तो आपको रीडायरेक्ट जोड़ना चाहिए next.config.js इस तरह:
async redirects() {
  वापसी [
    {
      source: '/:path/index.xml',
      destination: '/:path/feed.xml',
      स्थायी: सही,
    }
  ]
}

फुटनोट्स
  1. Nextjs 12 में हुए नए बदलावों के साथ, पहली लोड JS बढ़कर 45kB हो गई है। ↩