Next.js: Next.js एपीआई मार्गों (और पृष्ठों) को फाइलों को पढ़ने का समर्थन करना चाहिए

को निर्मित 5 अग॰ 2019 · 87टिप्पणियाँ · स्रोत: vercel/next.js

महत्वपूर्ण लेख मांगना

क्या आपका फीचर अनुरोध किसी समस्या से संबंधित है? कृपया विस्तार में बताएं।

वर्तमान में API मार्गों या पृष्ठों की फ़ाइलों को पढ़ना संभव नहीं है।

आप जो समाधान चाहते हैं उसका वर्णन करें

मैं fs.readFile को __dirname पथ के साथ कॉल करने में सक्षम होना चाहता हूं और इसे "बस काम" करना चाहता हूं।

यह विकास और उत्पादन मोड में काम करना चाहिए।

उन विकल्पों का वर्णन करें जिन पर आपने विचार किया है

इसे कुछ क्षमता में @zeit/webpack-asset-relocator-loader साथ एकीकृत करने की आवश्यकता हो सकती है। यह प्लगइन इस प्रकार की आवश्यकताओं को संभालता है।

हालाँकि, यह कोई आवश्यकता नहीं है। मैं उस चीज़ के साथ ठीक रहूंगा जो _only_ __dirname और __filename (कोई रिश्तेदार या cwd-आधारित पथ नहीं) के साथ काम करता है।

अतिरिक्त संदर्भ

उदाहरण:

// pages/api/test.js
import fs from 'fs'
import path from 'path'

export default (req, res) => {
  const fileContent = fs.readFileSync(
    path.join(__dirname, '..', '..', 'package.json'), 
    'utf8'
  )
  // ...
}

नोट: मुझे पता है कि आप उपरोक्त उदाहरण ☝️ को require साथ धोखा दे सकते हैं, लेकिन यह बात नहीं है। मैं

story feature request

स्रोत

Timer

👍98 🚀26

सबसे उपयोगी टिप्पणी

मैं जिस समाधान का उपयोग कर रहा हूं:

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

और स्थान में आपको पथ की आवश्यकता है

import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))

मुझे पता है कि यह वर्तमान फ़ाइल के सापेक्ष पथ वाली फ़ाइलों को संदर्भित करने की आवश्यकता को हल नहीं करता है, लेकिन यह मेरे बहुत संबंधित उपयोग के मामले को हल करता है ( /public/images फ़ोल्डर से छवि फ़ाइलों को पढ़ना)।

jkjustjoshing 30 अक्तू॰ 2019

👍20 ❤15 😕5 👎2

सभी 87 टिप्पणियाँ

बस इसे दूसरा करना चाहता था, एपीआई मार्गों का उपयोग करके फ़ाइल अपलोडिंग को लागू करने की कोशिश कर रहा था। मैं फ़ाइल को अपलोड करने के लिए प्राप्त कर सकता हूं लेकिन फिर इसे एस 3 बाल्टी में अपलोड करने के लिए इसे फिर से एक्सेस करने में सक्षम होना चाहिए।

amytych 7 अग॰ 2019

👍2

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

ScottSmith95 12 अग॰ 2019

उपरोक्त पीआर इसे ठीक कर देगा! ️ 🙏

Timer 12 अग॰ 2019

👍7 🎉5

यह कैसे संभव है fs.writeFile में? उदाहरण के लिए, /api/route पर पोस्ट किए गए वेबहुक के आधार पर JSON फ़ाइल बनाएं और सहेजें

marlonmarcello 30 अग॰ 2019

अरे @marlonmarcello , यह संभव होने जा रहा है। बने रहें

huv1k 30 अग॰ 2019

क्या यह पहले ही हल हो गया है?

NicolasHz 15 सित॰ 2019

अभी नहीं, आप #8334 . के लिए सदस्यता ले सकते हैं

huv1k 16 सित॰ 2019

👍2

@ huv1k बहुत धन्यवाद!

NicolasHz 16 सित॰ 2019

क्या इसे और तेज़ी से आगे बढ़ने में मदद करने का कोई तरीका है?

BrunoBernardino 3 अक्तू॰ 2019

ध्यान देने योग्य: यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो आप पहले से ही एक JSON फ़ाइल को सीधे मॉड्यूल के रूप में आयात कर सकते हैं (सुनिश्चित करें कि resolveJsonModule true में tsconfig.json )। जैसे:

import myJson from '../../../some/path/my.json';

JSON ऑब्जेक्ट का आकार भी स्वचालित रूप से इसके प्रकार के रूप में उपयोग किया जाता है, इसलिए स्वतः पूर्ण वास्तव में अच्छा है।

bitjson 19 अक्तू॰ 2019

मैं जिस समाधान का उपयोग कर रहा हूं:

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

और स्थान में आपको पथ की आवश्यकता है

import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))

jkjustjoshing 30 अक्तू॰ 2019

👍20 ❤15 😕5 👎2

पीआर में देखा कि यह थोड़ा बदल गया है - वर्तमान योजनाएं क्या हैं (या नहीं) पर कोई अपडेट? ऐसा लगता है कि कुछ रणनीतियाँ हैं जिनका आप अनुसरण नहीं करना चाहते हैं, उन्हें सूचीबद्ध करने का मन करें + इतने योगदानकर्ता इसे एक शॉट क्यों दे सकते हैं?

IanMitchell 30 अक्तू॰ 2019

यह Next.js के साथ नेक्सस के उपयोग को रोक रहा है। इसे फिर से प्राथमिकता देते हुए देखना अच्छा होगा।

timsuchanek 10 दिस॰ 2019

👍8

मैं जिस समाधान का उपयोग कर रहा हूं:
# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}
और स्थान में आपको पथ की आवश्यकता है
import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))
मुझे पता है कि यह वर्तमान फ़ाइल के सापेक्ष पथ वाली फ़ाइलों को संदर्भित करने की आवश्यकता को हल नहीं करता है, लेकिन यह मेरे बहुत संबंधित उपयोग के मामले को हल करता है ( /public/images फ़ोल्डर से छवि फ़ाइलों को पढ़ना)।

ज़बर्दस्त मर्द। मेरे लिए काम किया।

karthhhi 10 जन॰ 2020

👍1

