cc @jxnblk

cc @alexindigo @DullReferenceException

귀하의 의견을 듣고 싶습니다 👍

코드를 가지고 놀다가 assetPrefix 를 여러 부분으로 나누는 것이 훨씬 더 쉽다는 것을 깨달았습니다.

module.exports = {
  host: NOW_URL ? `https://${alias}` : 'http://localhost:3000',
  basePath: '/account',
}

우리는 여전히 assetPrefix 변수를 내부적으로 유지할 수 있지만 사용자는 필요한 것을보다 정확하게 정의해야합니다.

자산 부분의 경우이 두 변수를 함께 제공하는 것이 좋습니다.
라우팅 등의 경우 별도로 필요합니다.
또는 구성 파일에 함께 제공 한 다음 next.js 코드베이스에서 분할 할 수도 있습니다. 이 경우 assetPrefix는 올바른 이름이 아닙니다.

부작용으로 이것은 또한 코드 변경을 줄입니다.
이 두 PR을 비교하면 매우 분명합니다.
https://github.com/panter/next.js/pull/2 (분할)
https://github.com/panter/next.js/pull/1 (둘 다 통과)

제 생각에는, 그들은 분리해야한다, 이것에 대한 이유는 파괴 아니에요 더 유연한 유지하는 것입니다 assetPrefix 하고있는 basePath 별도로합니다.

assetPrefix 이 올바른 이름입니까? 두 변수 모두 실제로 접두사 맞습니까?

assetPrefix 는 자산 용입니다 ( 예 : 페이지 번들). basePath는 라우터 용입니다.

작동 방식은 다음과 같습니다.

• assetPrefix 가 정의 된 경우 assetPrefix 를 사용하여 번들을로드하고 라우터를 건드리지 마십시오 (현재 동작).
• assetPrefix 및 basePath 가 제공된 경우 assetPrefix 를 사용하여 번들을로드하고 basePath 를 라우터에 추가합니다.
• assetPrefix 가 정의되어 있지 않고 basePath 가있는 경우 basePath 를 사용하여 번들을로드하고 basePath 를 라우터에 추가합니다.
• assetPrefix 도 basePath 도 정의되지 않은 경우 다른 작업을 수행하지 않습니다 ( assetPrefix 가 제공되지 않은 경우 현재 동작).

cc @alexindigo @DullReferenceException @ 3rd-Eden

위의 제안에 대한 피드백을 제공 할 수 있습니까? https://github.com/zeit/next.js/issues/4998#issuecomment -414978297

@tomaswitek 현재 assetPrefix 에서 정확히 무엇이 작동하지 않았는지 확실하지 않습니다. 이것은 우리가 프로덕션에서 사용하는 자산 접두사 "assetPrefix":"https://static.trulia-cdn.com/javascript" 이며 예상대로 작동합니다.

그리고 일반적으로 동일한 도메인에서 여러 영역 (섬이라고 부름)을 사용하고 있으며 각 섬의 "basePathing"은 섬 간의 상호 운용성을 복잡하게 만들기 때문에 우리 마음에 들지 않았습니다. 좀 더 자세히 설명하겠습니다.

따라서 우리는 두 개의 섬 A 및 B 를 가지고 있으며, 주요 아이디어는 단일 웹 사이트 경험의 일부로 섬을 탐색하는 사용자를위한 투명성입니다. 그래서 섬들 사이에 링크가 있어야합니다. 그런 다음 배포 문제와 응용 프로그램 문제가 있습니다.

1. 배포 문제 대 응용 프로그램 문제 – 응용 프로그램은 어디에 배포 할 수 있는지 알지 못하며 들어오는 http 요청을 처리하는 방법 만 알고 있습니다. 응답 할 수있는 경로를 설정했습니다.
   어딘가에 배포되면 다른 도메인, 다른 포트가 될 수 있으며 이론적으로는 다른 basePath가 될 수 있으며 프록시 또는 기타 수단을 통해 앱에 대해 투명하게 만들어집니다.

2. 섬 사이의 교차 링크 – 섬의 정신을 별도의 배치 가능한 엔티티로 유지하기 위해 다른 섬 사이에 내부 구현 지식이 누출되어서는 안됩니다.
   따라서 섬이 서로의 페이지를 참조하는 가장 좋은 방법은 다른 섬이 사용할 수있는 경로를 내보내는 것입니다 (_ 그리고 nextjs 세계에서는 사용자 정의 <IslandALink> 종류의 구성 요소가 선호되는 것처럼 보입니다. 방법_).
   지금까지는 모든 것이 간단합니다. 모든 섬은 동일한 도메인을 공유하고 절대 경로 집합 ( /path1 , path2 등)이 있다고 가정합니다. 그런 식으로 두 번째 섬은 경로 목록을 가져 와서 안정적으로 유지합니다. 동시에 각 섬이 경로를 이전 버전과 호환되도록 유지하는 것은 매우 최소한의 요구 사항입니다 (어쨌든 웹에서는 좋은 것입니다) :)

배포 특정 basePath를 추가하면 전체 시스템의 복잡성이 자동으로 증가합니다. 각 아일랜드가 자체 배포 basePath를 알고 있어야합니까 (그리고 지시 할 수도 있음)? 그렇다면 현재 작동하는 방식과 어떻게 다른가요? 아니면 아일랜드 A가 배포 경로에 대해 무관해야합니까? 그렇다면 섬 A가 자신에 대해 아는 것만 알고 있기 때문에 섬 B가 배치 된 섬 A를 어떻게 찾을 수 있을까요? 아니면 배치 된 모든 섬에 대한 basePath를 다른 모든 섬에 제공해야합니까? 그리고 물건을 배포하는 현대적인 방법은 새로운 섬을 추가해야 할 때 모든 섬을 재배치하는 것을 의미합니다.

아니면 그 부분을 어떻게 상상 했습니까?

감사합니다.

^ 모닝 커피 전에 썼으니 좀 더 일관된 설명이 필요하면 알려주세요. :)

먼저 시간을내어 제 문제를 검토 해주셔서 감사합니다.

@timneutkens 예 assetPrefix 는 basePath 보다 우선 순위가 높습니다. 이것이 바로 처음에 논의한 내용입니다. 몇 개의 파일을 변경해야하는지 확인한 후 두 번째 방법이 더 깨끗할 것이라고 생각했습니다. 하지만 첫 번째 솔루션으로 롤백하겠습니다. 전혀 문제없이 완전히 분리하여 보관합시다. 나는 단지 큰 소리로 생각하고 있었다.

