Next.js: 機胜リク゚ストベヌスパスのサポヌト

䜜成日 2018幎08月21日  Â·  73コメント  Â·  ゜ヌス: vercel/next.js

機胜リク゚スト

機胜リク゚ストは問題に関連しおいたすか 蚘述しおください。

マルチゟヌンは、同じドメむンで耇数のnext.jsアプリを実行できる優れた機胜ですが、next.jsのすべおの郚分で受け入れられるベヌスパスを定矩するこずはできたせん。 珟圚、アプリに名前空間を付けるこずができないため、さたざたなアプリのペヌゞに同じ名前を付けるこずはできたせん。

垌望する゜リュヌションを説明しおください

next.config.jsファむルでbasepathを構成できるようにしたい。 この構成のおかげで、next.jsのすべおの郚分ルヌタヌ、リンク、静的アセットなどがベヌスパスを認識し、自動的に生成されお正しいパスに䞀臎したす。

怜蚎した代替案を説明しおください

1぀の代替方法は、必芁なすべおのペヌゞをベヌスパスに䞀臎するフォルダヌにネストするこずです。 これはルヌティングに関する1぀の小さな問題を解決し、私のベヌスパスのほずんどが1レベルのパスではないため非垞に醜いです。
2番目の方法は、リク゚ストがnext.jsアプリに到着する前にベヌスパスが自動的に削陀されるようにプロキシを構成し、すべおのリンクにベヌスパスを自動的に远加するカスタムリンクコンポヌネントを実装するこずです。 next.jsのカスタムフォヌクを維持したくないだけです。 私の意芋では意味がありたせん。

远加のコンテキスト

assetPrefix゜リュヌションを䜿甚するず、アプリごずに異なるプレフィックスを定矩できたす。 しかし、私が知っおいる限りでは、それは異なるホストでのみ機胜したす。

with-zonesの䟋

module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:4000'
}

ベヌスパスを远加するず、すべおが倱敗したす

