Next.js: 最終的にページをレンダリングする前に、カスタムルート `post /` id`が404を点滅します。

同じ問題+1

リンクコンポーネントをそのURLにどのようにレンダリングしていますか？ <Link href="/post/1">または<Link href="/post?id=1" as="/post/1">ますか？

現在、私は<Link prefetch href={ / blog / } />ます。 過去に<Link prefetch href={ / blog / } as={ /blog/${x.id} } />を試しましたが、もう一度接続しました。 まだ同じ問題があります。

あなたのhrefとas小道具は、同じであってはなりませんhrefあなたが持っている場合は、実際のURLであるpages/blog.jsして、クエリとしてIDを受け取りますhrefは/blog?id=${x.id} href必要があり、 asは、この場合は/blog/${x.id}かなりカスタムなURLです。

@sergiodxaこのコードを配置しました。

<Link href={`/blog?id=${x.id}`} as={`blog/${x.id}`}>
    <a>Read Post</a>
 </Link>

これで、URLにidを追加しながら、クリックするたびに/blogページが再レンダリングされます。

@tgrecojsこのコードスニペットがお役に立て

    const href = `/journal?home=${this.state.article.path[0]}&articlePath=${this.state.article.path[1]}&file=${this.state.article.path[2]}`
    const as = `/journal/${this.state.article.path[0]}/${this.state.article.path[1]}/${this.state.article.path[2]}`

https://www.someURL.com/journal/articlePath/morePath/evenMorePathとしてレンダリングされます

パスがどのように機能するかを理解しています@ugiacomanそれは私の問題ではありません。 私の最初のレポートで見ることができるなら、私は各ブログ投稿にうまくナビゲートしていますが、問題はその奇妙な404エラーです。

@tgrecojsサンプルリポジトリhttps://github.com/sergiodxa/next-custom-query （デプロイ済み：https： //next-custom-query.now.sh/blog）を作成しました。ここで、使用方法を確認できます。再読み込みなしのカスタムURLと、上記のnext/linkコンポーネントを使用した404。

@sergiodxaありがとうございます！ 私はちょうどそれをチェックアウトし、私が現在pingしているものであるグーグルブロガーAPIにいくつかの非同期呼び出しを追加しました。 以下に、ルートへの移動方法を示しますが、データが正しく読み込まれていません。

gifを削除しました

現在、この問題は、私の最初のコメントに示されているものとは少し異なるこの問題の複製です。 私が最初にこの問題に遭遇したとき、それは私がreduxを使用していて、アプリケーションの状態がpost/idページを引き継いでいないためだと思いました。 これにより、作成したアプリに統合したのと同じように、投稿ごとに新しいAPI呼び出しを統合することになりましたが、それでも同じ問題が発生していることがわかりました。

私はあなたのリポジトリをフォークするのにいくつかの問題に遭遇していました😬あなたはここで私のコードを見つけることができます-> https://github.com/tgrecojs/next-custom-query-async 。 あなたが考えていることを私に知らせてください！ 😄

プロジェクトをフォークすると、usageLimitsエラーメッセージで同じエラーが発生するので、400を取得しているようです。 それがおそらくあなたがそのエラーを受け取っている理由です。

Ok。 明日もう少し調査しますが、問題を開いたときに投稿した動画が/blog/:idルートでAPIリクエストを行っていないことを指摘したいと思います。 代わりに、 /blogルート遷移で収集されたreduxストアからの投稿をフィルタリングしているため、この問題に到達した理由にはなりませんでした。 reduxストアと関係があると思ったので2番目のAPI呼び出し（ blog/:id内で行われた）のみを実装しましたが、同じエラーが発生しましたが、それは私のコードの現在の実装ではありません。

同じバグが発生したことに気づいたらすぐに、API呼び出しを1つだけ使用するように切り替え（ /blog ）、必要なブログ投稿をIDでフィルタリングしました。

@sergiodxa使用制限ではないことを確認できます。 idが常に/blog/:idルートに正しく渡されるとは限らないことがわかります...受け取った400エラーを添付しました。 idが未定義であり、（この場合）エラーが発生するのはそのためと思われます。

以下に別のビデオを含めました。 なぜそれがこのように振る舞うのかについて何か考えはありますか？ このリポジトリ内の<Link />タグを変更していませんが、まだ問題があります😬。

繰り返しになりますが、上のビデオは、作成したサンプルリポジトリ（ https://github.com/sergiodxa/next-custom-query）内でエラーを再現していることを示してい

また、カスタムルートなしで404が点滅します。 次のコードを使用して、 pages/内のorders.jsというファイルを作成します。

import { Component } from 'react';

class Orders extends Component {
  render() {
    return (
      <div>
        <h2>My Orders</h2>
      </div>
    )
  }
}

export default Orders;

かなり重大な問題のようです😅

私はそれを複製しようとしましたが、URLの末尾にスラッシュがあるため、 /orders移動すると、404は表示されませんが、 /orders/ 、次のように表示されます。コンテンツの前に404が点滅します。これは、開発モードと本番モードのいずれかで発生します。

ああ、これは既知の問題です。 https://github.com/zeit/next.js/issues/1189

末尾のスラッシュが原因で問題が発生しなかったので、何か他のものが必要ですよね？

コードにいくつかの変更を加え、2つの異なるバージョンをデプロイしました。1つはprefetchを使用し、もう1つは使用しません。 どちらのアプリケーションもpost/:idルートを正常にロードできないことに注意してください。

プリフェッチあり-https ：//tgrecojs-hltqztsjpx.now.sh/

リンクでprefetchを使用すると、各ブログ投稿のリンクをレンダリングするときにPage Does Not Exist Errorスローされることに気づきました。 以下に私のコンソールのスクリーンショットを見ることができます。

プリフェッチなし-https ：//tgrecojs-qzpspdjrin.now.sh/

プリフェッチを使用しない場合、上記のエラーは発生しなくなりますが、アプリケーションはレンダリングされません。 この問題を最初に投稿したとき、私のコンポーネントはpost/:idコンポーネントごとにブログを初期化していた。 それ以来、個々の投稿がレンダリングされることはありません。

この問題の診断に役立つ情報をさらに提供できるかどうか教えてください。 🤔

@tgrecojs私はほぼ同じ問題を抱えています。 prefetchは私の問題を解決しません

私が得る振る舞いは次のとおりです：

• ユーザーがリンクをクリックします
• 404エラーが表示されます
• ページがリロードされます（??）
• リロード後、正しいページが表示されます

これが問題のデバッグに役立つことを願っています！

追加情報：ノードv6.10.3 、Chrome Version 60.0.3112.90

編集：あなたたちがそれをテストできるようにアプリをデプロイしましたhttps://datahub.now.sh/ 、それはこの振る舞いをするリンク/ @ [username]です

@ Theo-そのnext / linkのhrefはuser?id=1 、代わりに/user?id=1を試すことができますか？ 私はNext.jsがに取得しようとしているので、404だと思う/current/path/user?id=1の代わりに/user?id=1が、ページをリロードしたときにそれが正常に動作しますので、サーバのレンダリング。

それをした

@tgrecojs同じ点滅404の動作がありました。 私の場合、クライアントでは機能しなかった環境変数、つまり404とのリンクがありましたが、サーバーでは機能していました。 https://medium.com/the-tech-bench/next-js-environment-variables-d2f6ea1a1dcaで解決しました

@andreaskeller hmmmok私はそれをチェックします。 ありがとうございます!!! 現在、アプリがサーバーレンダリングの場合にのみ、.env変数を使用しています。 dotenvを使用してCSRまたはSSRを確認する高次コンポーネントがあります。それがSSRの場合は、ブログ投稿をログに記録するために必要な関数をディスパッチします。

ええ、私はすでに変数を正常に機能させています。 BLOGGER_API_KEYを取得するHOCを使用して/blogルートをレンダリングしているので、これらの例で機能しています...私の/post/:idの子ページは何も使用していません環境変数。

もう少し掘り下げるつもりです、うまくいけば私はそれの底に達することができます！

ここでの問題のほとんどは修正されているようです。 この問題にも取り組みますhttps://github.com/zeit/next.js/issues/1189

これを閉じます。 しかし、コアで何かをする必要がある場合は、私に知らせてください。

@sergiodxa昨夜の会話によると、私は自分の問題を示す

• 次へ-ブログブランチ404-エラー

修正されていません。

私は同じ問題を抱えていますが、カスタムルートがありません。 /pages/pipeline.tsxがあり、/ pipeline /が404を点滅している間、/ pipeline urlは問題なく機能し、「getInitialProps」を呼び出さずにページを読み込もうとします（サーバー上では404だったためです）。

@ ex3ndrこれで問題が解決するかどうかは
https://github.com/zeit/next.js#disabling -file-system-routing

次に、カスタムルートがヒットする前にfileSystemをプルしようとする可能性があります。

@moaxaca独自のカスタムルーティングが必要だったので、同じ方法で解決しました。次のルーティングを完全に無効にしました。

この問題も発生しています。 @moaxacaのソリューションは私にはうまくLinkコンポーネントを使用することpushRouteメソッドを使用することを選択しました。

基本的な例：

import { connect } from 'react-redux'
import { Router } from '../routes'

// ----

export default class Link extends React.Component {

  handleClick(evt, url) {
    evt.preventDefault()    
    Router.pushRoute(url)
  }

  render() {
    const { url, title } = this.props

    return (
      <a href={ url} onClick={ (evt) => this.handleClick(evt, url) }>{title}</a>
    )
  }

}

これはそれを理解しているようで、エラーが点滅していません。 しかし、それは少し手っ取り早い感じがします。

問題を保存

以前に同じ問題が発生し、解決することができました。 Expressサーバーのセットアップを使用しています。 正しいページにロードする前に404ページが点滅する理由は、ページスラッグがコンポーネント名と一致しないためであることがわかりました。

このコードがあると、404が点滅します。

server.get('/search', (req, res) => {
    const actualPage = '/search_results'
    const queryParams = { filters: req.query }
    app.render(req, res, actualPage, queryParams)
  })

/searchと私のactualPage値が異なることに注意してください。

コンポーネントとactualPage値を、 searchあるページスラッグと同じに変更すると、404フラッシュが消えます。 以下の作業コードを参照してください。

server.get('/search', (req, res) => {
    const actualPage = '/search'
    const queryParams = { filters: req.query }
    app.render(req, res, actualPage, queryParams)
  })

現在、両方とも/searchます。

私の英語の人に申し訳ありません。

next.config.js useFileSystemPublicRoutesプロパティを確認することをお勧めします。 falseの場合は、server.jsですべてのルートハンドラーを自分で定義する必要があることを意味します。

これにより、点滅する404が修正されます。

リンク

<Link href="/somepage?id=value" as="/somepage/value">

サーバ側

server.get("/somepage/:id", (req, res) => {
  return app.render(req, res, "/maps", { id: req.params.id })
})

ページのパラメータにアクセス

const { id } = this.props.url.query

だから、これに一度だけ答えるには：

href => pagesディレクトリ内のパス+クエリ文字列
as =>ブラウザのURLバーに表示

例：

/products/:idというURLがあります

1. pages/product.js作成しました

export default class extends React.Component {
  static async getInitialProps({query}) {
    console.log('SLUG', query.slug)
    return {}
  }
  render() {
    return <h1>The product page</h1>
  }
}

1. Expressまたはその他のサーバーへのルートを追加します。これはSSR専用です。 これは何がどうなると、URLのルートである/products/:idにpages/product.jsおよび提供idの一環として、 query getInitialPropsで：

server.get("/products/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

1. クライアント側のルーティングでは、次のようにnext/linkを使用します。

<Link href="/product?slug=something" as="/products/something"> 

hrefとasを明示的に指定する必要がある理由は、Next.jsがクライアント側の他のページを認識しないためです。 すべてのページのマニフェストをクライアント側に送信するわけではなく、後続のルートは遅延読み込みされます。これはスケーラブルです。

すべてのルートの事前定義されたマニフェストを送信することにより、 hrefとas提供を抽象化するコミュニティパッケージがあります。これを行わないため、すべての可能なルートの完全なマニフェストを送信しないことをお勧めします。よりスケーラブルです

https://github.com/fridays/next-routes

また、レンダリング404はNext.jsのデフォルトの動作ではなくなったことにも注意してください。 代わりに、ゾーン機能のページをリロードします。

ティムに感謝します、完全に明確な説明！

@timneutkens
リンクのhrefとasの場合。 別の値を渡します。 hrefの値とasの値を取得するにはどうすればよいですか。
デモをテストします。 req.params.slugはasの値になると思います。 次に、どうすればhrefの値を取得できますか。

@timneutkensあなたは私を救った私の問題を何時間苦労して検索したかわからない：D

リンクコンポーネントをそのURLにどのようにレンダリングしていますか？ <Link href="/post/1">または<Link href="/post?id=1" as="/post/1">ますか？

これをドキュメントに入れる必要があります。 ：喜び：

@sergiodxa

だから、これに一度だけ答えるには：

href => pagesディレクトリ内のパス+クエリ文字列
as =>ブラウザのURLバーに表示

例：

/products/:idというURLがあります

1. pages/product.js作成しました

export default class extends React.Component {
  static async getInitialProps({query}) {
    console.log('SLUG', query.slug)
    return {}
  }
  render() {
    return <h1>The product page</h1>
  }
}

1. Expressまたはその他のサーバーへのルートを追加します。これはSSRの場合のみです。 これは何がどうなると、URLのルートである/products/:idにpages/product.jsおよび提供idの一環として、 query getInitialPropsで：

server.get("/products/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

1. クライアント側のルーティングでは、次のようにnext/linkを使用します。

<Link href="/product?slug=something" as="/products/something"> 

hrefとasを明示的に指定する必要がある理由は、Next.jsがクライアント側の他のページを認識しないためです。 すべてのページのマニフェストをクライアント側に送信するわけではなく、後続のルートは遅延読み込みされます。これはスケーラブルです。

すべてのルートの事前定義されたマニフェストを送信することにより、 hrefとas提供を抽象化するコミュニティパッケージがあります。これを行わないため、すべての可能なルートの完全なマニフェストを送信しないことをお勧めします。よりスケーラブルです

https://github.com/fridays/next-routes

また、レンダリング404はNext.jsのデフォルトの動作ではなくなったことにも注意してください。 代わりに、ゾーン機能のページをリロードします。

次のようなリストヘッダーの配列しかない場合にできること：
[ home: '/home', about:'/about', post: 'post/:post_id?' ] 。
次に、 as's値しか取得しませんが、 hrefどうですか？ ありがとう

あなたは何を使っている場合はrouter.push()ではなく<Link>どのようにあなたが同じ結果を得ることができますか？

@justinmchase私はちょうど同じ問題を抱えていました。 まだ行っていない場合は、次のルーターのドキュメントを確認してください。

あなたはそれをRouter.push(url, as, options)として使うことができます：

Router.push('/post/[pid]', '/post/abc')

@timneutkens ZEIT.nowでnext.jsアプリをホストしたいのですが、Expressサーバーを実行するオプションがありません。 私は今私のきれいなURLを失い、 param=value&param=valueしか実行できませんか、それとも別の方法がありますか？ セルジオが投稿した例は有望に見えません

動的ルートを試しましたが、シングルページアプリケーションが壊れて、次のようなリンクが表示されます。

<Link href={`/integration?slug=${slug}`} as={`/integration/${slug}`}>

http：// localhost ：8080 / _next / static / development / pages / Integration.jsが404not foundを返すため、ページ全体がリロードされるようになりました。

@timneutkens ZEIT.nowでnext.jsアプリをホストしたいのですが、Expressサーバーを実行するオプションがありません。 私は今私のきれいなURLを失い、 param=value&param=valueしか実行できませんか、それとも別の方法がありますか？ セルジオが投稿した例は有望に見えません

動的ルート用のカスタムサーバーは必要ありません。https：//nextjs.org/docs/routing/dynamic-routesを参照して

@timneutkens迅速な返信ありがとうございます。動的ルートを試しましたが、シングルページアプリケーションが壊れます（更新を参照）。 開発モードのpackage.jsonスクリプトでnextしてローカルで実行しています。

コードでpages/integration/index.jsし、次のコードでpages/integration/[slug].jsして、問題を解決しました。

import ProductDetailPage from './index'
export default ProductDetailPage

概説したことを行う正しい方法は、 pages/integration/[slug].jsを作成することです。

そして、次のようにリンクします。

<Link href={`/integration/[slug]`} as={`/integration/${slug}`}>

こんにちは私がこれを呼ぶときなぜ私は尋ねることができます

Router.push( '/about?id=1234','/about')

IDを取得できず、使用しているページは[... index] .jsです。これはマルチダイナミックキャッチオールページですが、ダイナミックではない他のページに移動すると、car.jsの例で正しく機能します。 Vehicle.jsにプッシュします。
ダイナミックキャッチオールページにプッシュしてIDをマスクし、それでも取得できるより良い方法はありますか？