Next.js: Rute kustom `post/`id` mem-flash 404 sebelum akhirnya merender halaman.

Masalah yang sama +1

Bagaimana Anda merender komponen Tautan ke url itu? Apakah Anda menggunakan <Link href="/post/1"> atau <Link href="/post?id=1" as="/post/1"> ?

Saat ini, saya menggunakan <Link prefetch href={ /blog/${x.id} } /> . Saya sudah mencoba <Link prefetch href={ /blog/${x.id} } as={ /blog/${x.id} } /> di masa lalu dan baru saja memasangnya kembali. Masih memiliki masalah yang sama.

href dan as props Anda tidak boleh sama, href adalah url asli, jika Anda memiliki pages/blog.js dan menerima id sebagai kueri maka href harus /blog?id=${x.id} dan as adalah url kustom cantik Anda dalam hal ini /blog/${x.id} .

@sergiodxa Saya baru saja meletakkan kode ini.

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

Sekarang ia merender ulang halaman /blog pada setiap klik sambil menambahkan id ke URL.

@tgrecojs Semoga cuplikan kode ini membantu

    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]}`

Akan dirender sebagai https://www.someURL.com/journal/articlePath/morePath/evenMorePath

Saya mengerti cara kerja jalur @ugiacoman itu bukan masalah saya. Jika Anda dapat melihat di laporan awal saya, saya berhasil menavigasi ke setiap posting blog namun masalahnya adalah kesalahan 404 yang aneh.

@tgrecojs Saya membuat contoh repo https://github.com/sergiodxa/next-custom-query (dikerahkan: https://next-custom-query.now.sh/blog), di sana Anda dapat melihat cara menggunakan url khusus tanpa memuat ulang dan 404 menggunakan komponen next/link seperti yang dijelaskan di atas.

@sergiodxa Saya menghargai itu! Saya baru saja memeriksanya dan menambahkan beberapa panggilan async ke google blogger API yang saat ini saya ping. Di bawah, Anda dapat melihat bagaimana navigasi ke rute tetapi tidak memuat data dengan benar.

GIF yang dihapus

Sekarang masalah ini adalah reproduksi yang sedikit berbeda dari masalah ini dari apa yang ditunjukkan dalam komentar pertama saya. Ketika saya pertama kali mengalami masalah ini, saya pikir itu karena saya menggunakan redux dan status aplikasi tidak membawa halaman post/id . Ini membuat saya mengintegrasikan panggilan API baru untuk setiap posting, sama seperti saya terintegrasi dalam aplikasi yang Anda buat, namun saya masih menemukan bahwa saya memiliki masalah yang sama.

Saya mengalami masalah saat melakukan forking repo Anda sehingga Anda dapat menemukan kode saya di sini -> https://github.com/tgrecojs/next-custom-query-async . Beri tahu saya pendapat Anda! 😄

Sepertinya Anda mendapatkan 400, ketika melakukan forking proyek Anda, saya mendapatkan kesalahan yang sama dengan pesan kesalahan UsageLimits. Itu mungkin mengapa Anda mendapatkan kesalahan itu.

Oke. Saya akan menyelidiki sedikit lebih jauh besok tetapi saya ingin menunjukkan bahwa video yang saya posting saat membuka masalah tidak membuat permintaan API pada rute /blog/:id . Alih-alih, ini memfilter posting dari toko redux saya yang dikumpulkan pada transisi rute /blog sehingga tidak bisa menjadi alasan saya sampai pada masalah ini. Saya hanya mengimplementasikan panggilan API ke-2 (dibuat di dalam blog/:id ) karena saya pikir itu ada hubungannya dengan redux-store saya tetapi mendapati diri saya menerima kesalahan yang sama tetapi itu bukan implementasi saat ini dalam kode saya.

Segera setelah saya menyadari bahwa itu melemparkan bug yang sama, saya beralih kembali untuk menggunakan hanya satu panggilan API (Di dalam /blog ) dan kemudian memfilter posting blog yang diperlukan dengan id.

@sergiodxa Saya dapat mengonfirmasi bahwa itu bukan batas penggunaan. Anda akan melihat bahwa id tidak selalu diteruskan dengan benar ke rute /blog/:id ... Saya telah melampirkan kesalahan 400 yang saya terima. Anda akan melihat bahwa id tidak terdefinisi dan (dalam hal ini) tampaknya itulah mengapa saya mendapatkan kesalahan.

Saya telah menyertakan video lain di bawah ini. Adakah pemikiran mengapa ia berperilaku seperti ini? Saya belum mengubah tag <Link /> di dalam repositori ini namun masih mengalami masalah .