자세한 답변은 @alexindigo Thx입니다. 당신의 질문에 답해 보겠습니다 😏

현재 assetPrefix에서 정확히 무엇이 작동하지 않았는지 확실하지 않음

여기에 두 가지 문제가 있습니다.

1. 현재 프로젝트에서 여러 도메인이나 하위 도메인으로 작업 할 수 없습니다. (도메인 제한 및 와일드 카드 SSL 인증서 없음)
2. 단일 도메인에서 assetPrefix 를 현재 구현하려면 프록시 라우팅, 정적 파일 등을 더 많이 조정해야합니다. basePath 를 도입하여 이러한 조정을 줄일 수 있습니다. @timneutkens가 이미 언급했듯이 basePath 를 제공 할 필요가 없기 때문에 아무것도 제동하지 않으며 복잡성을 증가시키지 않습니다.

응용 프로그램은 어디에 배포 할 수 있는지 전혀 모릅니다.

물론 우리는 여기서 같은 목표를 가지고 있습니다! 현재 솔루션에서 assetPrefixes를 동적으로 정의하고 있습니다. 프록시에서 요청 헤더를 통해 제공됩니다.

그렇다면 현재 작동하는 방식과 어떻게 다른가요?

라우터는 contextPath를 인식하고 사용자 지정 코드의 양을 줄입니다.

각 섬이 자신의 배포 basePath를 알고 있어야합니까? 아니면 아일랜드 A가 배포 경로에 대해 무관해야합니까?

그럴 필요는 없습니다. 개발자는 여기서 자유를 가져야합니다. assetPrefix와 동일한 방식으로 basePath를 동적으로 제공 할 수 있어야합니다.

그렇다면 섬 A가 자신에 대해 아는 것만 알고 있기 때문에 섬 B가 배치 된 섬 A를 어떻게 찾을 수 있을까요? 아니면 배치 된 모든 섬에 대한 basePath를 다른 모든 섬에 제공해야합니까? 그리고 물건을 배포하는 현대적인 방법은 새로운 섬을 추가해야 할 때 모든 섬을 재배치하는 것을 의미합니다.

경로 내보내기에 basePath를 추가 할 수도 있습니다. 모르겠어요. basePath 변수가 모든 사용 사례에 중요하다는 말은 아닙니다. 귀하에게 가장 적합한 솔루션이 아닌 것 같습니다. 그러나 그것은 완전히 괜찮습니다. 문제는 여전히 assetPrefix 만 사용할 수 있으며 섬에 대한 변경 사항이 없다는 것입니다. 어쨌든 자신의 라우팅이있는 것 같습니다. 영역 간의 교차 링크는 프로젝트에서 중요하지 않으며 영역은 실제로 독립적이며 서로 격리되어 있습니다.

그리고 물건을 배포하는 현대적인 방법은 새로운 섬을 추가해야 할 때 모든 섬을 재배치하는 것을 의미합니다.

이유를 모르겠습니다. 일부 영역에는 basePath가 있고 일부는 그렇지 않다는 것을 상상할 수도 있습니다. 일부 앱은 다중 영역 설정 없이도 basePath 구성을 사용할 수 있습니다.

@alexindigo pls는 next.js에 의해 렌더링되는 두 개의 실제 섬 URL을 제공하여 실제로 볼 수 있습니까? 하나를 찾으려고했지만 도메인에서 _next 요청이있는 페이지를 찾을 수 없습니다. 😄
모든 섬의 구성이 동일합니까?
"assetPrefix":"https://static.trulia-cdn.com/javascript"

뿡 빵뀨

현재 프로젝트에서 여러 도메인이나 하위 도메인으로 작업 할 수 없습니다. (도메인 제한 및 와일드 카드 SSL 인증서 없음)

아, 그렇다면 고전적인 의미에서 CDN을 사용하지 않고 각 앱에서 직접 가져 오는 자산에 의존합니까? 내가 참조.

현재 단일 도메인에서 assetPrefix를 구현하려면 프록시 라우팅, 정적 파일 등에서 더 많은 조정이 필요합니다. basePath를 도입하여 이러한 조정을 줄일 수 있습니다. @timneutkens가 이미 언급했듯이 basePath를 제공 할 필요가 없기 때문에 아무것도 중단하지 않으며 복잡성을 증가시키지 않습니다.

Btw, 그것은 "아니요, 그 기능을 추가하지 마십시오"가 아니 었습니다. :) 그것은 더 비슷했습니다 – "아마 우리는이 접근법에 대해 더 전체 론적으로 생각할 수있을 것입니다.":)

그럴 필요는 없습니다. 개발자는 여기서 자유를 가져야합니다. assetPrefix와 동일한 방식으로 basePath를 동적으로 제공 할 수 있어야합니다.

예. 섬 사이에 연결이 없을 때만 작동합니다. 그리고 이것이 당신의 사용 사례 인 것처럼 들립니다. 동시에, 100 % 독립적 인 경우, 독립형 응용 프로그램의 무리가 아니라 섬을 만드는 이유를 이해하는 데 어려움을 겪고 있습니까? :)

경로 내보내기에 basePath를 추가 할 수도 있습니다.

경로 내보내기는 빌드시 발생하고 basePath는 배포시 정의되며 동일한 코드 아티팩트 (stage, preprod, prod, prod)의 배포가 두 개 이상있을 수 있기 때문에 쉽게 수행 할 수있는 방법을 모르겠습니다. 테스트 환경 등).

모든 섬의 구성이 동일합니까?
"assetPrefix": " https://static.trulia-cdn.com/javascript "

예, 모든 섬은 자산을 공유합니다. 다음에 콘텐츠 해싱이 수행되기 때문에 문제가되지 않을뿐만 아니라 실제로 매우 유익합니다. (각 아티팩트에서 빌드 된 자산을 추출하고 배포시 CDN에 게시합니다.)

이렇게하면 앱 서버에 "일반적인 html"요청 만 있으므로 trulia.com에서 "_next"경로를 볼 수 없습니다.

섬의 예 :

