Next.js: नेक्स्ट पेजों के लिए कहां दिखता है, इसे कैसे बदलें?

AFAIK, आप नहीं कर सकते। आप फ़ाइल सिस्टम रूटिंग को next.config.js माध्यम से अक्षम कर सकते

दस्तावेज़ों के अनुसार, dir परियोजना के स्थान को निर्दिष्ट करता है, इसलिए इसे ./src पर सेट करने का सही तरीका होगा:

const next = require('next')({
  dev,
  dir: './src'
})

लेकिन इसका उपयोग केवल प्रोग्रामेटिक एपीआई (कस्टम सर्वर के साथ) में किया जाता है और यह अन्य फाइलों के अनुमानित स्थान को भी प्रभावित करेगा (जैसे next.config.js और static निर्देशिका, मुझे विश्वास है)।

पता नहीं ये अन्य टिप्पणियाँ क्या कह रही हैं, लेकिन आप कॉन्फ़िगर कर सकते हैं कि कौन सी निर्देशिका अगला है।js कमांड-लाइन से पृष्ठों की तलाश करता है:

$ next ./src
$ next dev ./src
$ next build ./src
$ next start ./src -p 8080

आप निर्देशिका नहीं बदल सकते हैं, और हम इसे बदलने की योजना नहीं बना रहे हैं, कृपया कोई समस्या पोस्ट करने से पहले भविष्य में समस्या ट्रैकर (बंद मुद्दों सहित) पर एक समस्या की खोज करें, क्योंकि यह प्रश्न काफी बार सामने आया है .

@timneutkens मोमेंट.जेएस के अनुरक्षक की तरह नहीं हैं, जिन्होंने क्लाइंट-साइड ऐप्स के लिए ऑप्टिमाइज़ेशन को अस्वीकार कर दिया है, जिसके कारण सीआरए में भी, कई परियोजनाओं में कस्टम कॉन्फिग का नेतृत्व किया गया है।
बहुत सारे प्रोजेक्ट बॉयलरप्लेट्स में src फ़ोल्डर होता है, जहां फाइलें रखी जाती हैं।

चूंकि यह खोजते समय Google पर वर्तमान में पहला परिणाम है, हो सकता है कि उस निर्णय @timneutkens के पीछे तर्क की व्याख्या करना फायदेमंद होगा?

जैसा कि @brainkim jus द्वारा कहा गया है, अपने पैकेज json स्क्रिप्ट को ./src के साथ जोड़ें। आप जो करना चाहते हैं वह अगले डिस्ट फ़ोल्डर को कॉन्फ़िगर करना है (मैं रूट में डिस्ट चाहता था)।

ध्यान दें कि हम फोल्डर को ../ के साथ प्रीपेन्ड करते हैं।

// src/next.config.js
module.exports = {
  distDir: '../dist'
}

// package.json
  "scripts": {
    "dev": "next ./src",
    "build": "next build ./src",
    "start": "next start ./src",
    ..
  },

@msegers मैं इस सेटअप का पालन करने की कोशिश कर रहा हूं और इस तरह की कई त्रुटियां प्राप्त कर रहा हूं:

Cannot find module 'next/document'
Cannot find module 'next/error'
...

HTTP अनुरोध पर (आयात चरण में कोई त्रुटि नहीं)। कोई विचार इसे कैसे ठीक करें?

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

अतिरिक्त: pages से client/pages को सिमलिंक करने का प्रयास किया। हॉट रीलोड को छोड़कर अधिकांश सामान काम करता हुआ प्रतीत होता है। दुखी :(

@msegers सुझाव ने मेरे लिए काम किया।

यदि आप अगला-i18next का उपयोग करते हैं, तो सुनिश्चित करें कि आपने NextI18 कॉन्फ़िगरेशन में सही लोकेलपाथ सेट किया है: localePath: 'src/static/locales/',

ऐशे ही :

NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['en'],
  debug: true,
  localePath: 'src/static/locales/',
});

ऐसा लगता है कि इसके लिए काफी भूख है - जहां मेरे शीर्ष स्तर के पृष्ठों की तलाश की जाती है, वहां कॉन्फ़िगर करने में सक्षम होना पसंद करेंगे।

@malimccalla आप https://github.com/slaterbbx/fullstackinator

चेतावनी

जहाँ तक मुझे पता है आप फ़ोल्डर का नाम नहीं बदल सकते, "पृष्ठ" रहने की आवश्यकता है

कैसे

