Next.js: كيف أغير المكان الذي يبحث فيه Next عن الصفحات؟

تم إنشاؤها على ١٧ يوليو ٢٠١٨  ·  32تعليقات  ·  مصدر: vercel/next.js

يصبح كل ملف .js في الصفحات مسارًا ، هل يمكنني تغييره؟

أريد استخدام src / الصفحات

التعليق الأكثر فائدة

لا توجد فكرة عما تقوله هذه التعليقات الأخرى ولكن يمكنك تكوين الدليل التالي الذي يبحث عنه next.js للصفحات من سطر الأوامر:

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

ال 32 كومينتر

وفقًا للمستندات ، يحدد dir موقع المشروع ، لذا فإن الطريقة الصحيحة هي تعيينه على ./src :

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

ولكنه يُستخدم فقط في واجهة برمجة تطبيقات برمجية (مع خادم مخصص) وسيؤثر أيضًا على الموقع المفترض للملفات الأخرى (مثل الدليل next.config.js و static ، على ما أعتقد).

لا توجد فكرة عما تقوله هذه التعليقات الأخرى ولكن يمكنك تكوين الدليل التالي الذي يبحث عنه next.js للصفحات من سطر الأوامر:

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

لا يمكنك تغيير الدليل ، ونحن لا نخطط لتغيير هذا ، يرجى البحث عن مشكلة في أداة تعقب المشكلات (بما في ذلك المشكلات المغلقة) في المستقبل قبل نشر المشكلة ، حيث تم طرح هذا السؤال عدة مرات .

timneutkens لا يشبه المشرف على moment.js ، الذي رفض تحسين التطبيقات من جانب العميل ، ما أدى إلى تكوينات مخصصة في الكثير من المشاريع ، حتى في CRA.
يحتوي الكثير من النماذج المعيارية للمشروع على مجلد src ، حيث توجد الملفات.

نظرًا لأن هذه هي النتيجة الأولى حاليًا على Google عند البحث عن هذا ، فربما يكون من المفيد شرح السبب وراء هذا القرار timneutkens ؟

كما ذكر brainkim jus ، قم بإلحاق حزمة json scripts مع ./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 . يبدو أن معظم العناصر تعمل ، باستثناء Hot Reload. حزين :(

msegers اقتراح عمل بالنسبة لي.

إذا كنت تستخدم next-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 ، تأكد من الإشارة إلى المجلد (next ./client) بدلاً من مجرد (next) لـ "npm run dev" / افعل الشيء نفسه لبناء النص البرمجي
  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 يتم التعامل معها كنقاط إدخال webpack ، لذا يتم أخذها في الاعتبار بالنسبة لتكوين Commonchunks. نظرًا لأنه قائم حاليًا ، يدعم Next فقط مكونات الصفحة ذات المستوى الأعلى داخل pages . إذا كان بإمكاني تكوين مكان البحث عن الصفحات ، فيمكنني الاحتفاظ بهذا الهيكل (المعقول؟). أتخيل شيئًا كهذا في ملف التكوين

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' ],

تم ضبط loadPath على *\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. بسبب تكامل TS التلقائي الإضافي في Next 9 ، تصبح الأمور أكثر فوضوية قليلاً 😔 أتمنى إعادة فتح https://github.com/zeit/next.js/issues/4315 .

:) لقد قمت بإعداد monorepo ، لذا فإن السؤال الذي كنت أطرحه تضاعف بسبب التعقيدات الأخرى

لقد اكتشفنا منذ ذلك الحين ما يجب فعله بالضبط ، لكنني أقدر نموذج الشفرة. لا تزال مفيدة! شكرا لك :)

armenr ما هو الحل الخاص بك فيما يتعلق monorepo؟ أعددت مشروعي مع lerna وما زلت مقيدًا به.

@ anoop-gupt

Lerna و monorepo ومساحات عمل الغزل ومنفصلة packages.