우리의 새로운 섬 – 이웃 페이지 – https://www.trulia.com/n/ca/san-francisco/pacific-heights/81571 (여기에서 더 많은 정보를 찾을 수 있습니다 : http : //www.trulia. com / neighborhoods)
이 섬은 모든 /n/* 경로를 담당합니다.

그리고 또 다른 섬은 우리의 로그인 페이지입니다 – https://login.trulia.com/login – 그것은 다른 도메인처럼 보이지만 실제로는 그렇지 않습니다. 다른 이유 때문에 그렇게 보이지만 기술적으로는 동일한 배포입니다. :)
그리고이 섬은 /login , /signup 와 같은 URL을 처리합니다.

궁금한 점이 더 있으면 알려주세요.

@alexindigo 예를 들어 주셔서 대단히 감사합니다.
예제를 분석 한 후 몇 가지 질문이 있습니다 😄

여전히 모든 섬에 대해 서버 렌더링을 수행하지만 가능한 한 많은 자산을 공통 CDN으로 추출하려고합니다.

https://www.trulia.com/n/ca/san-francisco/pacific-heights/81571 이 호출 될 때 정확히 어떤 일이 발생하는지 좀 더 설명해 주시겠습니까? 귀하의 대리인은 /n 이 지역 개요를 의미하고 올바른 섬으로 전달한다는 것을 알고 있습니까? 섬에 도착하기 전에 요청에 어떤 영향을 미칩니 까?

다음 섬 내부에서 기본 제공 라우팅을 사용합니까? 아니면 사용자 지정 솔루션이 있습니까?
섬 내부의 경로를 확인하고 싶었습니다. 불행히도 Neighborhood overview 은 URL을 변경하지 않고 모달 탐색 만 가능합니다. 로그인에는 완전한 맞춤형 솔루션이있는 것 같습니다.

이 댓글에있는 모든 질문에 답할 수 있기를 바랍니다 😏

Btw, 그것은 "아니요, 그 기능을 추가하지 마십시오"가 아니 었습니다. :) 그것은 더 비슷했습니다 – "아마 우리는이 접근법에 대해 더 전체 론적으로 생각할 수있을 것입니다.":)

물론, next.js를 만질 필요가없는 솔루션을 찾는 것이 좋을 것입니다 😏

예. 섬 사이에 연결이 없을 때만 작동합니다. 그리고 이것이 당신의 사용 사례 인 것처럼 들립니다. 동시에, 100 % 독립적 인 경우, 독립형 응용 프로그램의 무리가 아니라 섬을 만드는 이유를 이해하는 데 어려움을 겪고 있습니까? :)

나는 "섬"해결책을 찾기 위해 글을 쓰거나 말한 적이 없다. 방금 @timneutkens 와 채팅을 next.js 가 basepaths를 지원하지 않습니다. 그리고 인터넷 검색을 한 후에 나는 그것을 찾는 유일한 사람이 아니라는 것을 깨달았습니다. 그래서 조금 기여할 수있을 거라 생각했습니다. 그 후 Tim은 나에게 피드백을주기 위해 핑을했고 피드백에 대해 매우 감사합니다.

경로 내보내기는 빌드시 발생하고 basePath는 배포시 정의되며 동일한 코드 아티팩트 (stage, preprod, prod, prod)의 배포가 두 개 이상있을 수 있기 때문에 쉽게 수행 할 수있는 방법을 모르겠습니다. 테스트 환경 등).

빌드 할 때 경로를 내보내고 다른 섬에서 사용할 수 있도록하려면 구성에서 basePath를 하드 코딩하는 것이 유일한 간단한 방법 일 것입니다. 나는 당신의 요점을 이해합니다. 다른 한편으로는 정말 그런 문제입니까? 여전히 앱을 다른 도메인과 포트에 배포 할 수 있으며 각 환경에 대해 동일한 basePath를 사용할 수 있습니다.

좋은 아침 @tomaswitek :)

"basePath"기능에 대한 저의 경험은 복잡함을 매우 속이는 것입니다. 일반적으로 한 가지 특정 문제로 서두르지 않고 그런 종류의 것들을 구현하는 것이 좋습니다.
하지만 여러 각도에서보고 있습니다. 심층 병합에 접근하는 방법과 유사합니다. 여러 사용 사례를 요약하고 모두 하나의 우산 아래에 속하는지 확인합니다. 프레임 워크의 (주요) 버전간에 호환되지 않는 기능이 있다는 것은 매우 성가신 일입니다. :)

여전히 앱을 다른 도메인과 포트에 배포 할 수 있으며 각 환경에 대해 동일한 basePath를 사용할 수 있습니다.

내부 하위 폴더와 같은 - 당신 같은 소리는 처음에 언급하는 그 "basePath는"당신의 라우팅 코드의 일부 솔루션, 뭔가 괜찮을 것 pages BTW, 그 접근 방식이 선택한 개발자에게 신호 할텐데 디렉토리 ( basePath 꽤 잘). 그러나 당신을 막은 유일한 것은 자산 _next 대한 내부 nextjs 경로를 구성 할 수 없다는 것입니다.

그리고 그것은 더 적은 장기적인 부작용으로 해결할 수있는 더 좁은 문제처럼 들립니다.

또한 자산별로 assetPath를 구성 할 수있는 경우 (예 : next.config 맵을 사용하여) 더 나아가 앱간에 자산을 공유하여 성능 등을 향상시킬 수 있습니다.

그리고 그 기능에 대한 공개 PR이 있습니다. ;) / cc @timneutkens 는 그 강아지에게 돌아갈 시간 인 것 같습니다. :)

조만간이 기능을 추가하지 않으려면이 작업을 수행하고 작동하는 readme에 추가 된 익스프레스 기반 server.js 예제를 얻을 수 있습니까? 나는 이러한 문제에서 떠돌아 다니는 몇 가지를 시도했지만 작동하지 못했습니다. 감사.

안녕하세요 @ccarse 저는 이미 프로덕션에서 사용하는 작업 포크가 있습니다 : https://github.com/panter/next.js/pull/2
또한이 기능에 대한 PR을 열기 위해 시간을 투자 할 준비가되었습니다.
@timneutkens @alexindigo 이 문제를 해결하는 다른 방법이 있습니까?
basePath 구성이 필요하지 않은 경우 assetPath 를 사용하여 최소한의 예제를 제공 할 수 있습니까?

우리 회사도 이에 반대하고 있습니다.

레거시 앱을 섹션별로 천천히 인계하고 Next.js로 대체하고 있습니다.

단순화 된 예 :

| URL | 앱 |
| --- | --- |
| example.com | 유산 |
| example.com/shop | 다음 |
| example.com/search | 유산 |
| example.com/members | 다음 |

즉, 페이지, 경로, 자산 등 각 Next.js 앱 내에서 모든 접두사가 붙기를 원합니다.

우리가 이용하지 수 있도록 그것은 또한 우리가 지금은 사용하지 않는 것이 주목할 가치가 now.json 라우팅합니다. 전체 도메인 앞에 배치 된 자체로드 밸런서가 있고 하위 경로를 기반으로 트래픽을 라우팅합니다.

우리는 또한 사용자 지정 서버 (hapi)를 사용하고 있으므로 사용자 지정 서버 내에서 여기에 생성 된 모든 것을 활용할 수 있다면 좋을 것입니다.

now.config.json 설정의 일부 조합 또는 이와 동일한 작업을 수행하는 데 사용할 수있는 마이크로 프록시 의 일부 사용이있을 수 있지만 아직 올바른 조합을 찾지 못했습니다.

Now v2에서 호스팅되는 여러 정적으로 내 보낸 Next.js 앱에서 동일한 문제가 발생한다고 생각합니다.

| URL | 앱 |
| -| -|
| example.com | 다음 |
| example.com/dashboard | 다음 |

예상대로 루트 앱은 정상적으로 작동합니다. 그러나 두 번째에서는 상황이 잘못됩니다. 현재 next/link 와 함께 assetPrefix 와 결합하여 대부분의 문제를 해결합니다.

export default ({ children, href, ...rest }) => (
      <Link href={process.env.NODE_ENV === "production" ? `/dashboard${href}` : href} {...rest}>
        {children}
      </Link>
);

그러나 이것은 잘못된 URL에서 .js 파일을 찾으려고하기 때문에 prefetch 손상시킵니다.

• 실제 파일 URL : https://www.jirafe.io/dashboard/_next/static/Ya8O0iFjG~RJGGDYsrQ8S/pages/team/overview.js
• 프리 페치 된 파일 URL : https://www.jirafe.io/dashboard/_next/static/Ya8O0iFjG~RJGGDYsrQ8S/pages/dashboard/team/overview.js

현재 해결 방법은 이상적이지 않은 prefetch 을 비활성화하는 것입니다.

이것에 대한 상태는 무엇입니까?

또한 이것에 대한 업데이트를 찾고 있습니다.

@timneutkens 커뮤니티가 관심을 갖고 있다면 PR을 열기 위해 시간을 투자 할 준비가되었습니다. 우리는 이미 프로덕션에서 솔루션 (https://github.com/panter/next.js/pull/1)을 사용하고 있으며 매우 만족합니다.

이에 대한 해결책도 필요합니다.

이 제안을 쓸모 없게 만드는 새로운 API를 곧 도입 할 예정입니다.

이것의 영향도받습니다. 하위 디렉토리 경로에서 다음 프로젝트를 실행해야합니다. 공식 기능을 기대합니다. ETA가 있습니까?

API

그래서 어떻게되어 가고 있습니까? :디

스레드를 스팸하지 말고 문제 자체에 GitHub의 👍 기능을 사용하십시오.

@timneutkens 더 많은 정보를 제공 할 수 있습니까? 이것을 쓸모 없게 만드는 API는 무엇입니까? "곧"무엇을 생각하십니까? 감사합니다.

이것은 다중 영역과 정확히 관련이 없지만 도움이 될 수 있습니다.

사용자 지정 서버를 만들고 프록시 미들웨어를 사용하여 이와 비슷한 문제를 해결했습니다.

예 : @Zertz
참고 : 여전히 링크 문제를 해결해야합니다. 다시 말하지만 링크 구성 요소를 만들고 구성을 통해 접두사를 앱에 전달하여이 문제를 해결했으며 접두사가 존재하는 경우 정적 이미지에 대해 사용하거나 아무것도 사용하지 않습니다.

const proxy = require('http-proxy-middleware');

app.setAssetPrefix('/dashboard');

  // Express custom server
  // Proxy so it works with prefix and without...
  // So if asset prefix is set then it still works
  const server = express();
  server.use(
    proxy('/dashboard', {
      target: 'http://localhost:3000', 
      changeOrigin: true,
      pathRewrite: {
        [`^/dashboard`]: '',
      },
    }),
  );

제가 언급 한 제안은 # 7329입니다.

제가 언급 한 제안은 # 7329입니다.

뿡 빵뀨
제안 된 후크가 기본 경로 문제를 해결하는 방법에 대한 자세한 내용을 제공 할 수 있습니까?
그리고 Router.push('/about') 와 같은 라우터 리디렉션은 어떻게 될까요?

시간 내 주셔서 감사합니다 😏

링크 할 구성 요소가 필요하므로 라우터 API도 변경됩니다. 이 시점에서 URL 자체에 대한 상대 경로를 사용할 수 있습니다.

해결책을 얻을 수있는시기에 대한 업데이트 나 최소한 이에 대한 해결 방법이 있습니까?

업데이트를 게시하는 대신 초기 문제에 👍을 사용하십시오.

@ MMT-LD 귀하의 솔루션 종류가 저에게 효과적이지만 이제 모든 링크 클릭 또는 라우터 푸시 이벤트에서 페이지가 다시로드됩니다 ☹️

@Zertz 의 솔루션을 시도했는데 완벽하게 작동했습니다!
또한 출력 파일을 프리 페치 된 경로에 복사하여 prefetch 문제를 해결할 수 있습니다.
https://github.com/fand/MDMT/blob/master/scripts/copy-preload.js

... 그것은 더러운 속임수이지만 어쨌든 작동합니다 🤪

헉헉

이제 모든 링크 클릭 또는 라우터 푸시 이벤트에서 페이지가 다시로드됩니다. ☹️

이 문제가 있었지만 링크의 'as'매개 변수를 사용하여 수정되었으므로 링크는 내부 파일을 가리 키지 만 'as'는 경로에 상대적입니다.
예 :
<Link href={"/${item.link}"} as={"./${item.link}"}>

헉헉

귀하의 솔루션이 저에게 효과적이지만 이제 모든 링크 클릭 또는 라우터 푸시 이벤트에서 페이지가 다시로드됩니다 ☹️

이것이 제가 의미하는 바입니다. 이것은 메모리에서 가져온 것입니다. 그러나 아래에서 필요한 것을 얻을 수 없다고 확신합니다.

// WithConfig component
import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();

const WithConfig = ({ children }) =>
  children && children({ config: publicRuntimeConfig });

export default WithConfig;

// Extended Link component

 import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { WithConfig } from '../WithConfig';
/* 
    <Link> component has two main props:
    href: the path inside pages directory + query string. e.g. /page/querystring?id=1
    as: the path that will be rendered in the browser URL bar. e.g. /page/querystring/1

*/