क्लाइंट फ़ोल्डर में देखें, ध्यान दें कि ऐसा करने के लिए कुछ महत्वपूर्ण चीज़ों की आवश्यकता है। मैं जो उदाहरण दिखाता हूं वह एक कस्टम सर्वर परिदृश्य + टाइपस्क्रिप्ट के लिए है, लेकिन यह मूल रूप से वही बात है, मूल चीजें हैं।

1. package.json में स्क्रिप्ट में, "npm रन देव" के लिए बस (अगला) के बजाय फ़ोल्डर ( अगला ./client ) को इंगित करना सुनिश्चित करें / बिल्ड स्क्रिप्ट के लिए भी ऐसा ही करें
2. उस फ़ोल्डर में ( ./client ) आपको एक next.config.js फ़ाइल की आवश्यकता होगी। तो बस इसमें निम्नलिखित है:

module.exports = {
    distDir: '../.next' // so that you can tell it to go up a folder for the dev and prod files.
}

यदि आपके कोई प्रश्न हैं, तो बेझिझक मुझे एक ईमेल करें या यहाँ भी ठीक है।

अद्यतन: मैंने अभी देखा है कि ऊपर @brainkim बिल्कुल वही स्पष्टीकरण देता है .. क्षमा करें, मैं इसे छोड़ दूंगा क्योंकि लिंक किया गया उदाहरण इस तरह के उदाहरण की तलाश करने वाले किसी भी व्यक्ति के लिए अधिक जटिल उपयोग केस दिखाता है।

इसके लिए धन्यवाद @slaterbbx

मेरी समस्या यह है कि मैं अवधारणात्मक रूप से संबंधित कोड को सह-पता लगाने की कोशिश कर रहा हूं। मेरे पास निम्नलिखित संरचना है:

├── components
|   ├──  GridItem.tsx
|   ├──  Avatar.tsx
|   └──  Button.tsx
├── pages
|   └── profile
|       └── components
|       |   ├── CoverPhoto.tsx
|       |   └── UserInterests.tsx
|       ├── data.ts
|       ├── styles.ts
|       └── index.tsx

इस दृष्टिकोण के साथ मुद्दा (जैसा कि @timneutkens द्वारा बताया गया है) यह है कि pages भीतर की सभी फाइलों को वेबपैक एंट्री पॉइंट के रूप में माना जाता है, इसलिए बदले में कॉमनचंक्स कॉन्फ़िगरेशन के लिए विचार किया जाता है। जैसा कि यह वर्तमान में खड़ा है अगला केवल pages भीतर शीर्ष स्तर के पृष्ठ घटकों का समर्थन करता है। अगर मैं कॉन्फ़िगर कर सकता हूं जहां पृष्ठों की तलाश की जाती है तो मैं इसे (उचित?) संरचना रख सकता हूं। मैं config में कुछ इस तरह की कल्पना करता हूं

pages: ["./pages/*/index.tsx"]

इसका उपयोग उन परियोजनाओं के लिए भी किया जा सकता है जो पृष्ठों को कई स्थानों पर संग्रहीत करते हैं

pages: ["./pages/*", "./admin-pages/*"]

या प्रोजेक्ट जो अपने शीर्ष स्तर के घटकों को कुछ अलग नाम वाले फ़ोल्डर में संग्रहीत करना चाहते हैं

pages: ["./views/*"]

या प्रोजेक्ट जो सिर्फ पथ को अनुकूलित करना चाहते हैं

pages: ["./src/custom/path/to/pages/*"]

मेरा मानना ​​​​है कि यह एक उचित विशेषता है और यह एक कट्टरपंथी पैटर्न की तरह महसूस नहीं करता है ( यार्न कार्यक्षेत्र workspaces का पता लगाने के लिए समान पैटर्न का उपयोग करते हैं, एक पैटर्न Next.js स्वयं लागू होता है )।

@malimccalla आह, हाँ, आपके दुःख को पूरी तरह से समझें, मैं भी पूरी तरह से लचीला समाधान चाहता हूं। संभवतः एक प्रयास में योगदान देने लायक भी कुछ है, लेकिन मैंने पढ़ा है कि वे एक समाधान की पेशकश करने में रुचि नहीं रखते हैं (कहीं, लेकिन मुझे उस पर उद्धृत न करें) इसलिए मुझे डर है कि इस तरह की सुविधा में इस तरह का निवेश करना एक खोया हुआ कारण हो सकता है। जब तक वे निश्चित रूप से इस बात की पुष्टि नहीं करते हैं कि वे इस तरह के योगदान में रुचि लेंगे, तब फिर से, उपक्रम पर विचार करने के लिए एक परियोजना हो सकती है ‍♂️

