Next.js: Next가 페이지를 찾는 위치를 변경하는 방법은 무엇입니까?

AFAIK, 당신은 할 수 없습니다. next.config.js 를 통해 파일 시스템 라우팅을 비활성화 할 수 있습니다.

문서에 따르면 dir 는 프로젝트의 위치를 ​​지정하므로 올바른 방법은 ./src 로 설정하는 것입니다.

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

그러나 이것은 프로그래밍 방식의 API(사용자 정의 서버 포함)에서만 사용되며 다른 파일의 추정 위치에도 영향을 미칩니다( 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이 언급했듯이 패키지 json 스크립트에

폴더 앞에 ../가 붙습니다.

// 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를 설정했는지 확인하십시오. localePath: 'src/static/locales/',

이와 같이 :

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

이에 대한 욕구가 꽤 있는 것 같습니다. 최상위 페이지를 찾는 위치를 구성할 수 있기를 바랍니다.

@malimccalla 여기에서 확인할 수 있습니다: https://github.com/slaterbbx/fullstackinator

경고

내가 아는 한 폴더 이름을 변경할 수 없으며 "페이지"를 유지해야 합니다.

어떻게

클라이언트 폴더를 살펴보면 이를 수행하는 데 필요한 몇 가지 핵심 사항이 있음을 알 수 있습니다. 내가 보여주는 예는 사용자 정의 서버 시나리오 + typescript에 대한 것이지만 기본적으로 핵심은 동일합니다.

1. package.json의 스크립트에서 "npm run dev"에 대해 ( next ) 대신 폴더( next ./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 내의 모든 파일이 webpack 진입점으로 처리되어 차례로 commonchunks 구성에 대해 고려된다는 점입니다. 현재 그대로 Next는 pages 내의 최상위 페이지 구성 요소만 지원합니다. 페이지를 찾는 위치를 구성할 수 있다면 이 (합리적인?) 구조를 유지할 수 있습니다. 나는 구성에서 이와 같은 것을 상상한다.

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

여러 위치에 페이지를 저장하는 프로젝트에도 사용할 수 있습니다.

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

또는 다른 이름의 폴더에 최상위 구성 요소를 저장하려는 프로젝트

pages: ["./views/*"]

또는 경로를 사용자 정의하려는 프로젝트

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

이것은 공정한 기능이며 급진적인 패턴처럼 느껴지지 않는다고 생각합니다( 원사 작업 공간 은 동일한 패턴을 사용하여 Next.js 자체가 구현 하는 패턴 workspaces 을 찾습니다).

@malimccalla 아, 네, 당신의 슬픔을 완전히 이해합니다. 또한 완전히 유연한 솔루션을 원합니다. 노력에 기여할 가치가 있는 무언가일 수도 있지만 솔루션 제공에 관심이 없다는 것을 읽었습니다. 물론 그들이 그러한 기부에 관심이 있다고 확인하지 않는 한, 다시 착수를 고려하는 프로젝트가 될 수 있습니다 🙋‍♂️

@malimccalla 다음으로 원하는 프로젝트 구조로 멋지게 플레이할 수 있었습니까? 아니면 pages 디렉토리를 평평하게 만들고 페이지 하위 구성 요소를 다른 곳에 저장하게 되었습니까?

@joncursi pages 디렉토리의 이름을 views 로 변경한 다음 최상위 페이지 구성 요소를 내보내는 유일한 목적인 새 pages 디렉토리를 생성하여 해결했습니다.

예를 들어 pages/profile.tsx 이제 다음과 같습니다.

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

이상적이지는 않지만 원하는 프로젝트 구조를 유지할 수 있습니다.

@folofse i18n

디버그를 활성화하여 다음과 같이 로그를 제공했습니다(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에서 상당히 어렵습니다. Next 9에 추가된 자동 TS 통합으로 인해 상황이 좀 더 복잡해졌습니다. 😔 https://github.com/zeit/next.js/issues/4315 가 다시 열렸으면 합니다.

:) 나는 monorepo를 설정했기 때문에 내가 묻는 질문은 다른 복잡성으로 인해 복잡해졌습니다.

그 이후로 우리는 정확히 무엇을 해야 할지 알아냈지만 샘플 코드에 감사드립니다. 여전히 유용합니다! 고맙습니다 :)

@armenr monorepo 와 관련하여 해결 방법은 무엇입니까? lerna로 프로젝트를 설정했지만 여전히 제약이 있습니다.

@anoop-gut

Lerna, monorepo, 원사 작업 공간 및 별도의 packages.

모든 프론트엔드 코드를 renderer-universal 폴더에 넣었습니다. 그런 다음 next-web 라는 패키지가 있습니다. 여기서 사용자 지정 다음 서버를 보관할 수 있습니다. 나는 또한 nextron 보관하는 또 다른 패키지가 있습니다(next + electron...excellent project, GitHub에서 찾아보기).

nextron 및 next-web용 server.js 파일에서 다음을 사용합니다.

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

그리고 ENV 변수를 통해 렌더러-유니버설 패키지의 디렉토리 위치를 해당 서버 파일에 전달합니다.

또한 monorepo의 다른 lerna 패키지에 있는 우리가 작성한 많은 마이크로서비스도 있습니다.

사용자 정의 webpack/babel 구성 또는 symlink 해결이 필요하지 않습니다.

일반적으로 다음 프로젝트 구조를 선호합니다.

  - api
  - pages
  - utils

최상위 src 폴더는 정상이며 많은 프로젝트에서 사용합니다. 왜 안 돼 ?

@revskill10 네 , 저도 그 구조를 선호했습니다.

우리는 앱 및 서비스 + NextJS를 데스크톱/클라우드 하이브리드와 웹 빌드 모두에 배포하고 있습니다.

패키지 관리 - node_modules 중복, 사용자 정의 serverJS 파일 w/ Next, 공유 모듈 및 라이브러리는 서로 다른 마이크로서비스 사이에서 모든 것을 분리하거나 기존의/간단한 디렉토리 구조를 따르기가 어렵게 만들었습니다.

팀을 위해 쉽게 관리할 수 있는 설정을 제공하기 위해 데스크탑과 웹 버전에서 동시에 작업하고 모든 마이크로서비스를 분리하고 그들 사이의 모든 공유 라이브러리와 모듈을 중복 제거할 수 있는 패턴을 고안해야 했습니다. 그렇게 하는 유일한 "올바른" 방법은 내가 설명한 설정을 통한 것입니다.

시작하는 평균적인 프로젝트의 경우 이것은 과잉입니다. 우리의 경우 초기 요구 사항과 구축해야 할 사항에 대해 합리적으로 명확하게 이해하고 있었기 때문에 질문에 대답했을 뿐입니다.

그만한 가치가 있기 때문에 사용자 정의 server.js 파일을 제거하고 대신 Next9에 구현된 /api 레이아웃으로 이동할 생각입니다. 이것이 우리가 간단한 방법으로 웹 + 넥스트론을 동시에 개발/구축하는 것을 여전히 쉽게 만들 수 있는지 여부는 아직 명확하지 않습니다.

@armenr 저장소 위치를

distDir: '../dist', 메서드는 Typescript 및 고객 서버가 있는 Next 9에서 더 이상 작동하지 않습니다. 문제는 src 디렉토리에 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