const NextLink = ({
  browserHref,
  pagesHref,
  whatever,
}) => {
  return (
    <WithConfig>
      {({ config: { pathPrefix } = {} }) => (
        <Link
          as={pathPrefix ? `${pathPrefix}${browserHref}` : browserHref}
          href={pagesHref}
          passHref
        >
          <a>{whatever}</a> // this bit is up to you - children or whatever
        </Link>
      )}
    </WithConfig>
  );
};

NextLink.propTypes = {
  browserHref: PropTypes.string.isRequired,
  pagesHref: PropTypes.string,
};

NextLink.defaultProps = {
  pagesHref: undefined,
};

export default NextLink;

용법:

import NextLink from '../NextLink'

<NextLink browserHref={`/page/1`} pagesHref={`/page?querystring=1`} whatever='I'm the link' />

행운을 빕니다 : 스마일 :

useLink RFC가 이제 거부되고 (# 7329) basePath 지원이 큰 도움이되었으므로 Next.js 프로젝트는 PR이이를 구현하는 것을 기꺼이 받아들이나요? 나는 그것을 할 의향이 있습니다.

@tomaswitek 의이 구현 을 보면 올바른 방향으로 가고있는 것 같습니다. 가장 중요한 것은 라우터가 basePath 인식하도록 만드는 것입니다. basePath 지원을 어렵게 만드는 다른 명확하지 않은 사항이 있습니까?

전반적으로 디자인이 명확하고 구성 변수가 하나 뿐이라고 생각합니다.

module.exports = {
  basePath: '/demo'
}

assetPrefix 와의 상호 작용은 https://github.com/zeit/next.js/issues/4998#issuecomment-414978297에 잘 정의되어 있습니다.

업데이트 : 나는 또한 사용자 정의 라우터를 만들고 어떻게 든 기본 라우터를 교체하여 이것을 구현할 수 있는지 생각하고 있었지만 가능하지 않은 것 같습니다 .Next.js는 라우터를 하드 코딩합니다. 여기를 참조

이 문제는 2017 년 이후로 발생했으며 해결 방법이 있습니까? 아니면 basePath 요청에 대한 공식적인 응답입니까?

따라서 https://github.com/zeit/next.js/issues/4998#issuecomment에 제안 된대로 assetPrefix 및 사용자 지정 <Link> 구성 요소의 조합으로이 작업을 수행하려고 시도한 후 -464345554 또는 https://github.com/zeit/next.js/issues/4998#issuecomment -521189412, 불행히도 할 수 있다고 생각하지 않습니다.

정의 assetPrefix ,이 같은 비교적 간단했다 next.config.js :

const assetPrefix = process.env.DEPLOYMENT_BUILD ? '/subdir' : '';

module.exports = {
  assetPrefix,
  env: {
    ASSET_PREFIX: assetPrefix,
  },
}

다음 단계는 사용자 정의 Link 구성 요소입니다. 예를 들어 https://github.com/zeit/next.js/issues/4998#issuecomment -464345554에서 주어진 첫 번째 아이디어는 다음과 같이 href 접두사를 사용하는 것입니다 (간체).

export default ({ children, href, ...rest }) => (
  <Link href={`${process.env.ASSET_PREFIX}${href}`} {...rest}>
    {children}
  </Link>
);

이 스레드의 다른 사람들이보고 한 바와 같이, 요청이 갑자기 / subdir /_next/static/.../pages/ subdir /example.js-다른 "subdir"이 없어야하므로 프리 페칭이 중단됩니다. 그러나 사용자 정의 Link 구성 요소를 사용하여 href를 /subdir/example 로 설정하므로 Next.js가 pages/subdir/example.js 페이지 번들을 요청하는 것은 당연합니다.

따라서 문제가있는 프리 페칭은 세상의 종말처럼 들리지 않지만 (UX는 매우 추악하지만) 우리 앱에서는 Next.js 9의 동적 라우팅을 사용하면서 상황이 악화됩니다. 이를 위해 as 올바르게 설정해야 사용자 정의 Link 구성 요소의 진화가 다음과 같이 보입니다.

export default ({ children, href, as, ...rest }) => (
  <Link 
    href={`${process.env.ASSET_PREFIX}${href}`}
    as={`${process.env.ASSET_PREFIX}${as}`}
    {...rest}
  >
    {children}
  </Link>
);

사용법은 다음과 같습니다.

<CustomLink href='/post/[id]' as='/post/1'>...</CustomLink>

다음으로 변환됩니다.

<Link href='/subdir/post/[id]' as='/subdir/post/1'>...</Link>

Now에 배포 할 때 전혀 효과가 없었습니다. https://deployment-id.now.sh/subdir/post/1 로 이동하면 404가됩니다. 이유를 완전히 모르겠습니다. 아마도 @now/next builder ( 업데이트 : https://github.com/zeit/next.js/pull/8426#issuecomment-522801831) 때문이지만 궁극적으로 /subdir/post/[id] 요청할 때 Next.js의 라우터를 혼란스럽게합니다

이 스레드, 또 다른 예를있다 https://github.com/zeit/next.js/issues/4998#issuecomment -521189412은, 그 접두사로만하지 href가이 같은 (간체) :

export default ({ children, href, as, ...rest }) => (
  <Link href={href} as={`${process.env.ASSET_PREFIX}${as}`} {...rest}>
    {children}
  </Link>
);

하지만 브라우저에서이 오류가 발생합니다.

<Link> 의 as 값이 href 값과 호환되지 않습니다. 이것은 유효하지 않습니다.

https://github.com/zeit/next.js/issues/7488 에보고 된 문제

결국 basePath 과 같은 것이 지원 될 때까지 해결책이 없다고 생각합니다. 기꺼이 도와 드리겠습니다.

@borekb 이전에 몇 번 언급했듯이 도움을 줄 준비가되었습니다. 지금까지 본 모든 해결 방법은 문제의 일부만 해결합니다. 지금 우리는 basePath를 구현하는 프로덕션에서 next.js의 포크를 사용하고 있습니다.

이 제안을 쓸모 없게 만드는 새로운 API를 곧 도입 할 예정입니다.

@tim 여전히 https://github.com/zeit/next.js/issues/7329

Btw. 내일은 정확히 1 년이 될 것입니다.

상대적으로 거친 아이디어 중 하나는 src/pages 와 같은 페이지를 갖고 적절한 위치에 심볼릭 링크하는 것입니다. 예를 들면 :

• myapp.example.com 배포하려면 src/pages 를 pages 심볼릭 링크합니다.
• example.com/myapp 배포하려면 src/pages 를 pages/myapp 심볼릭 링크합니다.

사용자 정의 <Link> 구성 요소 및 assetPrefix 와 함께 사용하면 _ 작동 할 수 있지만 _ 시도 할만큼 용감하지는 않습니다 😄.

그에 대한 업데이트가 있습니까?

basePath 지원에 진전이 있습니까? :)