Sekali lagi, saya ingin menunjukkan bahwa video di atas menunjukkan saya mereproduksi kesalahan di dalam contoh repo yang Anda buat - https://github.com/sergiodxa/next-custom-query .

Saya juga mendapatkan 404 flashing tanpa rute khusus. Hanya file bernama orders.js di pages/ dengan kode ini:

import { Component } from 'react';

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

export default Orders;

Sepertinya masalah yang cukup kritis

Saya mencoba mereplikasinya dan karena garis miring di akhir URL, jika Anda pergi ke /orders Anda tidak melihat 404 tetapi jika Anda pergi ke /orders/ maka Anda melihatnya 404 berkedip sebelum konten, ini terjadi baik dalam mode dev dan produksi.

Ah ini adalah masalah yang diketahui. https://github.com/zeit/next.js/issues/1189

Masalah saya tidak muncul karena garis miring jadi pasti ada sesuatu yang lain, kan?

Saya telah membuat beberapa perubahan pada kode saya dan saya telah menerapkan 2 versi berbeda, satu menggunakan prefetch dan yang lainnya tidak. Saya ingin mencatat bahwa sekarang tidak ada aplikasi yang berhasil memuat rute post/:id .

Dengan Prefetch - https://tgrecojs-hltqztsjpx.now.sh/

Seseorang memperhatikan bahwa ketika saya menggunakan prefetch di tautan, sekarang ia mengeluarkan Page Does Not Exist Error saat merender tautan untuk setiap posting blog. Anda dapat melihat tangkapan layar konsol saya di bawah ini.

Tanpa Prefetch- https://tgrecojs-qzpspdjrin.now.sh/

Ketika saya tidak menggunakan prefetch, kesalahan yang ditunjukkan di atas tidak ada lagi tetapi tidak membuat aplikasi. Ketika saya pertama kali memposting masalah ini, komponen saya menginisialisasi blog saya untuk setiap komponen post/:id . Sejak itu saya telah menghapusnya sejak sekarang setiap posting tidak pernah dirender.

Beri tahu saya jika saya dapat memberikan info lebih lanjut yang dapat membantu mendiagnosis masalah ini. 🤔

@tgrecojs Saya memiliki masalah yang hampir sama persis. prefetch tidak menyelesaikan masalah saya.

Perilaku yang saya dapatkan adalah sebagai berikut:

• Pengguna mengklik tautan
• Kesalahan 404 muncul
• Halaman dimuat ulang (??)
• Setelah memuat ulang, halaman yang benar ditampilkan

Saya harap ini dapat membantu men-debug masalah!

Info tambahan: Node v6.10.3 , Chrome Version 60.0.3112.90

EDIT: Menyebarkan aplikasi sehingga kalian dapat mengujinya https://datahub.now.sh/ , tautan /@[nama pengguna] yang memiliki perilaku ini

@Theo- href di tautan berikutnya/itu adalah user?id=1 , dapatkah Anda mencoba /user?id=1 sebagai gantinya? Saya pikir 404 adalah karena Next.js mencoba untuk mendapatkan /current/path/user?id=1 bukannya /user?id=1 , tetapi ketika halaman memuat ulang itu berfungsi dengan baik karena server dirender.

@sergiodxa yang melakukannya. Terima kasih!

@tgrecojs Saya memiliki perilaku 404 yang sama. Dalam kasus saya, saya memiliki tautan dengan variabel lingkungan yang tidak berfungsi pada klien, oleh karena itu 404 tetapi di server, itu berhasil. Selesaikan dengan https://medium.com/the-tech-bench/next-js-environment-variables-d2f6ea1a1dca.

@andreaskeller hmmm ok saya akan memeriksanya. terima kasih ini!!! saya saat ini HANYA menggunakan variabel .env saya ketika aplikasi sedang dirender server. Saya memiliki komponen urutan yang lebih tinggi yang menggunakan dotenv untuk memeriksa apakah itu CSR atau SSR, jika itu SSR saya kemudian mengirimkan fungsi yang diperlukan untuk mencatat posting blog.

ya, saya sudah membuat variabel saya berfungsi dengan baik. Saya merender rute /blog menggunakan HOC yang mendapatkan BLOGGER_API_KEY sehingga berfungsi dalam contoh-contoh itu.... halaman anak /post/:id tidak menggunakan apa pun variabel lingkungan.

akan melakukan penggalian lagi, semoga saya bisa sampai ke dasarnya!

Sepertinya sebagian besar masalah di sini sudah diperbaiki. Saya akan menangani masalah ini juga https://github.com/zeit/next.js/issues/1189