मैं इसके लिए नई getStaticProps पद्धति का उपयोग कर रहा हूं (#9524 में)। विधि को वर्तमान में अस्थिर के रूप में चिह्नित किया गया है, लेकिन इसे आधिकारिक रूप से शिपिंग करने पर Next.js टीम से अच्छा समर्थन प्रतीत होता है।

उदाहरण:

export async function unstable_getStaticProps() {
  const siteData = await import("../data/pages/siteData.json");
  const home = await import("../data/pages/home.json");

  return {
    props: { siteData, home }
  };
}

ScottSmith95 10 जन॰ 2020

👍2

@ स्कॉटस्मिथ 95 क्या आपके पास कुछ सार्वजनिक स्रोत परियोजना है जहां आप इसका उपयोग कर रहे हैं? यह कैसा दिखेगा इसके बारे में उत्सुक।

Svish 11 जन॰ 2020

👍1

परियोजना खुला स्रोत नहीं है, फिर भी, लेकिन यदि आपके पास और प्रश्न हैं, तो मुझे अपनी अधिक कॉन्फ़िगरेशन साझा करने में प्रसन्नता हो रही है।

ScottSmith95 15 जन॰ 2020

@ScottSmith95 मेरे पास _all_ प्रश्न हैं

आप अपने प्रोजेक्ट में डेटा-फाइलों को कहाँ स्टोर करते हैं? (बाहर/अंदर src ?)
उनका उपयोग करने वाला अगला.js पृष्ठ घटक कैसा दिखता है?
क्या यह केवल हार्ड-कोडेड पथ है, या आप पथ पैरामीटर के आधार पर फ़ाइल लोड कर सकते हैं?
निर्माण/तैनाती कैसे काम करती है, खासकर अगर यह हार्ड-कोडेड पथ नहीं है?

Svish 16 जन॰ 2020

@Svish हम अपनी परियोजना के भीतर डेटा फ़ाइलों को/डेटा में संग्रहीत करते हैं। (पेज /पेज में हैं, न कि /src/prages।) यह पेज कंपोनेंट इस तरह दिखता है (प्रॉप्स होम कंपोनेंट को भेजे जाते हैं जो कि डिफॉल्ट एक्सपोर्ट है):

// /pages/index.js
const Home = ({ siteData, home }) => {
  return (
    <>
      <Head>
        <meta name="description" content={siteData.siteDescription} />
        <meta name="og:description" content={siteData.siteDescription} />
        <meta
          name="og:image"
          content={getAbsoluteUrl(siteData.siteImage, constants.siteMeta.url)}
        />
      </Head>
      <section className={`container--fluid ${styles.hero}`}>
        <SectionHeader section={home.hero} heading="1">
          <div className="col-xs-12">
            <PrimaryLink
              href={home.hero.action.path}
              className={styles.heroAction}
            >
              {home.hero.action.text}
            </PrimaryLink>
          </div>
        </SectionHeader>
        <div className={styles.imageGradientOverlay}>
          <img src={home.hero.image.src} alt={home.hero.image.alt} />
        </div>
      </section>
    </>
  );
};

अधिक उन्नत पृष्ठों के लिए, गतिशील मार्गों वाले, हम इस डेटा को इस प्रकार लेते हैं:

// /pages/studio/[member.js]
export async function unstable_getStaticProps({ params }) {
  const siteData = await import("../../data/pages/siteData.json");
  const member = await import(`../../data/team/${params.member}.json`);

  return {
    props: { siteData, member }
  };
}

परिनियोजन वास्तव में सुचारू रूप से चलता है, गतिशील मार्गों के साथ, getStaticPaths() आवश्यक हो जाता है। मैं आपको उस पर दस्तावेज़ीकरण के लिए RFC देखने के लिए प्रोत्साहित करता हूं, लेकिन यहां एक उदाहरण दिया गया है कि हम अपनी टीम के सभी सदस्य डेटा को इकट्ठा करके और इसे Next.js पर भेजकर इसे कैसे संभालते हैं।

// /pages/studio/[member.js]
export async function unstable_getStaticPaths() {
  const getSingleFileJson = async path => await import(`../../${path}`);

  // These utility functions come from `@asmallstudio/tinyutil` https://github.com/asmallstudio/tinyutil
  const directoryData = await getDirectory(
    "./data/team",
    ".json",
    getSingleFileJson,
    createSlugFromTitle
  );
  const directoryPaths = directoryData.reduce((pathsAccumulator, page) => {
    pathsAccumulator.push({
      params: {
        member: page.slug
      }
    });

    return pathsAccumulator;
  }, []);

  return directoryPaths;
}

ScottSmith95 16 जन॰ 2020

🚀1

@ ScottSmith95 आशाजनक लग रहा है! यदि आपके पास समय हो तो कुछ अनुवर्ती प्रश्न:

आप यहाँ जो कर रहे हैं वह स्थैतिक साइट निर्माण के लिए है? यानी next export का उपयोग करते समय?
क्या मैंने इसे सही ढंग से समझा है, कि getStaticPaths पथ मापदंडों की एक सूची देता है, जो तब (अगले द्वारा) प्रत्येक रेंडर के लिए getStaticProps में एक-एक करके फीड किया जाता है?
क्या आप getStaticProps बिना getStaticPaths उपयोग कर सकते हैं, उदाहरण के लिए बिना किसी पैरामीटर वाले पेज के लिए?
क्या आप getStaticProps में _app उपयोग कर सकते हैं? उदाहरण के लिए यदि आपके पास कुछ साइट वाइड कॉन्फिग है जिसे आप लोड करना चाहते हैं या ऐसा कुछ?

Svish 16 जन॰ 2020

@svish https://github.com/zeit/next.js/issues/9524

timneutkens 16 जन॰ 2020

एपिस के बारे में क्या ?? वे हुक पृष्ठों के लिए हैं, लेकिन एपिस के बारे में क्या?

NicolasHz 17 जन॰ 2020

👍5

मैं उलझन में हूं। मैं अगले विन्यास में _dirname को एक env चर के रूप में सेट करने में सक्षम था। इसलिए मैं एपीआई से फाइल सिस्टम तक पहुंचने में सक्षम था, लेकिन यह केवल स्थानीय रूप से काम करता था। इसे अब तक तैनात करने के बाद, मुझे एक त्रुटि मिली। कोई विचार क्यों यह तैनाती के बाद काम नहीं करेगा?

josias-r 1 फ़र॰ 2020

👍1

@ जोसियास-आर मुख्य मुद्दा आमतौर पर यह है कि पढ़ी जाने वाली फाइलों में परिनियोजन शामिल नहीं है, लेकिन यह इस बात पर निर्भर करता है कि आप उन्हें कैसे शामिल करते हैं और वे किस प्रकार की फाइलें हैं ( js / json आम तौर पर ठीक है, लेकिन अन्य फ़ाइल प्रकारों जैसे .jade को उससे निपटने के वैकल्पिक तरीकों की आवश्यकता होगी, जैसे एक अलग @now/node लैम्ब्डा/तैनाती उन फ़ाइलों को पढ़ने/हैंडल करने के लिए)।

यदि आप त्रुटि के बारे में अधिक बता सकते हैं, तो शायद कोई आपकी मदद कर सकता है।

BrunoBernardino 1 फ़र॰ 2020

@BrunoBernardino यह वास्तव में मेरे src फ़ोल्डर के अंदर JSON फ़ाइलों की बात कर रहा था। लेकिन यह वास्तव में fs.readdirSync(my_dirname_env_var) विधि भी है जो पहले से ही परिनियोजन में विफल हो जाती है। ताकि तैनाती के बाद भी डीआईआर मौजूद न हो। जब मैं अपने एपीआई के साथ जेसन के पूर्ण पथ तक पहुंचने का प्रयास करता हूं तो मुझे यहां मिलता है:

ERROR   Error: ENOENT: no such file or directory, open '/zeit/3fc37db3/src/content/somejsonfilethatexists.json'

और जैसा कि मैंने उल्लेख किया है, यह स्थानीय रूप से काम करता है जब मैं निर्माण करता हूं और फिर npm start चलाता हूं।

josias-r 1 फ़र॰ 2020

@ जोसियास-आर धन्यवाद! क्या आपने इसके बजाय एक सापेक्ष पथ (कोई चर नहीं) के साथ fs.readdirSync करने का प्रयास किया है (केवल तैनाती को डीबग करने के लिए)? मैंने पाया है कि आमतौर पर काम करने के लिए, और यदि ऐसा है, तो आप कोड के उस टुकड़े को लिख सकते हैं (केवल फ़ाइल को पढ़ना, इसे कहीं भी संग्रहीत नहीं करना) कहीं प्रारंभिक प्रक्रिया में ( getInitialProps या कुछ), ताकि परिनियोजन प्रक्रिया उठाती है कि उसे उस फ़ाइल की आवश्यकता है, और फिर इसे वास्तविक कोड/तर्क में var के साथ पढ़ना जारी रखें। यह साफ-सुथरा नहीं है, लेकिन यह तब तक काम करता है जब तक यह समर्थित न हो। मेरा मानना है कि कुछ मामलों में __dirname का उपयोग करना भी काम करता है।

BrunoBernardino 2 फ़र॰ 2020

@BrunoBernardino मैं रूट-रिश्तेदार पथ ./ से शुरू होने वाला एक फ़ाइल ट्री बनाने में सक्षम था। मुझे जो मिला वह निम्नलिखित JSON था (सूचीबद्ध नोड मॉड्यूल के बिना):

{
  "path": "./",
  "name": ".",
  "type": "folder",
  "children": [
    {
      "path": ".//.next",
      "name": ".next",
      "type": "folder",
      "children": [
        {
          "path": ".//.next/serverless",
          "name": "serverless",
          "type": "folder",
          "children": [
            {
              "path": ".//.next/serverless/pages",
              "name": "pages",
              "type": "folder",
              "children": [
                {
                  "path": ".//.next/serverless/pages/api",
                  "name": "api",
                  "type": "folder",
                  "children": [
                    {
                      "path": ".//.next/serverless/pages/api/posts",
                      "name": "posts",
                      "type": "folder",
                      "children": [
                        {
                          "path": ".//.next/serverless/pages/api/posts/[...id].js",
                          "name": "[...id].js",
                          "type": "file"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "path": ".//node_modules",
      "name": "node_modules",
      "type": "folder",
      "children": ["alot of children here ofc"]
    },
    { "path": ".//now__bridge.js", "name": "now__bridge.js", "type": "file" },
    {
      "path": ".//now__launcher.js",
      "name": "now__launcher.js",
      "type": "file"
    }
  ]
}

josias-r 2 फ़र॰ 2020

आपकी JSON फ़ाइल वहाँ गायब प्रतीत होती है, क्या आपने इसे कोड के माध्यम से शामिल करने का प्रयास किया जैसा मैंने ऊपर सुझाया था? मुख्य समस्या यह है कि परिनियोजन चलाने के अनुकूलन हमेशा गतिशील पथ नहीं उठाते हैं, मेरा मानना है, इसलिए एक स्थिर पथ को मजबूर करना मेरे लिए अतीत में काम करता है (जरूरी नहीं कि वास्तविक कोड चलने के लिए, लेकिन प्रासंगिक फाइलों को सुनिश्चित करने के लिए) शामिल हैं)। क्या यह समझ में आता है?

BrunoBernardino 2 फ़र॰ 2020

@BrunoBernardino मैंने एक गैर एपीआई समाधान पर स्विच किया है। चूंकि मैं गतिशील रूप से किसी फ़ोल्डर से फ़ाइलों की आवश्यकता चाहता हूं और मुझे केवल इन फ़ाइलों की सामग्री की आवश्यकता है, मैं import() विधि का उपयोग करने में सक्षम हूं। मैं इसे इस तरह से नहीं करना चाहता था, क्योंकि यह हैकी लगता है, लेकिन यह अनिवार्य रूप से वही काम कर रहा है जो मेरे एपीआई एंडपॉइंट ने किया होगा।
... मैंने फ़ाइल को स्थिर फ़ोल्डर में डालने का प्रयास किया लेकिन वह भी काम नहीं किया। लेकिन मुझे उम्मीद है कि भविष्य में फाइल सिस्टम तक पहुंच संभव होगी।

josias-r 3 फ़र॰ 2020

👍1

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

BrunoBernardino 3 फ़र॰ 2020

👍1

मैं जिस समाधान का उपयोग कर रहा हूं:
# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}
और स्थान में आपको पथ की आवश्यकता है
import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))
मुझे पता है कि यह वर्तमान फ़ाइल के सापेक्ष पथ वाली फ़ाइलों को संदर्भित करने की आवश्यकता को हल नहीं करता है, लेकिन यह मेरे बहुत संबंधित उपयोग के मामले को हल करता है ( /public/images फ़ोल्डर से छवि फ़ाइलों को पढ़ना)।
ज़बर्दस्त मर्द। मेरे लिए काम किया।

यह स्थानीय विकास पर पूरी तरह से काम करता है, हालांकि यह now तैनात करते समय काम नहीं करता है।

ENOENT: no such file or directory, open '/zeit/41c233e5/public/images/my-image.png'
    at Object.openSync (fs.js:440:3)
    at Object.readFileSync (fs.js:342:35)
    at getEmailImage (/var/task/.next/serverless/pages/api/contact/demo.js:123:52)
    at module.exports.7gUS.__webpack_exports__.default (/var/task/.next/serverless/pages/api/contact/demo.js:419:87)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async apiResolver (/var/task/node_modules/next/dist/next-server/server/api-utils.js:42:9) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/zeit/41c233e5/public/images/my-image.png'
}

मैं समझता हूं कि सार्वजनिक फ़ोल्डर को मार्ग पर ले जाया जाता है, इसलिए मैंने इसे उत्पादन के दौरान मूल फ़ोल्डर में खोजने के लिए मजबूर करने की कोशिश की, लेकिन फिर भी वही परिणाम मिला:

ENOENT: no such file or directory, open '/zeit/5fed13e9/images/my-image.png'
    at Object.openSync (fs.js:440:3)
    at Object.readFileSync (fs.js:342:35)
    at getEmailImage (/var/task/.next/serverless/pages/api/contact/demo.js:124:52)
    at module.exports.7gUS.__webpack_exports__.default (/var/task/.next/serverless/pages/api/contact/demo.js:331:87)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async apiResolver (/var/task/node_modules/next/dist/next-server/server/api-utils.js:42:9) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/zeit/5fed13e9/images/my-image.png'
}

PaulPCIO 5 फ़र॰ 2020

👍6

@PaulPCIO आप जिस समस्या का सामना कर रहे हैं, वह इसलिए है क्योंकि यह .json , .js , या .ts फ़ाइल नहीं है। /public तहत फ़ाइलें एक सीडीएन पर "तैनात" हैं, लेकिन लैम्ब्डा (AFAIK) के लिए नहीं, इसलिए उस स्थिति के लिए आपको या तो एक समर्पित लैम्ब्डा ( @now/node ) की आवश्यकता है includeFiles साथ तैनाती base64 कनवर्ट करें और इसे एक var (एक समर्पित फ़ाइल में या नहीं) के रूप में उपयोग करें।

BrunoBernardino 5 फ़र॰ 2020

👍1

धन्यवाद @BrunoBernardino जितना अपेक्षित था, मैं base64 विधि का उपयोग करूंगा

PaulPCIO 5 फ़र॰ 2020

👍1

यह तैनात वातावरण में __dirname के लिए कुछ संकल्प है ??

NicolasHz 6 फ़र॰ 2020

@NicolasHz क्या आप विस्तृत कर सकते हैं? मुझे आपका प्रश्न ठीक से समझ में नहीं आया।

BrunoBernardino 7 फ़र॰ 2020

@BrunoBernardino मेरी सहित अंतिम टिप्पणियों को देखते हुए, मुझे पूरा यकीन है कि "नक्शा _dirname अगले कॉन्फ़िगरेशन में" हैक तैनाती में काम नहीं करता है। यहां तक कि डब्ल्यू/जेएस और जेएसओएन फाइलें भी। कम से कम now परिनियोजन के लिए, जो संभवतः कस्टम परिनियोजन के लिए नहीं गिना जाता है।

josias-r 7 फ़र॰ 2020

👍1

@BrunoBernardino मैं तैनात env पर स्थानीय पथ की ओर

NicolasHz 7 फ़र॰ 2020

समझ गया @NicolasHz । हाँ, आपको ऊपर दिए गए समाधानों में से किसी एक का सहारा लेना होगा, इस पर निर्भर करता है कि आपको किस प्रकार की फ़ाइल को पढ़ने/पहुंचने की आवश्यकता है।

BrunoBernardino 7 फ़र॰ 2020

बस पुष्टि करते हुए, config.js परिनियोजन पर काम नहीं कर रहा है।

BrunoQuaresma 13 फ़र॰ 2020

मैं जिस समाधान का उपयोग कर रहा हूं:

# next.config.js
module.exports = {
  env: {
    PROJECT_DIRNAME: __dirname,
  },
}

और एपीआई परिभाषा में जहां मुझे पथ की आवश्यकता है (सभी पोस्ट फ़ोल्डर में मार्कडाउन प्रारूप में सभी ब्लॉग हैं और यह प्रोजेक्ट रूट में स्थित है)

import fs from 'fs'
import { join } from 'path'

const postsDirectory = join(process.env.PROJECT_DIRNAME, 'allPosts')

यह स्थानीय विकास पर पूरी तरह से काम कर रहा है।
लेकिन अब zeit पर परिनियोजित करते समय यह यह त्रुटि दे रहा है।

[POST] /api/postsApi
11:00:13:67
Status:
500
Duration:
8.1ms
Memory Used:
76 MB
ID:
kxq8t-1585546213659-5c3393750f30
User Agent:
axios/0.19.2
{
  fields: [ 'title', 'date', 'slug', 'author', 'coverImage', 'excerpt' ],
  page: 1
}
2020-03-30T05:30:13.688Z    572075eb-4a7a-47de-be16-072a9f7005f7    ERROR   Error: ENOENT: no such file or directory, scandir '/zeit/1cc63678/allPosts'
    at Object.readdirSync (fs.js:871:3)
    at getPostSlugs (/var/task/.next/serverless/pages/api/postsApi.js:306:52)
    at module.exports.fZHd.__webpack_exports__.default (/var/task/.next/serverless/pages/api/postsApi.js:253:86)
    at apiResolver (/var/task/node_modules/next/dist/next-server/server/api-utils.js:48:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '/zeit/1cc63678/allPosts'
}

sjcodebook 30 मार्च 2020

@sjcodebook जैसे @BrunoQuaresma ने कहा, कि वर्कअराउंड केवल स्थानीय रूप से काम करता है। मैं अभी भी फाइल सिस्टम तक पहुंचने के लिए लैम्ब्डा के लिए एक अलग @now/node परिनियोजन का उपयोग कर रहा हूं, और उस फ़ाइल को ऐप से अनुरोध के माध्यम से कॉल करता हूं (या जो भी स्थिर परिणाम मुझे तैनात करने से पहले चाहिए)। थोड़े पागल, लेकिन यह काम करता है।

BrunoBernardino 30 मार्च 2020

हाय @BrunoBernardino... क्या आपका मतलब कस्टम नोड सर्वर के साथ एक अलग प्रोजेक्ट है?

हालाँकि मुझे समझ में नहीं आता कि "शामिल फ़ाइलें " सेटिंग क्यों है, तो उन्हें एक्सेस करना असंभव है

valse 15 अप्रैल 2020

@valse यह एक ही प्रोजेक्ट पर हो सकता है। यहाँ मेरे now.json का एक अंश है:

{
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    },
    {
      "src": "lambdas/**/*.ts",
      "use": "@now/node",
      "config": {
        "includeFiles": ["email-templates/**"]
      }
    }
  ],
  "routes": [
    {
      "src": "/lambdas/(.+)",
      "dest": "/lambdas/$1.ts"
    }
  ]
}

इस तरह मैं उन्हें कुछ इस तरह से कॉल कर सकता हूं:

await ky.post(`${hostUrl}/lambdas/email?token=${someToken}`);

अगले एपीआई पृष्ठ के अंदर से, मान लीजिए कि मेरे पास lambdas/email.ts फ़ाइल है जो pug जैसी टेम्पलेट फ़ाइलों से ईमेल भेजने और पढ़ने को संभालती है।

मुझे आशा है कि वह मदद करेंगे!

BrunoBernardino 15 अप्रैल 2020

👍6 ❤2 🎉2

साथ ही, "includeFiles" केवल @now/node लिए काम करता है (शायद अन्य, लेकिन @now/next )

BrunoBernardino 15 अप्रैल 2020

@BrunoBernardino ऐसा लगता है कि node फ़ंक्शंस का उपयोग कर रहा है, अब यह ईएसएम नहीं पढ़ सकता है!

यह तब होता है जब मैं mdx पृष्ठों की सूची आयात करने का प्रयास करता हूं:

कोड

import { NextApiRequest, NextApiResponse } from 'next'
import { promises as fs } from 'fs'
import { join } from 'path'
const { readdir } = fs

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const postFiles = await readdir(join(process.cwd(), 'pages', 'blog'))

  const postNames: string[] = postFiles.filter((page: string) => page !== 'index.tsx')

  const posts = []

  for (const post of postNames) {
    const mod = await import(`../pages/blog/${post}`)

    posts.push({ ...mod, link: post.slice(0, post.indexOf('.')) })
  }

  res.status(200).json([])
}

मुझे जो त्रुटि मिलती है:

export const title = 'My new website!'
^^^^^^

SyntaxError: Unexpected token 'export'

talentlessguy 4 मई 2020

@talentlessguy मैं Zeit/Vercel टीम में नहीं हूं, बस एक खुश ग्राहक हूं। ऐसा लगता है कि यह उनके ग्राहक सहायता के लिए बेहतर अनुकूल हो सकता है, क्योंकि मुझे उस स्निपेट से कुछ संभावित समस्याएं दिखाई देती हैं:

आप आधार पथ के लिए process.cwd() के बजाय बस कुछ भी नहीं या __dirname का उपयोग करना चाह सकते हैं। मैंने लैम्ब्डा में उत्तरार्द्ध का उपयोग नहीं किया है, लेकिन अन्य, इसलिए मुझे यकीन नहीं है कि यह कोई मुद्दा है या नहीं
आप प्रकार के रूप में NextApiRequest और NextApiResponse आयात कर रहे हैं, लेकिन यह @now/node" से चलना चाहिए, है ना? तो प्रकारों को आयात किया जाना चाहिए जैसे:

import { NowRequest, NowResponse } from '@now/node';

आप pages/... से आयात/पढ़ रहे हैं लेकिन क्या आप उन्हें includeFiles माध्यम से शामिल कर रहे हैं? आपका now.json कैसा दिखता है?

BrunoBernardino 4 मई 2020

@ब्रूनोबर्नार्डिनो

मैं __dirname उपयोग नहीं कर सकता क्योंकि यह हमेशा / , इसके बजाय process.cwd() वास्तविक पथ दिखाता है

मैंने आपके सुधारों को स्वीकार कर लिया और यह काम कर गया:

लैम्ब्डा/posts.ts

import { NowResponse, NowRequest } from '@now/node'
import { promises as fs } from 'fs'
import { join } from 'path'
const { readdir } = fs

export default async (req: NowRequest, res: NowResponse) => {
  const postFiles = await readdir(join(process.cwd(), 'pages', 'blog'))

  const postNames: string[] = postFiles.filter((page: string) => page !== 'index.tsx')

  const posts = []

  for (const post of postNames) {
    const mod = await import(`../pages/blog/${post}`)

    posts.push({ ...mod, link: post.slice(0, post.indexOf('.')) })
  }

  res.status(200).json([])
}

now.json

{
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    },
    {
      "src": "lambdas/**/*.ts",
      "use": "@now/node",
      "config": {
        "includeFiles": ["pages/blog/*.mdx"]
      }
    }
  ],
  "routes": [
    {
      "src": "/lambdas/(.+)",
      "dest": "/lambdas/$1.ts"
    }
  ]
}

त्रुटि मुझे मिलती है:

import Meta from '../../components/Article/Meta.tsx'
^^^^^^

SyntaxError: Cannot use import statement outside a module

ऐसा लगता है कि टाइपस्क्रिप्ट नोड फ़ंक्शन .mdx को मॉड्यूल के रूप में नहीं मान सकता :(

talentlessguy 5 मई 2020

👍2

ठीक है, तो ऐसा लगता है कि आपको समस्या मिल गई है। सीधे आयात करने के बजाय फ़ाइल सामग्री को पढ़ने और उन्हें पार्स करने का प्रयास करें। मैंने उस काम की तरह एक आयात कभी नहीं देखा है, और ऐसा कुछ ऐसा लगता है जो केवल कुछ बैबेल जादू के साथ काम करेगा, जिसका आप सादे टीएस के बजाय उपयोग करने के लिए भी स्वागत करते हैं।

BrunoBernardino 5 मई 2020

@BrunoBernardino आप सही हैं, लेकिन यह सादा ts नहीं है ... मेरे पास esnext के लिए लक्ष्य और esnext के लिए मॉड्यूल भी है, यह सब कुछ आयात करने में सक्षम होना चाहिए ... लेकिन किसी तरह यह नहीं करता है

वैसे भी यह इस मुद्दे से संबंधित नहीं है, इसे कहीं न कहीं गूगल करने वाला है

talentlessguy 5 मई 2020

कोई चिंता नहीं। कुछ सुझाव https://mdxjs.com/advanced/typescript और https://mdxjs.com/getting-started/webpack में हो सकते हैं, जो ऐसा कर सकते हैं ताकि @now/node परिनियोजन में बदलाव करने की आवश्यकता हो इसका इस्तेमाल करें। वैसे भी, उनका समर्थन मददगार होना चाहिए।

BrunoBernardino 5 मई 2020

इस पर कोई आंदोलन? एपीआई मार्गों में उपयोग के लिए एचटीएमएल ईमेल टेम्पलेट्स को शामिल करने में सक्षम होना बहुत अच्छा होगा। अभी मैं उन्हें जेएस फाइलों में शामिल कर रहा हूं लेकिन मैं इस हैक का विशेष प्रशंसक नहीं हूं।

jasonsilberman 12 मई 2020

👍6

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

yarn add --dev raw-loader

const templates = {
    verify: require("raw-loader!../template/email/verify.hbs").default,
};

फिर एक स्ट्रिंग के रूप में templates.verify उपयोग करें।

balthild 27 मई 2020

अगला-i18next के साथ एक समस्या चल रही है जो इस एक ( vercel/vercel#4271 ) से संबंधित प्रतीत होती है। मूल रूप से now सर्वर रहित फ़ंक्शन में /public/static/locales/ अंदर स्थित .json फ़ाइलों को नहीं डालता है। जब तक यहां चर्चा की गई सुविधा को अगले में नहीं जोड़ा जाता है, तब तक क्या कोई वैकल्पिक हल प्रदान कर सकता है?

borispoehland 31 मई 2020

@borispoehland क्या आपने ऊपर से आयात/आवश्यक वर्कअराउंड की कोशिश की है? यह काम करना चाहिए।

BrunoBernardino 31 मई 2020

@borispoehland क्या आपने ऊपर से आयात/आवश्यक वर्कअराउंड की कोशिश की है? यह काम करना चाहिए।
@ ब्रूनोबर्नार्डिनो मुझे नहीं पता कि आपका क्या मतलब है।

तुम मुझे किसी भी तरह सब आयात करने का एक उदाहरण दे सकते हैं .json अंदर फ़ाइलों public/static/locales serverless समारोह में? और यह कहां करना है (किस फाइल में)?

मैं अगला उपयोग कर रहा हूं (जैसा कि आपने पहले कहा था, includeFiles @now/next के साथ संगत नहीं है, आईडीके अगर इससे मेरी समस्या पर कोई प्रभाव पड़ता है)।

इसके अलावा, क्योंकि next-i18next मेरे लिए एक ब्लैकबॉक्स है (इस प्रकार मैं वहां से फ़ाइलों को आयात नहीं करना चाहता), मैं उन्हें पूरी तरह से आयात करने का एक तरीका खोजता हूं ताकि next-i18next सीधे उन तक पहुंचें (उपरोक्त अन्य टिप्पणियों में, कभी-कभी केवल PROJECT_DIRNAME को next.config.json अंदर परिभाषित किया गया था और आयात मैन्युअल रूप से किया जाना था। यह वह नहीं है जिसे मैं पहुंचने का प्रयास करता हूं)। जैसे vercel/vercel#4271 , मैं सिर्फ now चाहता हूं कि मेरी .json फाइलों को सर्वर रहित फ़ंक्शन में किसी भी तरह ले जाए।

borispoehland 1 जून 2020

@borispoehland _any_ फ़ाइल में pages/api अंदर (या जो वहां एक द्वारा कॉल किया जाता है), https://github.com/vercel/next.js/issues/8251#issuecomment -544008976 जैसा कुछ

आपको आयात के साथ कुछ भी करने की आवश्यकता नहीं है। मुद्दा यह है कि वेबपैक वर्सेल चलता है तो उन फ़ाइलों को शामिल करने की आवश्यकता होगी, और इसे काम करना चाहिए।

मुझे उम्मीद है कि इसका कोई अर्थ है।

BrunoBernardino 1 जून 2020

@borispoehland _any_ फ़ाइल में pages/api (या जिसे वहां एक द्वारा बुलाया जाता है) के अंदर, # 8251 (टिप्पणी) जैसा कुछ करें
आपको आयात के साथ कुछ भी करने की आवश्यकता नहीं है। मुद्दा यह है कि वेबपैक वर्सेल चलता है तो उन फ़ाइलों को शामिल करने की आवश्यकता होगी, और इसे काम करना चाहिए।
मुझे उम्मीद है कि इसका कोई अर्थ है।

@BrunoBernardino इस दृष्टिकोण के साथ समस्या यह है कि मेरे पास बहुत सारी json फाइलें हैं। प्रत्येक फ़ाइल के लिए मैन्युअल रूप से आयात करना एक प्रकार का बोझिल है। क्या now बताने का कोई आसान तरीका है: "अरे, कृपया उस निर्देशिका के अंदर सभी जेसन फाइलों को दोबारा उठाएं"? अग्रिम में धन्यवाद

संपादित करें: यहां तक कि मैन्युअल रूप से json फ़ाइलों को आयात करने से पहले की तुलना में वही त्रुटि होती है। मैं इसके लिए एक नया अंक खोलने जा रहा हूं, मुझे लगता है

borispoehland 1 जून 2020

👍1

मैंने अपनी समस्या के लिए एक नया मुद्दा खोला , अगर कोई चर्चा में शामिल होने में दिलचस्पी रखता है। अभी के लिए धन्यवाद, @BrunoBernardino !

borispoehland 1 जून 2020

❤2 👍2

__dirname का उपयोग करने की क्षमता को सक्षम करने के लिए एक अन्य विकल्प / समाधान जैसा कि आप सामान्य रूप से व्यवहार करने की अपेक्षा करते हैं, वेबपैक कॉन्फ़िगरेशन को समायोजित करना है।

डिफ़ॉल्ट रूप से, वेबपैक पॉलीफ़िल के साथ विभिन्न नोड ग्लोबल्स को उपनाम देगा, जब तक कि आप इसे नहीं बताते:
https://webpack.js.org/configuration/node/
और वेबपैक डिफ़ॉल्ट सेटिंग्स को __dirname और __filename अकेला छोड़ना है, यानी उन्हें पॉलीफिल नहीं करना है और नोड को सामान्य रूप से संभालने देना है।

हालांकि, Next.js वेबपैक कॉन्फिगरेशन वेबपैक डिफॉल्ट्स https://github.com/vercel/next.js/blob/bb6ae2648ddfb65a810edf6ff90a86201d52320c/packages/next/build/webpack-config.ts#L661 -L663 का उपयोग/प्रतिबिंबित नहीं करता है।

उस सब ने कहा, मैंने वेबपैक कॉन्फिगरेशन को एडजस्ट करने के लिए नीचे दिए गए कस्टम नेक्स्ट कॉन्फिग प्लगइन का इस्तेमाल किया है।

महत्वपूर्ण: यह मेरे उपयोग के मामले में काम करता है। इसका परीक्षण वातावरण/कॉन्फ़िगरेशन की एक विस्तृत श्रृंखला में नहीं किया गया है और न ही सभी Next.js इकाई/एकीकरण परीक्षणों के विरुद्ध इसका परीक्षण किया गया है। इसका उपयोग करने से आपके वातावरण में अनपेक्षित दुष्प्रभाव हो सकते हैं।
साथ ही, नेक्स्ट के पास __dirname और __filename लिए वेबपैक डिफ़ॉल्ट सेटिंग्स का उपयोग न करने के विशिष्ट कारण हो सकते हैं। तो फिर, नीचे दिए गए कोड के अनपेक्षित दुष्प्रभाव हो सकते हैं और सावधानी के साथ उपयोग किया जाना चाहिए।

साथ ही, नीचे दिए गए प्लगइन को next-compose-plugins पैकेज के साथ उपयोग के लिए डिज़ाइन किया गया है: https://github.com/cyrilwanner/next-compose-plugins

लेकिन एक सामान्य प्लगइन के रूप में भी काम करना चाहिए: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

const withCustomWebpack = (nextCfg) => {
  return Object.assign({}, nextCfg, {
    webpack(webpackConfig, options) {
      // We only want to change the `server` webpack config.
      if (options.isServer) {
        // set `__dirname: false` and/or `__filename: false` here to align with webpack defaults:
        // https://webpack.js.org/configuration/node/
        Object.assign(webpackConfig.node, { __dirname: false });
      }

      if (typeof nextCfg.webpack === 'function') {
        return nextCfg.webpack(webpackConfig, options);
      }

      return webpackConfig;
    },
  });
};

aweber1 3 जून 2020

मैंने @jkjustjoshing द्वारा समाधान लागू किया, और जब यह स्थानीय रूप से बहुत अच्छा काम करता है, तो यह तब काम नहीं करता जब मैं ऐप को वर्सेल पर तैनात करता हूं।

मुझे निम्नलिखित त्रुटि मिलती है:

Error: GraphQL error: ENOENT: no such file or directory, open '/vercel/37166432/public/ts-data.csv'

मेरा कोड:

const content = await fs.readFile(
  path.join(serverRuntimeConfig.PROJECT_ROOT, "./public/ts-data.csv")
);

यहाँ फ़ाइल का लिंक दिया गया है: https://github.com/bengrunfeld/trend-viewer/blob/master/pages/api/graphql-data.js

bengrunfeld 13 जुल॰ 2020

@bengrunfeld हाँ, आपका समाधान केवल स्थानीय रूप से काम करता है।

मुझे हाल ही में एक समान समस्या थी (एक एपीआई मार्ग में एक फ़ाइल पढ़ना चाहता था) और समाधान अपेक्षा से आसान था।

कोशिश करें path.resolve('./public/ts-data.csv')

borispoehland 13 जुल॰ 2020

👍15 🎉6 ❤5 🚀4

@borispoehland बहुत बहुत धन्यवाद !! आपका समाधान खूबसूरती से काम किया!

bengrunfeld 14 जुल॰ 2020

@bengrunfeld कोई समस्या नहीं, मैंने इसे संयोग से भी पाया ( @BrunoBernardino ;))। मुझे लगता है कि यह यहां हर किसी की समस्या का समाधान है।

borispoehland 14 जुल॰ 2020

❤3 😄1

कृपया ध्यान दें, आपको अभी भी next.config.js । मैंने देखा कि @borispoehland के समाधान ने काम किया, और एक समान त्रुटि प्राप्त करने के बाद मैंने फ़ाइल को हटा दिया।

फिर मैंने इसे ऊपर @jkjustjoshing के समाधान पर रीसेट कर दिया,

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

bengrunfeld 14 जुल॰ 2020

कृपया ध्यान दें, आपको अभी भी next.config.js । मैंने इसे तब हटा दिया जब मैंने देखा कि @borispoehland के समाधान ने काम किया, और इसी तरह की त्रुटि प्राप्त की।
मैंने इसे ऊपर @jkjustjoshing के समाधान पर रीसेट कर दिया,
# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

@bengrunfeld वास्तव में? हो सकता है कि आप अभी भी कोड में किसी अन्य बिंदु पर PROJECT_ROOT दृष्टिकोण का उपयोग कर रहे हों, क्योंकि मेरी परियोजना में यह इसके बिना काम करता है। त्रुटि कैसी दिखती है?

borispoehland 14 जुल॰ 2020

वर्सेल में तैनात करते समय, मैं एक पेज में readFile कैसे लिखूं जो एसएसजी और एसएसआर/पूर्वावलोकन मोड दोनों में काम करेगा?

जहां यह काम नहीं करता है उसका डेमो रिपॉजिटरी: https://github.com/mathdroid/blog-fs-demo

https://blog-fs-demo.vercel.app/

mathdroid 26 जुल॰ 2020

@mathdroid क्रमशः readFile और readdir को getStaticProps और getStaticPaths फ़ंक्शंस के अंदर ले जाने का प्रयास करें, अन्यथा कोड ब्राउज़र में चल सकता है।

हालांकि, fs आयात करना शीर्ष पर ठीक होना चाहिए।

आइए जानते हैं कि यह कैसे काम करता है।

BrunoBernardino 26 जुल॰ 2020

@borispoehland अद्भुत समाधान के लिए धन्यवाद। उम्मीद नहीं थी कि path.resolve() से /public स्थानीय और वर्सेल दोनों पर काम करेगा: आंखें:! आप दिन के लिए मेरे तारणहार हैं। :+1:

subwaymatch 3 अग॰ 2020

🎉1 👍1

@borispoehland मैंने सर्वर रहित फ़ंक्शन के अंदर आपके समाधान की कोशिश की लेकिन अभी भी प्राप्त करें:
ENOENT: ऐसी कोई फ़ाइल या निर्देशिका नहीं, '/var/task/public/posts.json' खोलें

const postsFile = resolve('./public/posts.json');

const updateCache = async (posts: IPost[]): Promise<IPost[]> => {
    postCache = posts;
    fs.writeFileSync(postsFile, JSON.stringify(postCache)); // <====
    return postCache;
}

मैंने अगले के बिना हमारे साथ प्रयास किया। config.js

module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

हो सकता है कि आपका समाधान सर्वर रहित कार्यों पर काम न करे?

neckaros 12 अग॰ 2020

👍1

@borispoehland मैंने सर्वर रहित फ़ंक्शन के अंदर आपके समाधान की कोशिश की लेकिन अभी भी प्राप्त करें:
ENOENT: ऐसी कोई फ़ाइल या निर्देशिका नहीं, '/var/task/public/posts.json' खोलें
const postsFile = resolve('./public/posts.json');

const updateCache = async (posts: IPost[]): Promise<IPost[]> => {
    postCache = posts;
    fs.writeFileSync(postsFile, JSON.stringify(postCache)); // <====
    return postCache;
}
मैंने अगले के बिना हमारे साथ प्रयास किया। config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}
हो सकता है कि आपका समाधान सर्वर रहित कार्यों पर काम न करे?

मुझे नहीं पता कि यह आपकी ओर से काम क्यों नहीं करता... क्षमा करें

borispoehland 12 अग॰ 2020

ठीक है, मैंने इसे @bengrunfeld कोड का उपयोग करके पढ़ने के लिए काम किया है लेकिन दुर्भाग्य से आप नहीं लिख सकते हैं:
[त्रुटि: EROFS: केवल-पढ़ने के लिए फ़ाइल सिस्टम, '/var/task/public/posts.json' खोलें]
तो बहुत अधिक डेटाबेस कॉल से बचने के लिए कैश को अपडेट करने का कोई तरीका नहीं :(

neckaros 12 अग॰ 2020

👍1

@necaros क्या आपने .json अलावा किसी अन्य फ़ाइल को पढ़ने के लिए मेरे दृष्टिकोण का उपयोग करने का प्रयास किया है, उदाहरण के लिए .jpg फ़ाइल?

borispoehland 12 अग॰ 2020

👍1

ठीक है, मैंने इसे @bengrunfeld कोड का उपयोग करके पढ़ने के लिए काम किया है लेकिन दुर्भाग्य से आप नहीं लिख सकते हैं:
[त्रुटि: EROFS: केवल-पढ़ने के लिए फ़ाइल सिस्टम, '/var/task/public/posts.json' खोलें]
तो बहुत अधिक डेटाबेस कॉल से बचने के लिए कैश को अपडेट करने का कोई तरीका नहीं :(

@necaros आपको S3 (या कुछ अन्य, बाहरी फाइल सिस्टम) से लिखने और पढ़ने में सक्षम होना चाहिए, लेकिन मैं आमतौर पर त्वरित, कैश्ड चीजों के लिए रेडिस का उपयोग करता हूं जो अस्थिर हो सकते हैं। https://redislabs.com इसे "सर्वर रहित" रखता है, और यदि आप चाहें तो मुझे https://nextjs-boilerplates.brn.sh में उत्पादन-तैयार कोड उदाहरण मिल गए हैं।

BrunoBernardino 12 अग॰ 2020

👍1

@borispoehland मैं पढ़ सकता था लेकिन सेवाहीन कार्य से नहीं लिख सकता था। लेकिन मैंने इसे नई सामग्री जोड़ने के बजाय वृद्धिशील बिल्ड (पुन: सत्यापित) में अपने कैश को रीफ्रेश करके काम करना समाप्त कर दिया। जो मुझे लगता है कि एक बुरा पैटर्न नहीं है। आपकी सहायताके लिए धन्यवाद!

@ ब्रूनोबर्नार्डिनो धन्यवाद, मैं एक नज़र

neckaros 13 अग॰ 2020

वास्तव में एक पूरी तरह से मुक्त शौकिया समाधान की तलाश में है जो आपके पास कुछ उपयोगकर्ता होने के बाद टूटता नहीं है :)

उस की नकल करें। रेडिसलैब्स और वर्सेल ने मेरे लिए यह किया। मैं

BrunoBernardino 13 अग॰ 2020

कुछ खुदाई के बाद मुझे विस्तारित ओएस पैकेज के साथ काम करने वाली फाइलें मिल गईं ...

import { tmpdir } from "os";
const doc = new PDFDocument()
const pdfPath = path.join(tmpdir(), `${store.id}${moment().format('YYYYMMDD')}.pdf`)
const writeStream = doc.pipe(fs.createWriteStream(pdfPath)

फ़ाइल पढ़ना @subwaymatch समाधान के साथ काम करता है
const logoPath = path.resolve('./public/logo.png')

Edjevw12 25 अग॰ 2020

🚀2 👍2

कुछ खुदाई के बाद मुझे विस्तारित ओएस पैकेज के साथ काम करने वाली फाइलें मिल गईं ...
import { tmpdir } from "os";
const doc = new PDFDocument()
const pdfPath = path.join(tmpdir(), `${store.id}${moment().format('YYYYMMDD')}.pdf`)
const writeStream = doc.pipe(fs.createWriteStream(pdfPath)
फ़ाइल पढ़ना @subwaymatch समाधान के साथ काम करता है
const logoPath = path.resolve('./public/logo.png')

बढ़िया, क्या आप इस फ़ाइल की सामग्री को वापस पढ़ने में सक्षम हैं? क्या निर्देशिका सुलभ और स्थायी है?

marklundin 1 अक्तू॰ 2020

👍1

@marklundin tmpdir नामक फ़ंक्शन के साथ मुझे संदेह है कि यह स्थायी है, लेकिन अगर यह काम करता है, तो यह जानना अच्छा होगा कि वास्तव में tmpdir कितना अस्थायी है, हाँ ...

Svish 1 अक्तू॰ 2020

इस पर कोई अपडेट? मैं सोच रहा हूं कि यह getInitialProps में क्यों काम करता है, लेकिन एपीआई मार्गों में नहीं 🤷‍♂️

मेरा वर्तमान समाधान

const data = await import(`../../../../data/de/my-nice-file.json`);
res.json(data.default);

wiesson 13 अक्तू॰ 2020

👍2

वर्तमान में एपीआई मार्गों में भी यह समस्या है

mattvb91 14 अक्तू॰ 2020

वर्तमान में एपीआई मार्गों में भी यह समस्या है

यहां कुछ कार्य समाधान हैं, विशेष रूप से आपको क्या समस्या हो रही है?

BrunoBernardino 14 अक्तू॰ 2020

मैं इस धागे से सुझावों के साथ भी इसे काम करने के लिए संघर्ष कर रहा हूं। मेरा उपयोग-मामला यह है कि मैं एक गाइड लिख रहा हूं और घटक के साथ ही घटक के लिए स्रोत-कोड दिखाना चाहता हूं। ऐसा करने के लिए मेरी विधि fs का उपयोग घटक की jsx फ़ाइल को getServerSideProps के अंदर लोड करने और फ़ाइल सामग्री के स्ट्रिंग मान को प्रोप के रूप में पास करने के लिए कर रही है।

मैं स्थानीय रूप से काम करने के बारे में चाँद पर महसूस कर रहा था, लेकिन फिर जब मैं इसे तैनात करने गया, तो खुशी चली गई :(

कृपया देखें: https://github.com/ElGoorf/i18next-guide/blob/fix-example-components/pages/plurals.jsx

ElGoorf 17 अक्तू॰ 2020

@ElGoorf आपकी समस्या यह है कि public फाइलें किनारे पर हैं, और फ़ंक्शन लैम्ब्डा पर हैं। अब, @vercel/next अभी भी includeFiles अनुमति नहीं देता है, इसलिए आपके लिए इसे काम करने का सबसे आसान तरीका इसके साथ lambda फ़ंक्शन का उपयोग करना होगा।

यहां कुछ नमूना कोड दिए गए हैं जिन्होंने यहां दूसरों की मदद की: https://github.com/vercel/next.js/issues/8251#issuecomment -614220305

BrunoBernardino 17 अक्तू॰ 2020

👍1

धन्यवाद @ ब्रूनोबर्नार्डिनो मुझे नहीं पता था कि मैं "एक्स छिपी हुई वस्तुओं को और अधिक लोड करता हूं ..." और मुझे लगा कि मैं अर्थ खोने वाले धागे से पागल हो रहा हूं!

दुर्भाग्य से, मैं आपके समाधान के साथ संघर्ष कर रहा था, क्योंकि यह पहली बार है जब मैंने एज/लैम्ब्डा के बारे में सुना है, हालांकि, मैंने पाया कि @balthild का समाधान उस चीज़ के करीब था जो मैं मूल रूप से node.fs विधि की कोशिश करने से पहले था: https:/ /github.com/vercel/next.js/issues/8251#issuecomment -634829189

ElGoorf 17 अक्तू॰ 2020

महान! क्या आपको यह काम मिल गया? या आपको अभी भी समस्या हो रही है?

मुझे यकीन नहीं है कि वर्सेल भी उस शब्दावली का उपयोग करता है, लेकिन एज से मेरा मतलब सीडीएन से है, जहां से स्थिर फाइलें परोसी जाती हैं, और लैम्ब्डा से मेरा मतलब है "बैकएंड" फ़ंक्शन जो एपीआई मार्गों से कॉल किए जाते हैं, जो एडब्ल्यूएस लैम्ब्डा फ़ंक्शंस की तरह अलग-थलग हैं .

BrunoBernardino 17 अक्तू॰ 2020

👍1

अरे,

vercel पर next.js का उपयोग करके फ़ाइलों को लिखने पर कोई अपडेट? मैं कोई समस्या नहीं पढ़ सकता हूँ। const logoPath = path.resolve('./public/logo.png') का उपयोग करना

मैं public/sitemap.xml फ़ाइल को अधिलेखित करने का प्रयास कर रहा हूँ (vercel पर आकार सीमा के कारण) मैं इसे केवल सार्वजनिक फ़ोल्डर में एक स्थिर फ़ाइल के रूप में त्रुटि के बिना वापस कर सकता हूँ। मैंने पहले साइटमैप को zlib के साथ कार्यान्वित किया है और प्रतिक्रिया स्ट्रीमिंग कर रहा है लेकिन ऐसा लगता है कि स्ट्रीम समाप्त होने तक प्रतीक्षा करें और फिर इसे वापस कर दें। यह आकार सीमा त्रुटि को प्रभावित नहीं करता है, लेकिन दुर्भाग्य से यह बहुत धीमा है। मैं लोगों के किसी भी सुझाव के लिए खुला हूं। साइटमैप एक एपीआई कॉल से एक अलग बैकएंड के लिए बनाया गया है और इसे नियमित रूप से अपडेट करने की आवश्यकता है।

जिन चीजों का मैंने प्रयास किया है:

एक्सएमएल को ज़िप करना और स्ट्रीमिंग करना - काम करता है लेकिन बहुत धीमा।
एपीआई फ़ंक्शन से साइटमैप बनाना और वापस करना, दुर्भाग्य से यह आकार सीमा को हिट करता है।
आकार की परवाह किए बिना सार्वजनिक फ़ोल्डर (कार्य) से स्थिर xml फ़ाइल पढ़ना, लेकिन अद्यतन करने योग्य नहीं।
इस फ़ाइल में परीक्षण लेखन, काम नहीं करता है। किसी फ़ाइल/फ़ोल्डर में परीक्षण लेखन काम नहीं करता
"एपीआई" फ़ंक्शन, आकार त्रुटि से स्थिर एक्सएमएल फ़ाइल लौटने का परीक्षण करें। यह स्थानीय रूप से काम करता है।
"पृष्ठ" getServerSideProp आकार त्रुटि से स्थिर xml फ़ाइल लौटाने का परीक्षण करें। यह स्थानीय रूप से काम करता है।
किसी भी विचार की बिल्कुल सराहना करेंगे?

emomooney 23 अक्तू॰ 2020

अरे @emomooney , मैं कल्पना नहीं करता कि वर्सेल कभी भी किसी फ़ंक्शन (यहां तक कि कैशिंग के लिए) में फाइलें लिखने की इजाजत देता है, क्योंकि सर्वर रहित का मुख्य "लाभ" इसकी स्टेटलेसनेस है, और इससे इसमें राज्य जुड़ जाएगा, इसलिए मुझे लगता है कि आप करेंगे इसके लिए किनारे/सीडीएन का उपयोग करने की आवश्यकता है।

मैंने पहले साइटमैप को zlib के साथ कार्यान्वित किया है और प्रतिक्रिया स्ट्रीमिंग कर रहा है लेकिन ऐसा लगता है कि स्ट्रीम समाप्त होने तक प्रतीक्षा करें और फिर इसे वापस कर दें।

मैं उत्सुक हूं कि क्या आप बाद की कॉलों के लिए इस धीमेपन का अनुभव कर रहे थे, या केवल पहले, ठंड की शुरुआत के लिए? मुझे लगता है कि यह Vercel को next.js api फ़ंक्शन, या एक समर्पित लैम्ब्डा के माध्यम से एक API कॉल था, जैसा कि मैं यहां करता हूं ।

यदि यह था और यह अभी भी बहुत धीमा था, तो क्या आपका "अलग बैकएंड" वर्सेल के बाहर है? यदि ऐसा है, तो आप संभावित रूप से इसका उपयोग sitemap.xml फ़ाइल और vercel --prod को एक डोमेन में बनाने के लिए कर सकते हैं, मूल रूप से फ़ाइल को पढ़ने योग्य और सुलभ होने के लिए "कैशिंग" कर सकते हैं, और आपको बस अपडेट करने की आवश्यकता होगी साइटमैप को किसी अन्य डोमेन/उपडोमेन से लिंक करने के लिए robots.txt ।

BrunoBernardino 24 अक्तू॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Next.js: Next.js एपीआई मार्गों (और पृष्ठों) को फाइलों को पढ़ने का समर्थन करना चाहिए

महत्वपूर्ण लेख मांगना

क्या आपका फीचर अनुरोध किसी समस्या से संबंधित है? कृपया विस्तार में बताएं।

आप जो समाधान चाहते हैं उसका वर्णन करें

उन विकल्पों का वर्णन करें जिन पर आपने विचार किया है

अतिरिक्त संदर्भ

सबसे उपयोगी टिप्पणी

सभी 87 टिप्पणियाँ

संबंधित मुद्दों