헉헉

이제 모든 링크 클릭 또는 라우터 푸시 이벤트에서 페이지가 frowning_face를 다시로드합니다.

이 문제가 있었지만 링크의 'as'매개 변수를 사용하여 수정되었으므로 링크는 내부 파일을 가리 키지 만 'as'는 경로에 상대적입니다.
예 :
<Link href={"/${item.link}"} as={"./${item.link}"}>

당신은 내 하루를 구했습니다! :)))

나는 Router.push(`/route`, `${process.env.BASE_PATH}route`); 와 똑같이하고있다

헉헉

이제 모든 링크 클릭 또는 라우터 푸시 이벤트에서 페이지가 다시로드됩니다. ☹️

이 문제가 있었지만 링크의 'as'매개 변수를 사용하여 수정되었으므로 링크는 내부 파일을 가리 키지 만 'as'는 경로에 상대적입니다.
예 :
<Link href={"/${item.link}"} as={"./${item.link}"}>

이 솔루션은 다음 9 개의 파일 기반 라우팅에서 작동하지 않습니다. /route/[id] , ${process.env.BASE_PATH}/route${id} 에서이 오류가 발생합니다.

이 의견 은 문제를 아주 잘 설명합니다.

몇 사람이 여기의 솔루션이 프리 페치를 중단하는 방법을 논의하는 것을 보았지만. 우리에게는 또 다른 중요한 문제가 있습니다.

