Next.js: Bagaimana cara mengubah tempat Next mencari halaman?

AFAIK, Anda tidak bisa. Anda dapat menonaktifkan perutean sistem file melalui next.config.js .

Menurut dokumen, dir menentukan lokasi proyek, jadi cara yang benar adalah dengan menyetelnya ke ./src :

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

Tapi itu hanya digunakan dalam API terprogram (dengan server khusus) dan akan memengaruhi lokasi yang diduga dari file lain juga (seperti direktori next.config.js dan static , saya percaya).

Tidak tahu apa yang dikatakan komentar lain ini, tetapi Anda dapat mengonfigurasi direktori mana yang berikutnya.js mencari halaman dari baris perintah:

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

Anda tidak dapat mengubah direktori, dan kami tidak berencana untuk mengubah ini, harap cari masalah pada pelacak masalah (termasuk masalah yang ditutup) di masa mendatang sebelum memposting masalah, karena pertanyaan ini telah muncul beberapa kali .

@timneutkens tidak seperti pengelola moment.js, yang menolak pengoptimalan untuk aplikasi sisi klien, yang mengarah ke konfigurasi khusus di banyak proyek, bahkan di CRA.
Banyak boilerplate proyek memiliki folder src , tempat file diletakkan.

Karena ini adalah hasil pertama di google saat mencari ini, mungkin akan bermanfaat untuk menjelaskan alasan di balik keputusan itu @timneutkens ?

Seperti yang dinyatakan oleh @brainkim jus tambahkan skrip json paket Anda dengan ./src. Apa yang mungkin ingin Anda lakukan adalah mengonfigurasi folder dist berikutnya (saya ingin dist di root).

Perhatikan bahwa kami menambahkan folder dengan ../.

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

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

@msegers Saya mencoba mengikuti pengaturan ini dan mendapatkan banyak kesalahan seperti ini:

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

pada permintaan HTTP (tidak ada kesalahan pada fase impor). Adakah ide bagaimana cara memperbaikinya?

Persyaratan memiliki pages di root benar-benar membuat saya gila – untuk sesuatu yang sangat besar, hal-hal mulai menumpuk di root tak terkendali: gaya, komponen, penyimpanan klien, file konfigurasi, dll. Berharap ada solusi.