Saya tutup ini sekarang. Tetapi Jika kita perlu melakukan sesuatu di intinya, beri tahu saya.

@sergiodxa sesuai percakapan kami tadi malam, saya telah membuat aplikasi lil barebones yang menunjukkan masalah saya. Beri tahu saya jika Anda memiliki pertanyaan tentang itu! Saya akan dengan senang hati memberi tahu Anda tentang segala sesuatu yang terjadi dengannya! 😄

• Cabang blog berikutnya 404-err

Ini tidak tetap.

saya memiliki masalah yang sama tetapi tanpa rute khusus. Saya memiliki /pages/pipeline.tsx dan /pipeline url berfungsi dengan baik saat /pipeline/ mem-flash 404 dan kemudian mencoba memuat halaman saya tanpa memanggil "getInitialProps" yang dipanggil (karena 404 di server!).

@ ex3ndr Tidak yakin apakah ini akan memperbaiki masalah, tetapi saya memiliki masalah serupa dan ini menyembuhkannya.
https://github.com/zeit/next.js#disabling -file-system-routing

Kemungkinan berikutnya adalah mencoba melakukan fileSystem sebelum rute kustom Anda terkena.

@moaxaca Saya telah memecahkan cara yang sama karena saya harus memiliki perutean khusus sendiri - saya baru saja menonaktifkan perutean berikutnya.

Saya melihat masalah ini juga. Solusi @moaxaca tidak berhasil untuk saya. Apa yang dilakukan adalah menggunakan komponen Link , tetapi memilih untuk menggunakan metode pushRoute rute berikutnya.

Contoh dasar:

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>
    )
  }

}

Ini sepertinya mencari tahu dan saya tidak melihat Kesalahan Berkedip. Tapi rasanya agak cepat.

simpan masalah

Saya mendapat masalah yang sama sebelumnya dan saya bisa menyelesaikannya. Saya menggunakan pengaturan server ekspres. Saya menemukan bahwa alasan mengapa halaman 404 berkedip sebelum memuat ke halaman yang tepat adalah karena slug halaman saya tidak cocok dengan nama komponen saya.

Ketika saya memiliki kode ini, 404 berkedip:

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

Perhatikan bahwa nilai /search dan actualPage berbeda.

404 berkedip menghilang ketika saya mengganti nama komponen saya & nilai actualPage menjadi sama dengan siput halaman saya yaitu search . Lihat kode kerja di bawah ini:

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

Sekarang keduanya menggunakan /search .

Maaf untuk teman-teman bahasa Inggris saya.

mungkin ada baiknya untuk memeriksa properti next.config.js useFileSystemPublicRoutes . Jika salah, itu berarti Anda harus mendefinisikan sendiri semua pengendali rute di server.js.

Ini memperbaiki flashing 404 untuk saya:

Tautan

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

Sisi server

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

Akses param di halaman

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

Jadi untuk menjawab yang satu ini untuk selamanya:

href => jalur di dalam direktori pages + string kueri
as => ditampilkan di bilah url browser

Contoh:

Anda memiliki url bernama /products/:id

1. Anda membuat 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. Anda menambahkan rute ke express atau server lain, ini hanya untuk SSR. Apa yang akan dilakukan adalah merutekan url /products/:id ke pages/product.js dan memberikan id sebagai bagian dari query di getInitialProps:

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

1. Untuk perutean sisi klien Anda menggunakan next/link seperti ini:

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

Alasan Anda harus secara eksplisit memberikan href dan as adalah karena Next.js tidak mengetahui halaman lain di sisi klien. Kami tidak mengirim manifes semua halaman ke sisi klien dan rute berikutnya dimuat dengan lambat, yang dapat diskalakan.

Ada paket komunitas yang mengabstraksi menyediakan href dan as dengan mengirimkan manifes yang telah ditentukan sebelumnya dari semua rute, perhatikan bahwa kami menyarankan untuk tidak mengirim manifes lengkap dari semua rute yang mungkin karena tidak melakukan ini lebih terukur

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

Perhatikan juga bahwa rendering 404 bukan lagi perilaku default Next.js. Sebagai gantinya, kami memuat ulang halaman untuk fitur Zona.

Terima kasih Tim, penjelasan yang sangat jelas!

@timneutkens
Jika tautan href dan as. Saya melewati nilai yang berbeda. Bagaimana saya bisa mendapatkan nilai href dan nilai as .
Saya menguji saya demo. Saya pikir req.params.slug akan menjadi nilai as . Lalu bagaimana saya bisa mendapatkan nilai href .