لقد وضعت كل كود الواجهة الأمامية في مجلد أسميه renderer-universal . لدي بعد ذلك حزمة تسمى next-web حيث أحتفظ بخادمي المخصص التالي. لدي أيضًا حزمة أخرى حيث أحتفظ بـ nextron (التالي + الإلكترون ... مشروع ممتاز ، ابحث عنها على GitHub).

في ملف server.js لـ nextron و next-web ، أستخدم:

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

وأقوم بتمرير موقع الدليل الخاص بالحزمة العالمية العارض عبر متغيرات ENV إلى ملفات الخادم هذه.

لدي أيضًا مجموعة من الخدمات المصغرة التي كتبناها مقيمة في حزم lerna الأخرى في monorepo أيضًا.

لا يلزم تكوينات webpack / babel المخصصة أو دقة الارتباط الرمزي.

عادة ، أفضل هيكل المشروع هذا:

  - api
  - pages
  - utils

المستوى الأعلى src مجلد عادي والعديد من المشاريع تستخدمه. ولم لا ؟

@ revskill10 يش ، حتى أنني فضلت هذا الهيكل.

نحن نقوم بتوزيع تطبيقاتنا وخدماتنا + NextJS في كل من الأجهزة الهجينة لسطح المكتب / السحابة بالإضافة إلى تصميمات الويب.

إدارة الحزم - نسخ node_modules ، والحاجة إلى ملفات serverJS المخصصة مع التالي ، والوحدات النمطية المشتركة و libs بين الخدمات المصغرة المختلفة جعلت من الصعب تقسيم كل شيء أو اتباع بنية الدليل التقليدية / الأبسط.

لتوفير إعداد يمكن إدارته بسهولة لفريقي ، كان عليّ أن أتوصل إلى نمط يتيح لنا العمل على إصدارات سطح المكتب والويب في وقت واحد ، وفصل جميع الخدمات المصغرة وإزالة النسخ المكررة لجميع الوحدات والوحدات المشتركة فيما بينها. الطريقة الحقيقية الوحيدة لفعل ذلك كانت عبر الإعداد الذي وصفته.

بالنسبة إلى متوسط ​​بدء المشروع ، يعد هذا مبالغة. في حالتنا ، كان لدينا فهم واضح بشكل معقول لمتطلباتنا الأولية وما نحتاج إلى بنائه ، لذلك كنت فقط أجيب على السؤال.

لما يستحق الأمر ، نفكر في التخلص من ملف server.js المخصص وبدلاً من ذلك الانتقال إلى تخطيط api / الذي تم تنفيذه في Next9. من غير الواضح ، حتى الآن ، ما إذا كان هذا سيجعل من السهل علينا تطوير / بناء الويب + nextron في وقت واحد بطريقة بسيطة.

armenr هل يمكنني الحصول على موقع المستودع الخاص بك ، من فضلك؟ يبدو حلا جيدا.

لم تعد الطريقة distDir: '../dist', تعمل في Next 9 مع الكتابة المطبوعة وخادم العملاء. المشكلة هي أنه ينشئ tsconfig.json في src dir.

قضيت بضع ساعات في محاولة لحل هذا ولكن كان لا بد من نقل كل شيء إلى مسار الجذر ... مثل هذه الفوضى 😞

image

قضيت بضع ساعات في محاولة لحل هذا ولكن كان لا بد من نقل كل شيء إلى مسار الجذر ... مثل هذه الفوضى 😞

image

لا شيء يتغير إذا حاولت العبث بقرارات المسار ، أو تعديل ملف نقطة الإدخال في tsconfig.json؟

تم طلب ذلك منذ عام 2017. كيف يمكننا المساعدة في شحن هذه الميزة؟

timneutkens يرجى إعادة فتح هذه المشكلة وإعادة النظر

أجاب هنا ، سوف أقفل هذه المشكلة.
https://github.com/zeit/next.js/issues/4315#issuecomment -522263598

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

jesselee34 picture jesselee34  ·  3تعليقات

pie6k picture pie6k  ·  3تعليقات

sospedra picture sospedra  ·  3تعليقات

olifante picture olifante  ·  3تعليقات

rauchg picture rauchg  ·  3تعليقات