@malimccalla क्या आप अपनी वांछित परियोजना संरचना के साथ अच्छी तरह से खेलने में सक्षम थे, या क्या आपने अपनी pages निर्देशिका को समतल कर दिया और पृष्ठ उप-घटकों को कहीं और संग्रहीत किया?

@joncursi मैं pages निर्देशिका का नाम बदलकर views और फिर एक नई pages निर्देशिका बनाकर काम करने में कामयाब रहा, जिसका एकमात्र उद्देश्य शीर्ष स्तर के पृष्ठ घटकों का निर्यात करना है।

उदाहरण के लिए pages/profile.tsx अब इस तरह दिखता है:

export { default } from "../views/profile"  

यह किसी भी तरह से आदर्श नहीं है, लेकिन मुझे अपनी वांछित परियोजना संरचना रखने की अनुमति देता है

@folofse i18n localePath काम करता है बदल रहा है जब यह निर्देशिका स्कैनिंग के लिए आता है। लेकिन भाषा फ़ाइलों को हल करते समय यह फिर से src हटा रहा है। क्या करें?

मैंने निम्न प्रकार से लॉग प्रदान करने के लिए डीबग सक्षम किया (i18next)

...
  localePath: 'src/static/locales',
  localeStructure: '{{lng}}/{{ns}}',
  localeSubpaths: 'foreign',
  backend:
   { loadPath:
      'V:/dev/some-project/static/locales/{{lng}}/{{ns}}.json',
     addPath:
      'V:/dev/some-project/static/locales/{{lng}}/{{ns}}.missing.json' },
  allLanguages: [ 'de', 'de' ],

लोडपाथ *\static\locales पर सेट है लेकिन यह *\src\static\locales होना चाहिए।

प्रश्न:

हमारे पास /projectRoot/next-web/server.js में एक कस्टम सर्वर फ़ाइल है

यह /projectRoop/next-renderer-universal/client तरह माउंट करता है:

// in /projectRoot/next-web/server.js
const nextApp = next({
  dev: NODE_ENV !== 'production',
  dir: APP_DIR,
  quiet: false,
});

हम वास्तव में इसे कैसे बनाते और भेजते हैं :)?

@armenr मेरा यह छोटा ऐप मदद कर सकता है। यह एक कस्टम प्रवेश बिंदु ( src/server.ts ) का उपयोग करता है और यहां बताया गया है कि यह कैसे कॉल करता है next() :
https://gitlab.com/kachkaev/website-frontend/blob/e1c7106cf63811f6341c4bd47dd2354eb2546914/src/server.ts#L11 -18

सभी स्रोत फ़ाइलों को PROJECT_ROOT/src (या अन्य उपनिर्देशिका) के अंतर्गत रखना Next.js में काफी चुनौतीपूर्ण है। नेक्स्ट 9 में जोड़े गए स्वचालित TS एकीकरण के कारण, चीजें और भी गड़बड़ हो जाती हैं काश https://github.com/zeit/next.js/issues/4315 को फिर से खोल दिया जाता।

:) मैंने एक मोनोरेपो स्थापित किया है, इसलिए मैं जो प्रश्न पूछ रहा था वह अन्य जटिलताओं से जटिल था

हमने तब से यह पता लगा लिया है कि वास्तव में क्या करना है, लेकिन मैं नमूना कोड की सराहना करता हूं। अभी भी उपयोगी! आपको धन्यवाद :)

@armenr मोनोरेपो के संबंध में आपका क्या समाधान है? मैंने अपनी परियोजना को लर्न के साथ स्थापित किया और अभी भी इसके साथ विवश हूं।

@ अनूप गुप्ता

Lerna, monorepo, यार्न कार्यक्षेत्र, और अलग packages.

मैंने सभी फ्रंट-एंड कोड को एक फ़ोल्डर में रखा है जिसे मैं कॉल करता हूं renderer-universal । फिर मेरे पास next-web नामक एक पैकेज है जहां मैं अपना कस्टम अगला सर्वर रखता हूं। मेरे पास एक और पैकेज भी है जहां मैं nextron रखता हूं (अगला + इलेक्ट्रॉन ... उत्कृष्ट प्रोजेक्ट, उन्हें गिटहब पर देखें)।

नेक्स्टरॉन और नेक्स्ट-वेब के लिए सर्वर.जेएस फाइल में, मैं इसका उपयोग करता हूं:

const nextApp = next({
  dev: NODE_ENV !== 'production',
  dir: APP_DIR,
  quiet: false,
});

और मैं उन सर्वर फ़ाइलों के लिए एनएनवी चर के माध्यम से रेंडरर-सार्वभौमिक पैकेज की निर्देशिका स्थान में पास करता हूं।

मेरे पास मोनोरेपो में अन्य लर्न पैकेजों में रहने वाले माइक्रोसर्विसेज का एक समूह भी है।

कोई कस्टम वेबपैक/बेबेल कॉन्फ़िगरेशन या सिम्लिंक रिज़ॉल्यूशन की आवश्यकता नहीं है।

आम तौर पर, मैं इस परियोजना संरचना को पसंद करता हूं:

  - api
  - pages
  - utils

शीर्ष स्तर src फ़ोल्डर सामान्य है और कई प्रोजेक्ट इसका उपयोग करते हैं। क्यों नहीं ?

@ revskill10 हाँ , मैंने भी उस संरचना को प्राथमिकता दी।

हम अपने ऐप और सेवाओं + नेक्स्टजेएस को डेस्कटॉप/क्लाउड हाइब्रिड के साथ-साथ वेब बिल्ड दोनों में वितरित कर रहे हैं।

पैकेज प्रबंधन - नोड_मॉड्यूल दोहराव, कस्टम सर्वरजेएस फाइलों की आवश्यकता w / नेक्स्ट, और विभिन्न माइक्रोसर्विसेज के बीच साझा मॉड्यूल और लिबास ने सब कुछ अलग करना या पारंपरिक / सरल निर्देशिका संरचना का पालन करना कठिन बना दिया।

अपनी टीम के लिए आसानी से प्रबंधनीय सेटअप प्रदान करने के लिए, मुझे एक पैटर्न के साथ आना पड़ा, जो हमें डेस्कटॉप और वेब संस्करणों पर एक साथ काम करने देता है, और सभी माइक्रोसर्विसेज को अलग करने और उनके बीच सभी साझा किए गए libs और मॉड्यूल को डिडुप्लिकेट करने के लिए। ऐसा करने का एकमात्र वास्तविक "सही" तरीका मेरे द्वारा वर्णित सेटअप के माध्यम से था।

शुरू होने वाली औसत परियोजना के लिए, यह अधिक है। हमारे मामले में, हमें अपनी प्रारंभिक आवश्यकताओं की स्पष्ट समझ थी और हमें क्या बनाने की आवश्यकता थी, इसलिए मैं सिर्फ प्रश्न का उत्तर दे रहा था।

इसके लायक क्या है, हम कस्टम सर्वर.जेएस फ़ाइल से छुटकारा पाने के बारे में सोच रहे हैं और इसके बजाय /api लेआउट पर जा रहे हैं जिसे नेक्स्ट 9 में लागू किया गया है। अभी तक यह स्पष्ट नहीं है कि क्या यह अभी भी हमारे लिए वेब + नेक्सट्रॉन को एक साथ सरल तरीके से विकसित करना/बनाना आसान बना देगा।

@armenr क्या मेरे पास आपका भंडार स्थान हो सकता है? यह एक अच्छा समाधान लगता है।

distDir: '../dist', पद्धति अब नेक्स्ट 9 में टाइपस्क्रिप्ट और ग्राहक सर्वर के साथ काम नहीं करती है। समस्या यह है कि यह src dir में tsconfig.json बनाता है।

इसे हल करने की कोशिश में कुछ घंटे बिताए लेकिन सब कुछ जड़ में ले जाना पड़ा ... ऐसी गड़बड़ी

इसे हल करने की कोशिश में कुछ घंटे बिताए लेकिन सब कुछ जड़ में ले जाना पड़ा ... ऐसी गड़बड़ी

यदि आप पथ प्रस्तावों के साथ खिलवाड़ करने की कोशिश करते हैं, या अपने tsconfig.json में एंट्रीपॉइंट फ़ाइल को संशोधित करने का प्रयास करते हैं तो कुछ भी नहीं बदलता है

यह 2017 से अनुरोध किया गया है। हम इस सुविधा को भेजने में कैसे मदद कर सकते हैं?

@timneutkens कृपया इस मुद्दे को फिर से खोलें और पुनर्विचार करें

@janhesters https://github.com/zeit/next.js/issues/8415

यहां जवाब दिया, इस मुद्दे को लॉक करने जा रहा हूं।
https://github.com/zeit/next.js/issues/4315#issuecomment -522263598