Tambahan: mencoba menghubungkan pages ke client/pages . Sebagian besar tampaknya berfungsi, kecuali Hot Reload. Sedih :(

Saran @msegers berhasil untuk saya.

Jika Anda menggunakan next-i18next pastikan Anda menyetel localePath yang benar di konfigurasi NextI18: localePath: 'src/static/locales/',

Seperti ini :

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

Tampaknya ada selera yang cukup untuk ini - akan senang dapat mengonfigurasi di mana halaman tingkat atas saya dicari.

@malimccalla Bisa, lihat di sini: https://github.com/slaterbbx/fullstackinator

Peringatan

Anda tidak dapat mengubah nama folder sejauh yang saya tahu, harus tetap "halaman"

Bagaimana

Lihat di folder klien, perhatikan ada beberapa hal penting yang diperlukan untuk mewujudkannya. Contoh yang saya tunjukkan adalah untuk skenario server kustom + TypeScript, tetapi pada dasarnya hal yang sama, hal-hal intinya.

1. Dalam skrip di package.json, pastikan untuk menunjuk ke folder ( next ./client ) alih-alih hanya ( next ) untuk "npm run dev" / lakukan hal yang sama untuk skrip build
2. Di folder itu ( ./client ) Anda memerlukan file next.config.js. Kemudian cukup miliki di dalamnya yang berikut ini:

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

Jika Anda memiliki pertanyaan, jangan ragu untuk mengirimi saya email atau di sini juga baik-baik saja.

PEMBARUAN: Saya baru menyadari bahwa @brainkim di atas memberikan penjelasan yang sama persis.. Maaf, saya akan meninggalkan ini karena contoh tertaut menunjukkan kasus penggunaan yang jauh lebih kompleks bagi siapa pun yang mencari contoh seperti itu.

Terima kasih untuk ini @slaterbbx

Masalah saya adalah saya mencoba untuk menemukan kode yang terkait secara konseptual. Saya memiliki struktur berikut:

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

Masalah dengan pendekatan ini (seperti yang ditunjukkan oleh @timneutkens) adalah bahwa semua file dalam pages diperlakukan sebagai titik masuk webpack sehingga pada gilirannya dipertimbangkan untuk konfigurasi commonchunks. Seperti saat ini, Next hanya mendukung komponen halaman tingkat atas dalam pages . Jika saya dapat mengonfigurasi di mana halaman dicari, saya dapat mempertahankan struktur (masuk akal?) ini. Saya membayangkan sesuatu seperti ini di konfigurasi

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

Itu juga dapat digunakan untuk proyek yang menyimpan halaman di banyak lokasi

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

atau proyek yang ingin menyimpan komponen tingkat atas mereka dalam folder bernama sesuatu yang berbeda

pages: ["./views/*"]

atau proyek yang hanya ingin menyesuaikan jalur

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

Saya percaya ini adalah fitur yang adil untuk memiliki dan tidak merasa seperti pola radikal ( ruang kerja benang menggunakan pola yang sama untuk menemukan workspaces , pola Next.js sendiri alat ).

@malimccalla ah, ya, sangat memahami kesedihan Anda, saya juga menginginkan solusi yang sepenuhnya fleksibel. Mungkin sesuatu yang layak untuk dikontribusikan juga, tetapi saya telah membaca bahwa mereka tidak tertarik untuk menawarkan solusi (di suatu tempat, tetapi jangan mengutip saya tentang itu) jadi saya khawatir menginvestasikan waktu seperti itu ke dalam fitur seperti itu bisa menjadi penyebab yang hilang. Kecuali tentu saja mereka mengonfirmasi bahwa mereka akan tertarik dengan kontribusi seperti itu, sekali lagi, ini mungkin merupakan proyek yang perlu dipertimbangkan untuk dilakukan ️

@malimccalla apakah Anda bisa bermain dengan baik dengan struktur proyek yang Anda inginkan, atau apakah Anda akhirnya meratakan direktori pages dan menyimpan sub-komponen halaman di tempat lain?

@joncursi Saya berhasil mengatasinya dengan mengganti nama direktori pages menjadi views dan kemudian membuat direktori pages satu-satunya tujuan adalah mengekspor komponen halaman tingkat atas.

misalnya pages/profile.tsx sekarang terlihat seperti ini:

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

itu tidak berarti ideal tetapi memungkinkan saya untuk mempertahankan struktur proyek yang saya inginkan

@folofse mengubah i18n localePath berfungsi saat memindai direktori. Tetapi ketika menyelesaikan file bahasa itu menghapus src lagi. Apa yang harus dilakukan?

Saya mengaktifkan debug untuk menyediakan log sebagai berikut (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 disetel ke *\static\locales tetapi seharusnya *\src\static\locales .

Pertanyaan:

Kami memiliki file server khusus di /projectRoot/next-web/server.js

Itu me-mount /projectRoop/next-renderer-universal/client seperti:

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

Bagaimana sebenarnya kita membangun dan mengirimkan ini :)?

@armenr Aplikasi kecil saya ini mungkin bisa membantu. Ini menggunakan titik masuk khusus ( src/server.ts ) dan inilah cara memanggil next() :
https://gitlab.com/kachkaev/website-frontend/blob/e1c7106cf63811f6341c4bd47dd2354eb2546914/src/server.ts#L11 -18

Menyimpan semua file sumber di bawah PROJECT_ROOT/src (atau subdirektori lain) cukup menantang di Next.js. Karena integrasi TS otomatis yang ditambahkan di Next 9, segalanya menjadi sedikit lebih berantakan Saya berharap https://github.com/zeit/next.js/issues/4315 dibuka kembali.

:) Saya membuat monorepo, jadi pertanyaan yang saya ajukan diperparah oleh kerumitan lain