next9를 사용하면 href 에서 assetPrefix를 사용하면 next _always_가 서버 경로를 수행합니다. 나는 그것이 일어나는 것을 시연하는이 문제 에서 복제 저장소를 만들었습니다.

이것은 모든 경로에서 다시 생성되므로 본질적으로 Apollo Client 캐시를 손상시킵니다.

구현은 assetPrefix가 없는 기본 페이지 href 를 다음 경로 href (assetPrefix 포함)와 비교하여 깊은 경로를 생성한다고 생각합니다.

예 : href /prefix/page (기본 페이지는 /page )이고 다음 href 경로는 /prefix/page/[id] (접두어가 없으면 404가됩니다) 이것은 매우 다른 경로이며 얕은 경로는 불가능합니다.

급행 경로를 통해 해결 방법을 찾는 중

사용시 basePath 인 href props가있는 구성 요소의 경우 프리 페치가 작동하지 않습니다.
PLZ는 basePath 및 prefetch를 지원합니다.

나는 이것을 정말로 사용할 수 있습니다. 단일 서버 소스에서 여러 앱을 실행하고 있으며 각각 고유 한 web/appX/{next project files} . basePath를 더 많이 제어하는 ​​것이 좋습니다. 지금은 해결 방법을 찾았지만 그다지 예쁘지는 않습니다.

정적 내보내기도 basePath 😊

성공한 것 같습니다 👏

{
  experimental:{
    basePath: '/some/dir',
  }
}

불행히도 이것은 우리에게 매우 나쁜 제한입니다.

역방향 프록시 뒤에 모든 앱이 있으므로 경로를 접두사로 지정해야합니다 (아래 예에서는 접두사 /auction-results ).

이미 assetPrefix 접두사를 사용하고 있으므로 앱이 서버 측 요청에 대해 정상적으로 실행될 수 있습니다.
예 : mydomain.com/auction-results/ 는 다음과 같은 일부 익스프레스 라우팅을 사용하여 잘 작동합니다.

router.get(`/${appPrefix}/`, (req, res) => {
  nextApp.render(req, res, '/national', req.params);
});

그러나 우리가 next/link 를 통해 클라이언트 측 탐색을 시도 할 때, 예 :

여기서 /auction-results 는 응용 프로그램 접두사이고 /national 는 ~pages/national 의 페이지입니다.

<Link href="/national" as="/auction-results/">
  <a>Goto National Page</a>
</Link>

아무 일도하지 않습니다 (고스트 클릭)

전체 페이지 새로 고침 링크를 갖는 것은 이상적이지 않습니다.

내가 이걸 도울 수있는 방법이 있다면

이것에 대한 모든 업데이트 ... 작년 에이 무렵이 문제가 발생했습니다. 1 년 후, 저는 새로운 앱을 개발 중이며 작년에했던 것과 동일한 해결 방법을 수행해야합니다. Basepath는 바닐라 기능이어야합니다.

이것에 대한 모든 업데이트 ... 작년 에이 무렵이 문제가 발생했습니다. 1 년 후, 저는 새로운 앱을 개발 중이며 작년에했던 것과 동일한 해결 방법을 수행해야합니다. Basepath는 바닐라 기능이어야합니다.

이것을 게시하여 무엇을 기대하고 있는지 잘 모르겠습니다.

Next.js는 저희 팀 (5 명)이 풀 타임으로 작업하고 있으며 동시에 많은 기능을 작업하고 있습니다. 작년에 우리는 다음과 같은 작업을했습니다.

• https://nextjs.org/blog/next-9
• https://nextjs.org/blog/next-9-0-7
• https://nextjs.org/blog/next-9-1
• https://nextjs.org/blog/next-9-1-7
• https://nextjs.org/blog/next-9-2
• https://nextjs.org/blog/next-9-3

Next.js 애플리케이션 (신규 및 기존)을 훨씬 더 작고, 빠르고, 더 확장 할 수 있도록 효과적으로 만듭니다.

기능에 대해 "찬성"을 표명하려면 할 수 있습니다. 초기 스레드에서 👍 기능을 사용하십시오.

basePath 이 기본 제공 기능이어야한다는 점에 확실히 동의합니다. 이미 로드맵에 있으며 스레드에서 다시 읽어 보면 볼 수있는 초기 PR도 작성했습니다.

PR : https://github.com/zeit/next.js/pull/9872

이 기능을 실현하는 데 재정적으로 기여하고 싶다면 [email protected]으로 문의하십시오.

이것에 대한 상태는 무엇입니까? 우리는 이것에 정말로 의존하고 있습니다 : /

@Sletheren basePath 지원은 현재 실험적이며 위험을 감수하고 사용하십시오.

cf. https://github.com/zeit/next.js/pull/9872

@Sletheren basePath 지원은 현재 실험적이며 위험을 감수하고 사용하십시오.

cf. # 9872

@martpie 나는 이미 그것을 보았지만. 제 경우 basePath 는 하나가 아니라 여러 basePath가 될 수 있습니다. 다른 "URL"을 통해 앱을 제공하고 빌드 시간 동안 basePath 설정하는 것은 옵션이 아니기 때문입니다. 단일 문자열이 아닌 경로 배열을 지원하기 위해)