@timneutkens Anda menyelamatkan saya Saya tidak tahu berapa jam pencarian yang menyakitkan untuk masalah saya: D

Bagaimana Anda merender komponen Tautan ke url itu? Apakah Anda menggunakan <Link href="/post/1"> atau <Link href="/post?id=1" as="/post/1"> ?

Anda harus meletakkan ini di doc. :sukacita:

@sergiodxa

Jadi untuk menjawab yang satu ini untuk selamanya:

href => jalur di dalam direktori pages + string kueri
as => ditampilkan di bilah url browser

Contoh:

Anda memiliki url bernama /products/:id

1. Anda membuat 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. Anda menambahkan rute ke express atau server lain, ini _only_ untuk SSR. Apa yang akan dilakukan adalah merutekan url /products/:id ke pages/product.js dan memberikan id sebagai bagian dari query di getInitialProps:

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

1. Untuk perutean sisi klien Anda menggunakan next/link seperti ini:

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

Alasan Anda harus secara eksplisit memberikan href dan as adalah karena Next.js tidak mengetahui halaman lain di sisi klien. Kami tidak mengirim manifes semua halaman ke sisi klien dan rute berikutnya dimuat dengan lambat, yang dapat diskalakan.

Ada paket komunitas yang mengabstraksi menyediakan href dan as dengan mengirimkan manifes yang telah ditentukan sebelumnya dari semua rute, perhatikan bahwa kami menyarankan untuk tidak mengirim manifes lengkap dari semua rute yang mungkin karena tidak melakukan ini lebih terukur

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

Perhatikan juga bahwa rendering 404 bukan lagi perilaku default Next.js. Sebagai gantinya, kami memuat ulang halaman untuk fitur Zona.

apa yang bisa saya lakukan jika saya hanya memiliki array header daftar seperti:
[ home: '/home', about:'/about', post: 'post/:post_id?' ] .
Selanjutnya saya hanya mendapatkan nilai as's , tapi bagaimana dengan href ? Terimakasih

Bagaimana jika Anda menggunakan router.push() alih-alih <Link> bagaimana Anda bisa mencapai hasil yang sama?

@justinmchase Saya baru saja mengalami masalah yang sama. Periksa dokumentasi Router Berikutnya jika Anda belum melakukannya.

Anda dapat menggunakannya sebagai Router.push(url, as, options) :

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

@timneutkens Saya ingin meng-host aplikasi next.js saya di ZEIT.now tetapi itu tidak memiliki opsi untuk menjalankan server ekspres. Apakah saya kehilangan url cantik saya sekarang dan hanya dapat melakukan param=value&param=value atau adakah cara lain? Contoh yang diposting Sergio tidak terlihat menjanjikan

Saya mencoba rute dinamis tetapi sekarang aplikasi satu halaman saya rusak dan tautan seperti:

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

sekarang menyebabkan pemuatan ulang halaman penuh karena http://localhost :8080/_next/static/development/pages/integration.js mengembalikan 404 tidak ditemukan.

@timneutkens Saya ingin meng-host aplikasi next.js saya di ZEIT.now tetapi itu tidak memiliki opsi untuk menjalankan server ekspres. Apakah saya kehilangan url cantik saya sekarang dan hanya dapat melakukan param=value&param=value atau adakah cara lain? Contoh yang diposting Sergio tidak terlihat menjanjikan

Anda tidak memerlukan server khusus untuk rute dinamis, lihat https://nextjs.org/docs/routing/dynamic-routes

@timneutkens Terima kasih atas balasan cepat Anda, saya mencoba rute dinamis tetapi akan merusak aplikasi satu halaman (lihat pembaruan). Berjalan secara lokal dengan next dalam skrip package.json saya dalam mode dev.

Selesaikan dengan memiliki pages/integration/index.js dengan kode dan pages/integration/[slug].js dengan:

import ProductDetailPage from './index'
export default ProductDetailPage

Cara yang benar untuk melakukan apa yang Anda uraikan adalah dengan membuat pages/integration/[slug].js

Dan tautkan dengan cara ini:

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

Hai, bisakah saya bertanya mengapa ketika saya menelepon yang ini?

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

id tidak dapat diambil, dan halaman yang saya gunakan adalah [...index].js yang merupakan multi dinamis menangkap semua halaman, tetapi jika saya mengarahkan ke halaman lain yang tidak dinamis itu dapat berfungsi dengan baik contoh car.js dorong ke vehicle.js..
Apakah ada cara yang lebih baik di mana saya dapat mendorong ke dinamis menangkap semua halaman saya dan kemudian menutupi id dan masih dapat mengambilnya ..?