Sejak itu kami telah mengetahui apa yang harus dilakukan, tetapi saya menghargai kode sampelnya. Masih berguna! Terima kasih :)

@armenr Apa solusi Anda terkait dengan monorepo? Saya mengatur proyek saya dengan lerna dan masih terkendala dengan itu.

@anoop-gupt

Lerna, monorepo, ruang kerja benang, dan memisahkan packages.

Saya memasukkan semua kode front-end ke dalam folder yang saya sebut renderer-universal . Saya kemudian memiliki paket bernama next-web tempat saya menyimpan server kustom saya berikutnya. Saya juga memiliki paket lain di mana saya menyimpan nextron (berikutnya + elektron...proyek luar biasa, cari di GitHub).

Di file server.js untuk nextron dan next-web, saya menggunakan:

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

Dan saya meneruskan lokasi direktori paket renderer-universal melalui variabel ENV ke file server tersebut.

Saya juga memiliki banyak layanan mikro yang kami tulis yang berada di paket lerna lain di monorepo juga.

Tidak diperlukan konfigurasi webpack/babel khusus atau resolusi symlink.

Biasanya, saya lebih suka struktur proyek ini:

  - api
  - pages
  - utils

Folder src adalah normal dan banyak proyek menggunakannya. Kenapa tidak ?

@ revskill10 Ya , bahkan saya lebih suka struktur itu.

Kami mendistribusikan aplikasi & layanan kami + NextJS ke desktop/cloud hybrids serta web build.

Manajemen paket - duplikasi node_modules, kebutuhan untuk file serverJS khusus dengan Berikutnya, dan modul dan lib bersama antara layanan mikro yang berbeda membuat sulit untuk memisahkan semuanya atau mengikuti struktur direktori konvensional/lebih sederhana.

Untuk menyediakan pengaturan yang mudah dikelola untuk tim saya, saya harus membuat pola yang memungkinkan kami bekerja pada versi desktop dan web secara bersamaan, dan untuk memisahkan semua layanan mikro dan menghapus duplikat semua lib & modul bersama di antara mereka. Satu-satunya cara yang "benar" untuk melakukannya adalah melalui pengaturan yang telah saya jelaskan.

Untuk proyek rata-rata memulai, ini berlebihan. Dalam kasus kami, kami memiliki pemahaman yang cukup jelas tentang persyaratan awal kami dan apa yang perlu kami bangun, jadi saya hanya menjawab pertanyaan itu.

Untuk apa nilainya, kami berpikir untuk menyingkirkan file server.js khusus dan alih-alih pindah ke tata letak /api yang telah diterapkan ke Next9. Belum jelas apakah ini masih akan memudahkan kita untuk mengembangkan/membangun web + nextron secara bersamaan dengan cara yang sederhana.

@armenr Bisakah saya meminta lokasi repositori Anda? Tampaknya solusi yang baik.

Metode distDir: '../dist', tidak lagi berfungsi di Next 9 dengan TypeScript dan server pelanggan. Masalahnya adalah ia menciptakan tsconfig.json di dir src .

Menghabiskan beberapa jam mencoba menyelesaikan ini tetapi harus memindahkan semuanya ke direktori root ... berantakan

Menghabiskan beberapa jam mencoba menyelesaikan ini tetapi harus memindahkan semuanya ke direktori root ... berantakan

Tidak ada yang berubah jika Anda mencoba mengacaukan resolusi jalur, atau memodifikasi file titik masuk di tsconfig.json Anda?

Ini telah diminta sejak 2017. Bagaimana kami dapat membantu mengirimkan fitur ini?

@timneutkens tolong buka kembali masalah ini dan pertimbangkan kembali

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

Membalas di sini, akan mengunci masalah ini.
https://github.com/zeit/next.js/issues/4315#issuecomment -522263598