@timneutkens 업데이트

1. 이것이 기업 전용입니까 (기업 영업팀에 문의하는 것이 약간의 자극을 일으켰습니다)?

2. PR에 따르면 로드맵에있는 것으로 보이며 다시 제거되지 않을 것입니다. 우리가 임의의 가격에 대해 몇 주 동안 임의의 판매원과 협상 한 후 몇 주 동안 무너진 오픈 소스 버전과 완전한 지원을 제공하는 다른 버전과 같이 다음 달에 놀라움없이이 기능을 지금 구축하는 것이 안전한지 여부를 알려줄 수 있습니까?

저는 여러분이 많은 기능을 작업하고 있으며 모든 사람이 우선 순위를 가지고 있지만 더 작은 설정에서도 프록시가 필요하다는 것을 이해합니다. 다음으로 여러 인스턴스를 실행하고 서비스 당 전용 basePath 를 제공해야합니다. 이제 Next에서 여러 서비스를 구축하기 전에이 기능이 풀 오픈 소스로 제공 될 가능성이 얼마나되는지 곧 알아야합니다. 그렇지 않으면 Next에 더 많은 시간을 투자하는 것이 너무 위험 할 것입니다.

이해 해주셔서 감사합니다.

FWIW, 나는 이제 작동하고 다른 사람들을 위해 다음과 같이 운전했습니다.

이것을 next.config.js 넣으십시오.

module.exports = {
  experimental: {
    basePath: '/custom',
  },
}

그런 다음 서버를 다시 시작하고 웹 서버 미들웨어를 올바르게 설정해야했습니다.

예를 들어 사용자 지정 경로를 통해 모든 요청을 잡습니다. app.use('/custom', (req, res...) => { ... 그런 다음 (중요) Next가 실행되는 시스템의 URL에 프록시해야합니다 (따라서 컨테이너 오케스트레이션의 내부 주소 와 http-proxy 를 사용하는 경우 해당 경로를 다시 사용) http-proxy => 예. ... target: 'http://next:3000/custom ), 따라서 사용자 지정 경로가없는 호스트뿐만 아니라 http-proxy-middleware 를 사용하는 경우이 기능이 필요하지 않습니다.

괜찮아요.이 기능에 EE 라이선스가 필요하지 않기를 바랍니다. 팀이이 기능을 성숙시키기 위해 도움이 필요하면 pls가 저희에게 알려주십시오.

편집 : Next의 프로덕션 모드에서도 이것을 시도했으며 잘 작동하는 것 같습니다.

@timneutkens 업데이트

1. 이것이 기업 전용입니까 (기업 영업팀에 문의하는 것이 약간의 자극을 일으켰습니다)?
2. PR에 따르면 로드맵에있는 것으로 보이며 다시 제거되지 않을 것입니다. 우리가 임의의 가격에 대해 몇 주 동안 임의의 판매원과 협상 한 후 몇 주 동안 무너진 오픈 소스 버전과 완전한 지원을 제공하는 다른 버전과 같이 다음 달에 놀라움없이이 기능을 지금 구축하는 것이 안전한지 여부를 알려줄 수 있습니까?

저는 여러분이 많은 기능을 작업하고 있으며 모든 사람이 우선 순위를 가지고 있지만 더 작은 설정에서도 프록시가 필요하다는 것을 이해합니다. 다음으로 여러 인스턴스를 실행하고 서비스 당 전용 basePath 를 제공해야합니다. 이제 Next에서 여러 서비스를 구축하기 전에이 기능이 풀 오픈 소스로 제공 될 가능성이 얼마나되는지 곧 알아야합니다. 그렇지 않으면 Next에 더 많은 시간을 투자하는 것이 너무 위험 할 것입니다.

이해 해주셔서 감사합니다.

@ pe-s 나는 당신이 내 게시물을 오해하고 있다고 생각합니다.

현재로서는 "enterprise Next.js 버전"이 없습니다. 저는 이와 같은 기능을 더 짧은 시간에 구축하기 위해 외부 회사가 컨설팅 비용을 지불하기 위해 손을 뻗은 수많은 경우를 언급했습니다. 예를 들어 영역 지원은 Trulia와 협력하여 구축되었습니다.

이 기능은 아직 작업 중이며 로드맵에 있습니다. 작업중인 모든 기능은 오픈 소스입니다. Next.js의 엔터프라이즈 버전이 없다고 말했듯이. 내가 연락 언급 따라서 왜하지만 우리는 로드맵에 높은 충격 작업의 여러 우선 순위를 [email protected]을 당신이 Next.js.에 대한 기업의 지원을 논의하기 위해 즉시 / 가능한이 기능을 필요로하는 경우

@timneutkens tx는 빠른 응답과 훌륭합니다! 그런 다음 올인 할 수 있습니다. :)
앞으로도 힘써주세요!

Basepath 지원은 현재 next@canary 에서 제공되며 더 이상 실험적이지 않습니다. 조만간 안정적인 채널에서 방송 될 예정입니다.

나는 이것에 꽤 늦었지만 이것을 수동으로 처리하는 대신 실제 HTML <base> 사용을 고려 했습니까?

Basepath 지원은 현재 next@canary 에서 제공되며 더 이상 실험적이지 않습니다. 조만간 안정적인 채널에서 방송 될 예정입니다.

@timneutkens ,이 추가에 감사드립니다. 비 실험적 basePath 지원이 언제 공식적으로 출시되는지 알고 계십니까?

또한 basePath를 설정하면 자산 (공용 폴더에 있음)이 예상대로 적절한 URL에 제공됩니다. 그러나 코드에서 참조 할 때 기본 경로를 src에 수동으로 추가해야합니다. 그렇지 않으면 일반 경로에서 계속 참조되기 때문입니다. 이것이 basePath의 예상 사용입니까? 또한 assetPrefix를 사용해 보았지만 내 코드에 영향을 미치지 않았습니다.

예 :

1. next v9.4.5-canary.24
2. next.config.js에서 basePath 를 /alerts 로 설정 :

const basePath = '/alerts';
module.exports = {
  basePath: basePath,
  env: {
    BASE_PATH: basePath,
  },
};

1. public/images/example.png 에있는 자산
2. 반응 구성 요소에서 자산 사용 예 :

const ExampleImage = () => (
  <img src={`${process.env.BASE_PATH}/images/example.png`} />
);

내 테스트에서 자산 URL을 업데이트하지 않습니다.

최신 카나리아를 설치했습니다.
npm install [email protected]

next.config.js

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  basePath: isProd ? '/example' : ''
}