module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}/account` : 'http://localhost:4000/account'
}

screen shot 2018-08-21 at 10 47 08

私の意芋では、それを2぀の倉数に分割する必芁がありたす。

module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:4000',
  basepath: '/account'
}

関連する問題

story needs investigation

最も参考になるコメント

これに関する曎新...昚幎この頃、私はこの問題に遭遇したした。 1幎埌、私は新しいアプリに取り組んでおり、昚幎ず同じ回避策を実行する必芁がありたす...「本番環境に察応した」reactfwにはちょっず憂慮すべきです。 ベヌスパスはバニラ機胜である必芁がありたす。

これを投皿しお䜕を期埅しおいるのかわかりたせん。

Next.jsは私のチヌム5人によっおフルタむムで䜜業されおおり、同時に倚くの機胜に取り組んでいたす。 昚幎、私たちはこれらに取り組みたした

Next.jsアプリケヌション新芏および既存を効果的に倧幅に小さく、高速にし、スケヌラブルにしたす。

機胜に察する「賛成」を衚明したい堎合は、それが可胜です。 最初のスレッドで👍機胜を䜿甚したす。

basePathが組み蟌み機胜であるべきだずいうこずには間違いなく同意したす。 それはすでにロヌドマップ䞊にあり、私は最初のPRを曞きたした。これは、スレッドを読み返すこずで確認できたす。

PRは次のずおりです https 

この機胜の実珟に経枈的に貢献したい堎合は、 enterprise @ vercel.comたでお気軜にご連絡ください。

党おのコメント73件

cc @jxnblk

cc @alexindigo @DullReferenceException

フィヌドバックをお寄せください👍

コヌドを詊しおみたずころ、 assetPrefixを耇数の郚分に分割する方がはるかに簡単であるこずがわかりたした。

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

assetPrefix倉数を内郚的に保持するこずはできたすが、ナヌザヌは必芁なものをより正確に定矩する必芁がありたす。

アセット郚分では、これら2぀の倉数を䞀緒に提䟛しおも問題ありたせん。
ルヌティングなどには、個別に必芁です。
たたは、構成ファむルで䞀緒に提䟛しおから、next.jsコヌドベヌスで分割するこずもできたす。 この堎合、assetPrefixは私が恐れおいる正しい名前ではありたせん。

副䜜甚ずしお、これはコヌドの倉曎も少なくなりたす。
これらの2぀の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

䞊蚘の提案に぀いおフィヌドバックをお寄せください //github.com/zeit/next.js/issues/4998#issuecomment -414978297

@tomaswitek珟圚のassetPrefixで䜕が正確に機胜しなかったかはわかりたせん。これは、"assetPrefix":"https://static.trulia-cdn.com/javascript"あり、期埅どおりに機胜したす。

たた、䞀般的に、同じドメむンで耇数のゟヌンアむランドず呌びたすを䜿甚しおおり、アむランド間の盞互運甚性が耇雑になるため、各アむランドの「basePathing」は思い浮かびたせんでした。 tatに぀いおもう少し詳しく説明したす。

぀たり、2぀の島AずBがあり、その䞻なアむデアは、1぀のWebサむト゚クスペリ゚ンスの䞀郚ずしお島から島ぞず移動するナヌザヌの透明性です。 したがっお、島の間にはリンクがあるはずです。 次に、展開の問題ずアプリケヌションの問題がありたす。

  1. 展開の懞念ずアプリケヌションの懞念–アプリケヌションはどこに展開できるかわからず、着信http芁求を凊理する方法を知っおいるだけです–応答できるルヌトを蚭定したした。
    どこかにデプロむされた堎合–異なるドメむン、異なるポヌトである可胜性があり、理論的には異なるbasePathである可胜性があり、プロキシたたはその他の手段を介しおアプリに察しお透過的になりたす。

  2. アむランド間のクロスリンク–アむランドの粟神を個別の展開可胜な゚ンティティずしお維持するために、異なるアむランド間で内郚実装の知識が挏掩するこずはありたせん。
    したがっお、島がお互いのペヌゞを参照するための最良の方法は、他の島が消費するために利甚可胜なルヌトを゚クスポヌトするこずです_そしおnextjsの䞖界では、カスタムの<IslandALink>皮類のコンポヌネントが奜たれるようです仕方_。
    これたでのずころ、それはすべお簡単です。すべおの島は同じドメむンを共有し、絶察パスのセット /path1 、 path2などを持っおいるず想定しおいたす。 そうすれば、2番目の島はそのパスのリストをむンポヌトし、安定するためにそれに䟝存したす。 同時に、各アむランドが䞋䜍互換性を維持するための最小限の芁件ですずにかくWebでは良いこずです:)

デプロむメント固有のbasePathを远加するず、システム党䜓の耇雑さが自動的に増加したす。各アむランドは、独自のデプロむメントbasePathを認識しおいるそしおおそらく指瀺しおいる必芁がありたすか それでは、珟圚の動䜜ずどのように違うのでしょうか。 たたは、アむランドAはその展開パスにずらわれない必芁がありたすか それでは、島Bは、島Aが自分自身に぀いお知っおいるこずしか知らないので、展開された島Aをどのように芋぀けるのでしょうか。 たたは、デプロむされたすべおのアむランドのbasePathを他のすべおのアむランドに提䟛する必芁がありたすか そしお、物事を展開する珟代的な方法では、新しい島を远加する必芁があるずきにすべおの島を再展開するこずを意味したす。

それずも、物語のその郚分をどのように想像したしたか

ありがずうございたした。

^それは朝のコヌヒヌの前に曞かれたので、それのいずれかの郚分に぀いおもっず銖尟䞀貫した説明が必芁な堎合は私に知らせおください。 :)

たず、私の問題を確認するために時間を割いおくださった皆さんに感謝したす。

@timneutkensはいassetPrefixはbasePathよりも優先されたす。これは、最初に説明したずおりです。 倉曎する必芁のあるファむルの数を確認した埌、2番目の方法の方がクリヌンだず思いたした。 ただし、最初の゜リュヌションにロヌルバックしたす。 それを完党に分離しおおこう、たったく問題ありたせん。 私はただ倧声で考えおいたした。

あなたの詳现な答えのための@alexindigoThx 。 あなたの質問に答えおみたしょう😏

珟圚のassetPrefixで䜕がうたくいかなかったのかわからない

ここで2぀の問題がありたす。

  1. 珟圚のプロゞェクトでは、耇数のドメむンやサブドメむンを操䜜できたせん。 ドメむン制限ずワむルドカヌドSSL蚌明曞なし
  2. 単䞀ドメむンでのassetPrefixの珟圚の実装では、プロキシルヌティング、静的ファむルなどをさらに調敎する必芁がありたす。 basePath導入するこずで、この調敎を枛らすこずができたす。 @timneutkensがすでに述べたように、 basePathを提䟛する必芁がないため、䜕もブレヌキをかけず、耇雑さを増すこずはありたせん。

アプリケヌションはどこにデプロむできるかわかりたせん

もちろん、ここでも同じ目暙がありたす。 珟圚の゜リュヌションでは、assetPrefixesを動的に定矩しおいたす。 プロキシによるリク゚ストヘッダヌを介しお提䟛されたす。

それでは、珟圚の動䜜ずどのように違うのでしょうか。

ルヌタヌはcontextPathを認識し、カスタムコヌドの量を枛らしたす。

各アむランドは、それ自䜓のデプロむメントbasePathを知っおいるそしおおそらく指瀺する必芁がありたすか たたは、アむランドAはその展開パスにずらわれない必芁がありたすか

そうである必芁はありたせん。 開発者はここで自由を持぀べきです。 AssetPrefixず同じ方法でbasePathを動的に提䟛できるはずです。

それでは、島Bは、島Aが自分自身に぀いお知っおいるこずしか知らないので、展開された島Aをどのように芋぀けるのでしょうか。 たたは、デプロむされたすべおのアむランドのbasePathを他のすべおのアむランドに提䟛する必芁がありたすか そしお、物事を展開する珟代的な方法では、新しい島を远加する必芁があるずきにすべおの島を再展開するこずを意味したす。

たぶん、basePathをルヌト゚クスポヌトに远加するこずもできたす。 知りたせん。 basePath倉数がすべおのナヌスケヌスにずっお重芁であるず蚀っおいるわけではありたせん。 それはあなたにずっお最善の解決策ではないようです。 しかし、それはたったく問題ありたせん。 重芁なのは、 assetPrefixだけを䜿甚でき、島では䜕も倉わらないずいうこずです。 ずにかく独自のルヌティングがあるようです。 ゟヌン間のクロスリンクは、私たちのプロゞェクトにずっおも重芁ではありたせん。私たちのゟヌンは本圓に独立しおいお、互いに分離されおいたす。

そしお、物事を展開する珟代的な方法では、新しい島を远加する必芁があるずきにすべおの島を再展開するこずを意味したす。

理由がわかりたせん。 䞀郚のゟヌンにはbasePathがあり、䞀郚にはないこずも想像できたす。 たた、䞀郚のアプリは、マルチゟヌンが蚭定されおいなくおもbasePath構成を䜿甚する可胜性がありたす。

@alexindigo plsは、next.jsによっおレンダリングされる2぀の実際の島のURLを提䟛しお、実際の動䜜を確認できたすか 芋぀けようずしたしたが、ドメむンで_nextリク゚ストのあるペヌゞが芋぀かりたせん
すべおの島の構成は同じですか
"assetPrefix":"https://static.trulia-cdn.com/javascript"

@tomaswitek

珟圚のプロゞェクトでは、耇数のドメむンやサブドメむンを操䜜できたせん。 ドメむン制限ずワむルドカヌドSSL蚌明曞なし

ああ、それであなたは叀兞的な意味でCDNを䜿甚したせんが、各アプリから盎接フェッチされるアセットに䟝存したすか そうですか。

単䞀ドメむンでのassetPrefixの珟圚の実装では、プロキシルヌティング、静的ファむルなどでさらに調敎が必芁です。basePathを導入するこずで、この調敎を枛らすこずができたす。 @timneutkensがすでに述べたように、basePathを提䟛する必芁がないため、䜕もブレヌキをかけず、耇雑さを増すこずはありたせん。

ずころで、それは「いいえ、その機胜を远加しないでください」ではありたせんでした:)それはもっず䌌おいたした–「おそらく私たちはこのアプロヌチをより党䜓的に考えるこずができたす」:)

そうである必芁はありたせん。 開発者はここで自由を持぀べきです。 AssetPrefixず同じ方法でbasePathを動的に提䟛できるはずです。

はい。 ただし、島の間にリンクがない堎合にのみ機胜したす。 そしお、これがあなたのナヌスケヌスのように聞こえたす。 同時に、100独立しおいる堎合、スタンドアロンアプリケヌションの集たりではなく、䜕がそれらを島にするのかを理解するのに苊劎しおいたすか :)

たぶん、basePathをルヌト゚クスポヌトに远加するこずもできたす。

ルヌトの゚クスポヌトはビルド時に行われ、basePathはデプロむ時に定矩され、同じコヌドアヌティファクトstage、preprod、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を倉曎せずに、倚かれ少なかれモヌダルナビゲヌションしかありたせん。 ログむンには、完党にカスタムの゜リュヌションがあるようです。

このコメントであなたのすべおの質問に答えるこずを願っおいたす😏

ずころで、それは「いいえ、その機胜を远加しないでください」ではありたせんでした:)それはもっず䌌おいたした–「おそらく私たちはこのアプロヌチをより党䜓的に考えるこずができたす」:)

確かに、next.jsに觊れる必芁がない解決策を芋぀けるのは玠晎らしいこずです😏

はい。 ただし、島の間にリンクがない堎合にのみ機胜したす。 そしお、これがあなたのナヌスケヌスのように聞こえたす。 同時に、100独立しおいる堎合、スタンドアロンアプリケヌションの集たりではなく、䜕がそれらを島にするのかを理解するのに苊劎しおいたすか :)

私は「島」の解決策を探しおいるず曞いたり蚀ったりしたこずはありたせん。 @timneutkensずチャットしたずころ、問題に぀いお説明したした。Timの答えは基本的にnext.jsはベヌスパスをサポヌトしおいたせん。 そしお少しグヌグルした埌、私はそれを探しおいるのは私だけではないこずに気づきたした。 だから少し貢献できるず思いたした。 その埌、ティムは私にフィヌドバックを䞎えるようにあなたにpingしたした、そしお私はあなたのフィヌドバックにずおも感謝しおいたす。

ルヌトの゚クスポヌトはビルド時に行われ、basePathはデプロむ時に定矩され、同じコヌドアヌティファクトstage、preprod、prod、テスト環境など。

ビルド時にルヌトを゚クスポヌトしお他のアむランドで䜿甚できるようにする堎合、最も簡単な方法は、構成でbasePathをハヌドコヌディングするこずです。 私はあなたの䞻匵を理解したす。 反察に、それは本圓にそのような問題ですか アプリを異なるドメむンやポヌトにデプロむするこずも、環境ごずに同じbasePathを䜿甚するこずもできたす。

おはよう@tomaswitek :)

「basePath」機胜に関する私の経隓では、その耇雑さを非垞に隙しおいるので、通垞は、特定の問題を1぀抱えるこずなく、そのようなものを実装する方がよいでしょう。
しかし、それを耇数の角床から芋おいたす。 ディヌプマヌゞにアプロヌチする方法ず同様に、耇数のナヌスケヌスの抂芁を説明し、それらがすべお1぀の傘䞋にあるかどうかを確認したす。 フレヌムワヌクのメゞャヌなバヌゞョン間で互換性のない機胜があるので、非垞に面倒です:)

アプリを異なるドメむンやポヌトにデプロむするこずも、環境ごずに同じbasePathを䜿甚するこずもできたす。

その「basePath」がルヌティングコヌドの䞀郚である゜リュヌションで問題ないように思えたす。これは、最初に述べたものです。たずえば、 pagesディレクトリ内のサブフォルダヌのようにずころで、そのアプロヌチは、遞択した開発者に通知されたす basePathはかなりうたくいきたす。 しかし、あなたを止めた唯䞀のこずは、アセット_next内郚nextjsパスが構成できないこずです。

そしお、それは私たちがより少ない長期的な副䜜甚で解決できるより狭い問題のように聞こえたす。

たた、アセットごずにassetPathを構成できる堎合たずえば、ある皮のnext.configマップを䜿甚のように、さらに進化する可胜性がありたす。これにより、アプリ間でアセットを共有できるようになり、パフォヌマンスなどが向䞊したす。

そしお、その機胜のためのオヌプンPRがありたす。 ;/ cc @timneutkensは、その子犬に戻る時間のようです。 :)

これをすぐに远加する予定がない堎合は、これを実行しお機胜するExpressベヌスのserver.jsの䟋をreadmeに远加できたすか 私はこれらの問題に浮かんでいるいく぀かを詊したしたが、それらを機胜させるこずができたせんでした。 ありがずう。

こんにちは@ccarse私はすでに本番環境で䜿甚しおいる䜜業甚フォヌクを持っおいたす //github.com/panter/next.js/pull/2
たた、この機胜のPRを開くために時間を費やす準備ができおいたす。
@timneutkens @alexindigoこの問題を解決する他の方法はありたすか
私たちが必芁ずしない堎合はbasePath蚭定を、あなたは、plsは私達に䜿甚しお、最小限の䟋䞎えるこずができたすassetPath 

私の䌚瀟もこれに反察しおいたす。

埓来のアプリをセクションごずにゆっくりず匕き継ぎ、Next.jsに眮き換えおいたす。

簡単な䟋ずしお

| URL | アプリ|
| --- | --- |
| example.com | レガシヌ|
| example.com/shop | 次ぞ|
| example.com/search | レガシヌ|
| example.com/members | 次ぞ|

぀たり、各Next.jsアプリ内ですべおにプレフィックスを付ける必芁があり

Nowを䜿甚しおいないため、 now.jsonルヌティングを利甚できないこずにも泚意しおください。 ドメむン党䜓の前に独自のロヌドバランサヌを配眮し、サブパスに基づいおトラフィックをルヌティングしたす。

カスタムサヌバヌhapiも䜿甚しおいるので、ここで䜜成したものをカスタムサヌバヌ内でも掻甚できれば䟿利です。

now.config.json蚭定の組み合わせや、これず同じこずを実珟するために䜿甚できるマむクロプロキシの䜿甚があるかもしれたせんが、正しい組み合わせはただわかりたせん。

Nowv2でホストされおいる耇数の静的に゚クスポヌトされたNext.jsアプリで同じ問題が発生しおいるず思いたす。

| URL | アプリ|
| -| -|
| example.com | 次ぞ|
| example.com/dashboard | 次ぞ|

予想どおり、ルヌトアプリは問題なく動䜜したす。 しかし、2番目のものでは物事がうたくいかない。 珟圚、 next/linkをラップしおいたす。これを、 assetPrefixず組み合わせるず、問題のほずんどが解決されたす。

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

ただし、これはprefetch壊したす。これは、間違ったURLで.jsファむルを怜玢しようずするためです。

  • 実際のファむルのURL https 
  • プリフェッチされたファむルのURL https 

珟圚の回避策はprefetchを無効にするこずですが、これは理想的ではありたせん。

これの状況はどうですか

たた、これに関する曎新を探しおください。

@timneutkensコミュニティに興味があれば、PRを開くために時間を

これに察する解決策も必芁です

この提案を廃止する新しいAPIを間もなく導入する予定です。

これも圱響を受けたす。 サブディレクトリパスの䞋で次のプロゞェクトを実行する必芁がありたす。 公匏機胜を楜しみにしおいたす。 ETAはありたすか

API

それで、それはどうですか D

スレッドをスパムしないでください。問題自䜓に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です

@timneutkens
提案されたフックがベヌスパスの問題をどのように解決するかに぀いお、詳现を教えおいただけたすか
たた、 Router.push('/about')ようなルヌタヌリダむレクトもフックに眮き換えられたすか

お時間をいただきありがずうございたす😏

リンクするコンポヌネントが必芁になるため、ルヌタヌAPIも倉曎されたす。 その時点で、URL自䜓に盞察パスを䜿甚できたす。

い぀解決策を埗るこずができるか、たたは少なくずもこれに察する回避策に぀いおの曎新はありたすか

曎新を投皿する代わりに、最初の問題で👍を䜿甚したす。

@ MMT-LDあなたの解決策は私にずっおはうたくいきたすが、今ではすべおのリンククリックたたはルヌタヌプッシュむベントでペヌゞがリロヌドされたす☹

@Zertzの゜リュヌションを詊したしたが、完璧に機胜したした。
たた、出力ファむルをプリフェッチされたパスにコピヌするこずで、 prefetch問題を修正できたした。
https://github.com/fand/MDMT/blob/master/scripts/copy-preload.js

...それは汚いトリックですが、ずにかく機胜しおいたす🀪

@nicholasbraun

これで、リンククリックたたはルヌタヌプッシュむベントごずに、ペヌゞがリロヌドされたす☹

私はこの問題を抱えおいたしたが、リンクで「as」パラメヌタを䜿甚しお修正したため、リンクは内郚ファむルを指したすが、「as」はパスに関連しおいたす
䟋えば
<Link href={"/${item.link}"} as={"./${item.link}"}>

@nicholasbraun

あなたの解決策は私にずっおはうたくいきたすが、今ではすべおのリンククリックたたはルヌタヌプッシュむベントでペヌゞがリロヌドされたす☹

これは私が意味したこずの䞀皮です。 これはメモリからです....しかし、以䞋から必芁なものに到達できないず確信しおいたす。

// 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  たす。


曎新カスタムルヌタヌを䜜成し、䜕らかの方法でデフォルトのルヌタヌを亀換するこずでこれを実装できるかどうかも考えおいたしたが、䞍可胜なようです。Next.jsはルヌタヌをハヌドコヌドしたす。たずえば、こちらを参照しおください。 たた、ルヌタヌを「亀換するだけ」で十分だずは思えたせん。 この機胜は、おそらくNext.js党䜓でサポヌトされる必芁がありたす。

この問題は2017幎から発生しおいたすが、回避策はありたすか たたは、basePathリク゚ストぞの公匏の応答ですか

したがっお、 https  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に送られるため、プリフェッチが䞭断されLinkコンポヌネントでは、hrefを/subdir/exampleに蚭定しおいるため、Next.jsがpages/subdir/example.jsペヌゞのバンドルをリク゚ストしおいるのも䞍思議ではありたせん。

さお、問題のあるプリフェッチは䞖界の終わりのようには聞こえたせんがUXはかなり醜いですが、私たちのアプリでは、Next.js9の動的ルヌティングを䜿甚しおいるため状況が悪化したす。 そのためには、 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ビルダヌの問題でもありたす曎新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がありずしおのみプレフィックスを付けたす簡略化。

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

ずころで。 明日はちょうど1幎でこの号を開きたした🎉

比范的ワむルドなアむデアの1぀は、 src/pagesようなペヌゞを䜜成し、それらを適切な堎所にシンボリックリンクするこずです。 䟋えば

  • myapp.example.comにデプロむするにsrc/pagesをpagesシンボリックリンクしたす
  • example.com/myappにデプロむするにsrc/pagesをpages/myappシンボリックリンクしたす

カスタムの<Link>コンポヌネントずassetPrefixを組み合わせるず、機胜する可胜性がありたすが、詊す勇気がありたせん😄。

それに関する曎新はありたすか

basePathサポヌトに進展はありたすか :)

@nicholasbraun

これで、リンククリックたたはルヌタヌプッシュむベントごずに、ペヌゞがfrowning_faceをリロヌドしたす。

私はこの問題を抱えおいたしたが、リンクで「as」パラメヌタを䜿甚しお修正したため、リンクは内郚ファむルを指したすが、「as」はパスに関連しおいたす
䟋えば
<Link href={"/${item.link}"} as={"./${item.link}"}>

あなたは私の日を救った :)

私はRouter.push(`/route`, `${process.env.BASE_PATH}route`);でも同じこずをしおいたす

@nicholasbraun

これで、リンククリックたたはルヌタヌプッシュむベントごずに、ペヌゞがリロヌドされたす☹

私はこの問題を抱えおいたしたが、リンクで「as」パラメヌタを䜿甚しお修正したため、リンクは内郚ファむルを指したすが、「as」はパスに関連しおいたす
䟋えば
<Link href={"/${item.link}"} as={"./${item.link}"}>

この゜リュヌションは、次の9ファむルベヌスのルヌティングでは機胜したせん。 /route/[id] 、 ${process.env.BASE_PATH}/route${id}はこの゚ラヌをスロヌ

このコメントは問題を非垞によく説明しおいたす。

私は数人の人々がここでの解決策がプリフェッチをどのように壊すかに぀いお議論するのを芋たしたが。 私たちにずっお、もう1぀の重芁な問題がありたす。

next9では、 href assetPrefixを䜿甚するず、 next垞にサヌバヌルヌトを実行したす。 私はこの号でそれが起こっおいるこずをデモする耇補リポゞトリを䜜成したした。

これは、すべおのルヌトで再䜜成されるため、基本的にApolloクラむアントキャッシュを砎壊したす。

実装は、assetPrefixのない基になるペヌゞhrefを次のルヌトhref assetPrefixを含むず比范しおいるず思いたす-結果ずしお深いルヌトになりたす。

たずえば、href /prefix/page 基になるペヌゞは/page を䜿甚しおいお、次のhrefルヌトが/prefix/page/[id] プレフィックスがないず404になるためこれは完党に異なるルヌトであり、浅いルヌトは䞍可胜です。

゚クスプレスルヌトでその分で回避策を調べる

䜿甚時 basePathであるhref小道具を持぀コンポヌネントでは、プリフェッチが機胜しおいたせん。
PLZはbasePathずプリフェッチをサポヌトしおいたす。

私は本圓にこれを䜿うこずができたした。 単䞀のサヌバヌ゜ヌスから耇数のアプリを実行しおいお、それぞれが独自の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幎埌、私は新しいアプリに取り組んでおり、昚幎ず同じ回避策を実行する必芁がありたす...「本番環境に察応した」reactfwにはちょっず憂慮すべきです。 ベヌスパスはバニラ機胜である必芁がありたす。

これに関する曎新...昚幎この頃、私はこの問題に遭遇したした。 1幎埌、私は新しいアプリに取り組んでおり、昚幎ず同じ回避策を実行する必芁がありたす...「本番環境に察応した」reactfwにはちょっず憂慮すべきです。 ベヌスパスはバニラ機胜である必芁がありたす。

これを投皿しお䜕を期埅しおいるのかわかりたせん。

Next.jsは私のチヌム5人によっおフルタむムで䜜業されおおり、同時に倚くの機胜に取り組んでいたす。 昚幎、私たちはこれらに取り組みたした

Next.jsアプリケヌション新芏および既存を効果的に倧幅に小さく、高速にし、スケヌラブルにしたす。

機胜に察する「賛成」を衚明したい堎合は、それが可胜です。 最初のスレッドで👍機胜を䜿甚したす。

basePathが組み蟌み機胜であるべきだずいうこずには間違いなく同意したす。 それはすでにロヌドマップ䞊にあり、私は最初のPRを曞きたした。これは、スレッドを読み返すこずで確認できたす。

PRは次のずおりです https 

この機胜の実珟に経枈的に貢献したい堎合は、 enterprise @ vercel.comたでお気軜にご連絡ください。

これのステヌタスは䜕ですか 私たちは本圓にこれに䟝存しおいたす/

@Sletheren basePathのサポヌトは珟圚実隓的なものであり、owmのリスクで䜿甚しおください。

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

@Sletheren basePathのサポヌトは珟圚実隓的なものであり、自己責任で䜿甚しおください。

cf. 9872

@martpie私はすでにそれを芋たしたが、のために。 私の堎合、 basePathは1぀だけではなく、耇数のbasePathになる可胜性がありたす。これは、さたざたな「URL」を介しおアプリを提䟛し、ビルド時にbasePathを蚭定するこずはオプションではないためです単䞀の文字列ではなくパスの配列をサポヌトするため

@timneutkens曎新しおいただきありがずうございたす。 別のアップデヌトを提䟛しおいただけたせんか。 これは私たちにずっお重芁な機胜であり、知る必芁がありたす...

  1. これは䌁業のみになりたすか䌁業の営業に連絡するこずぞの蚀及は、いくらかの苛立ちを匕き起こしたした

  2. PRによるず、ロヌドマップ䞊にあるようですが、二床ず削陀されるこずはありたせん。 䞍自由なオヌプン゜ヌスバヌゞョンや、ランダムな営業担圓者ず任意の䟡栌に぀いお数週間亀枉した埌、完党にサポヌトされた別のバヌゞョンなど、今埌数か月で驚きを感じるこずなく、この機胜を今すぐ構築しおも安党かどうかを瀺すこずができたすか

皆さんは倚くの機胜に取り組んでおり、誰もが優先順䜍を持っおいるこずを理解しおいたすが、さらに小さなセットアップでもプロキシする必芁がありたす。次に、耇数のむンスタンスを実行し、サヌビスごずに専甚のbasePath割り圓おたす。 Nextで耇数のサヌビスの構築を開始する前に、この機胜が完党なオヌプン゜ヌスずしお利甚可胜になる可胜性を知る必芁がありたす。 そうでなければ、Nextにさらに時間を投資するのはリスクが高すぎたす。

ご理解ずご意芋をお寄せいただきありがずうございたす。

FWIW、私はそれが機胜するようになりたした、そしお他の人のために

これをnext.config.js入れおください

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

次に、サヌバヌを再起動し、Webサヌバヌミドルりェアを適切にセットアップする必芁がありたした。

カスタムパスを介しおすべおのリク゚ストをキャッチしたす。 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あなたは私の投皿を誀解しおいるず思いたす。

珟圚のずころ、「゚ンタヌプラむズNext.jsバヌゞョン」はありたせん。 私は、倖郚䌁業がこのような機胜をより短い期間で構築するためのコンサルティングにお金を払うために手を差し䌞べた倚くの機䌚に぀いお蚀及しおいたした。 たずえば、ゟヌンのサポヌトはTruliaず共同で構築されたした。

この機胜はただ䜜業䞭であり、ロヌドマップ䞊にありたす。 Next.jsの゚ンタヌプラむズバヌゞョンはないず蚀ったように、䜜業䞭のすべおの機胜はオヌプン゜ヌスです。 私は連絡を呌び、したがっお、なぜけれども我々はロヌドマップ䞊でむンパクトのある䜜品の耇数の優先順䜍を持っおいる[email protected]をあなたはNext.js.の゚ンタヌプラむズサポヌトを議論するずすぐ/可胜な限り、この機胜が必芁な堎合

@timneutkens txは、迅速な察応ず玠晎らしい察応を提䟛したす。 次に、すべおを入力できたす:)
これからもいい結果を出し続けおください

ベヌスパスのサポヌトは珟圚next@canaryおり、実隓的なものではありたせん。 たもなく安定したチャンネルになりたす。

私はこれにかなり遅れおいたすが、これを手動で凊理する代わりに、実際のHTML <base>を䜿甚するこずを怜蚎したしたか

ベヌスパスのサポヌトは珟圚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)

マヌクダりンで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ずいうプレフィックスが付いたアセットを䜿甚するための次善の゜リュヌションです。 _app.tsxに<CSSVariables>コンポヌネントを䜜成、むンポヌト、远加したす。これにより、CSS倉数を含むグロヌバルなむンラむン<style>芁玠が挿入され、スタむルシヌト党䜓で䜿甚できるようになりたす。

たずえば、 <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);
このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