모든 페이지 및 링크가 올바르게로드됩니다.
http : // localhost : 3000 / example / posts / pre-rendering
http : // localhost : 3000 / example / posts / ssg-ssr
http : // localhost : 3000 / example / posts / pre-rendering

그러나 이미지, 파비콘 등은 매핑되지 않습니다.
http : // localhost : 3000 / favicon.ico 404
http : // localhost : 3000 / images / profile.jpg 404

누군가 이것을 테스트 했습니까? 또한 assetPrefix를 사용해 보았지만 작동하지 않았습니다.

또한 혼란 스럽습니다. 내장 된 브라우저 기능을 사용하지 않는 이유는 무엇입니까?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

@kmturley 뿐만 아니라 당신의 끝에서
@timneutkens ,이 문제를 다시

이미지 접두사를 수동으로해야합니다. 다음을 사용하여 basePath를 가져올 수 있습니다.

const {basePath} = useRouter()

https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

Next.js는로드하는 스크립트에서 자동으로 접두사를 사용하지만 공용 폴더에는 아무런 영향을 미치지 않습니다.

이제 / public에있는 파일에 연결하는 방법에는 여러 가지가 있다는 것을 알게되었습니다. 예 : <img/> <link/> ...
이것이 각각에 대한 basePath를 수동으로 지정해야하는 이유입니까?

아래와 같은 컴포넌트가 있다면 시간을 절약하고 많은 사람들의 혼동을 줄일 수 있을까요?

<WithinBasePath>
  {/* automatically fixes the path with basePath */}
  <img src="/logo.png" />
</WithinBasePath>

나는 이것이 적절하다고 생각하지 않지만 이것이 내가 의미 한 바입니다.

// src/components/WithinBasePath/index.tsx

import React from "react"
import path from "path"
import { useRouter } from "next/router"
interface Props {}

const WithinBasePath: React.FC<Props> = (props) => {
  const { basePath } = useRouter()
  const children = [props.children].flatMap((c) => c) as React.ReactElement[]
  return (
    <>
      {children.map((child, key) => {
        let newChild = null

        switch (child.type) {
          case "img":
            newChild = React.createElement(child.type, {
              ...child.props,
              src: path.join(basePath, child.props.src),
              key,
            })
            break
          case "link":
            newChild = React.createElement(child.type, {
              ...child.props,
              href: path.join(basePath, child.props.href),
              key,
            })
            break
          default:
            newChild = React.createElement(child.type, {
              ...child.props,
              key,
            })
        }
        return newChild
      })}
    </>
  )
}
export default WithinBasePath

// pages/test.tsx

import React from "react"
import WithinBasePath from "@src/components/WithinBasePath"
interface Props {}

const test: React.FC<Props> = (props) => {
  return (
    <WithinBasePath>
      <img src="/123.jpg" />
      <link href="/abc.jpg" />
      <div>other element</div>
    </WithinBasePath>
  )
}
export default test

후크 인 const {basePath} = useRouter() 을 사용하여 클래스 및 구성 요소로 작업하고이 오류가 발생하는 경우 :

잘못된 후크 호출 경고

https://reactjs.org/warnings/invalid-hook-call-warning.html

다음을 사용하여 작동시킬 수 있습니다.

import { withRouter, Router } from 'next/router'

class Example extends Component<{router: Router}, {router: Router}> {
  constructor(props) {
    super(props)
    this.state = {
      router: props.router
    }
  }
  render() {
    return (
      <Layout home>
        <Head><title>Example title</title></Head>
        <img src={`${this.state.router.basePath}/images/creators.jpg`} />
      </Layout>
    )
  }
}
export default withRouter(Example)

markdown과 함께 basePath를 사용하려면 문자열에서 찾기 및 바꾸기를 수행해야하는 것처럼 보입니다.

const content = this.state.doc.content.replace('/docs', `${this.state.router.basePath}/docs`);
return (
<Layout>
  <Container docs={this.state.allDocs}>
    <h1>{this.state.doc.title}</h1>
    <div
      className={markdownStyles['markdown']}
      dangerouslySetInnerHTML={{ __html: content }}
    />
  </Container>
</Layout>
)

이미지 접두사를 수동으로해야합니다. 다음을 사용하여 basePath를 가져올 수 있습니다.

const {basePath} = useRouter()

이 솔루션은 css 또는 scss 파일로 가져온 이미지를 고려하지 않습니다. css 또는 scss 파일 내에서 자산을 가져올 때 기본 경로를 설정하는 방법에 대한 솔루션이 있습니까?
이 솔루션을 사용하면 모든 이미지를 img 태그, 인라인 스타일 또는 스타일 태그를 통해 가져와야합니다. 스타일이 여러 위치에 구현되도록 분할되므로 이상적이지 않습니다.

@peetjvv 다음은 CSS에서 접두사 basePaths가있는 자산을 사용하기위한 차선책입니다. 만들기, 수입 및 추가 <CSSVariables> 에서 구성 요소를 _app.tsx 글로벌 인라인 주입하는 <style> 당신이 다음 스타일 시트에 걸쳐 모두 사용할 수있는 CSS 변수를 포함하는 요소.

예를 들어 <body> 변수를 빌드하고 주입합니다.

<style>
:root {
      --asset-url: url("${basePath}/img/asset.png");
}
</style>

basePath를 얻으려면 withRouter 사용하는 @kmturley 의 접근 방식을 사용합니다.
해당 구성 요소의 모양은 다음과 같습니다.

import { withRouter, Router } from "next/router";
import { Component } from "react";

export interface IProps {
  router: Router;
}

class CSSVariables extends Component<IProps> {
  render() {
    const basePath = this.props.router.basePath;
    const prefixedPath = (path) => `${basePath}${path}`;
    const cssString = (value) => `\"${value}\"`;
    const cssURL = (value) => `url(${value})`;
    const cssVariable = (key, value) => `--${key}: ${value};`;
    const cssVariables = (variables) => Object.entries(variables)
      .map((entry) => cssVariable(entry[0], entry[1]))
      .join("\n");
    const cssRootVariables = (variables) => `:root {
      ${cssVariables(variables)}
    }`;

    const variables = {
      "asset-url": cssURL(
        cssString(prefixedPath("/img/asset.png"))
      ),
    };

    return (
      <style
        dangerouslySetInnerHTML={{
          __html: cssRootVariables(variables),
        }}
      />
    );
  }
}

export default withRouter(CSSVariables);