Next.js: рдХрд╕реНрдЯрдо рдорд╛рд░реНрдЧ `рдкреЛрд╕реНрдЯ/`рдЖрдИрдбреА` рдЕрдВрдд рдореЗрдВ рдкреГрд╖реНрда рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ 404 рдЪрдордХ рд░рд╣рд╛ рд╣реИред

рдХреЛ рдирд┐рд░реНрдорд┐рдд 22 рдЕрдЧре░ 2017  ┬╖  47рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vercel/next.js

рдореИрдВ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдЕрдкрдиреЗ post/:id рдорд╛рд░реНрдЧреЛрдВ рдХреЗ рд╕рд╛рде рдПрдХ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬрд╣рд╛рдВ рдЕрдЧрд▓рд╛ рдореЗрд░реЗ рдШрдЯрдХ рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ 404 рдкреГрд╖реНрда рдХреЛ рдЪрдордХрддрд╛ рд╣реИред рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рдореИрдВрдиреЗ рд╕реЛрдЪрд╛ рдерд╛ рдХрд┐ рдпрд╣ рдПрдХ redux рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЗ рдереЗ рдХреНрдпреЛрдВрдХрд┐ рдореЗрд░реЗ post/id рдкреГрд╖реНрда рдРрдк рд╕реНрдерд┐рддрд┐ рдХреА рдЬрд╛рдВрдЪ рдХрд░ рд░рд╣реЗ рд╣реИрдВ filter рдЬреЛ рднреА рдШрдЯрдХ рдЙрдерд▓реЗ рд░реВрдЯрд┐рдВрдЧ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рджрд┐рдЦрд╛рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

рд╕реНрд▓реИрдХ рдЪреИрдирд▓ рдореЗрдВ рдЗрд╕ рдкрд░ рдЪрд░реНрдЪрд╛ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдореИрдВрдиреЗ рдПрдХ рдФрд░ рдПрдкреАрдЖрдИ рдХреЙрд▓ рдЬреЛрдбрд╝рд╛ рдЬреЛ рдкреНрд░рддреНрдпреЗрдХ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдХреЛ рдкреБрдирдГ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдЧрд╛ рд▓реЗрдХрд┐рди рдЬрд▓реНрджреА рд╕реЗ рдкрд╛рдпрд╛ рдХрд┐ рдореБрдЭреЗ рдЕрднреА рднреА рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛ рд╣реИред рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдХрдо рд╕реЗ рдХрдо рдПрдХ рдЕрдиреНрдп рдбреЗрд╡рд▓рдкрд░ рдХреЗ рд▓рд┐рдП рд╣реБрдЖ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдореИрдВ рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдХреЛрдИ рдореБрдЭреЗ рд╕рд╣реА рджрд┐рд╢рд╛ рдореЗрдВ рдЗрдВрдЧрд┐рдд рдХрд░ рд╕рдХрддрд╛ рд╣реИ? рдореИрдВ рдЗрд╕ рд╡реНрдпрдХреНрддрд┐рдЧрдд рдкреЛрд░реНрдЯрдлреЛрд▓рд┐рдпреЛ рдХреЛ рд╕рдорд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬрд┐рд╕реЗ рдореИрдВрдиреЗ рдЕрдЧрд▓реЗ рдХреЗ рд╕рд╛рде рдмрдирд╛рдпрд╛ рд╣реИред

рдиреАрдЪреЗ, рдЖрдк рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреНрдпрд╛ рд╣реЛ рд░рд╣рд╛ рд╣реИред рд╕рдм рдХреБрдЫ A1 рджрд┐рдЦрддрд╛ рд╣реИ рд╕рд┐рд╡рд╛рдп рдЙрд╕ 404 рдХреЗ рдЬреЛ рдХрд┐рд╕реА рд╡рд┐рд╢рд┐рд╖реНрдЯ рдкреЛрд╕реНрдЯ рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдП рдЬрд╛рдиреЗ рдкрд░ рдЭрдкрдХрд╛рддрд╛ рд╣реИред

next.js blog post err

рдореИрдВрдиреЗ рдЬреЛ рд▓рд╛рдн рдкреНрд░рд╛рдкреНрдд рдХрд┐рдпрд╛ рд╣реИ, рд╡рд╣ рдЬрдмрд░рджрд╕реНрдд рд╣реИ, рд▓реЗрдХрд┐рди рдЗрд╕ рддрд░рд╣ рдХреА рдХреБрдЫ рдЫреЛрдЯреА-рдореЛрдЯреА рд╕рдорд╕реНрдпрд╛рдПрдВ рд╣реИрдВ, рдЬрд┐рдиреНрд╣реЛрдВрдиреЗ рдореБрдЭреЗ рдереЛрдбрд╝рд╛ рд╣реИрд░рд╛рди рдХрд░ рджрд┐рдпрд╛ рд╣реИред рд╡реИрд╕реЗ рднреА, рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рдореИрдВ рдХреЛрдИ рдЕрддрд┐рд░рд┐рдХреНрдд рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдзрдиреНрдпрд╡рд╛рдж

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рддреЛ рдЗрд╕рдХрд╛ рдПрдХ рдмрд╛рд░ рдФрд░ рд╕рднреА рдХреЗ рд▓рд┐рдП рдЙрддреНрддрд░ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП:

href => pages рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдХреЗ рдЕрдВрджрд░ рдкрде + querystring
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. рдЖрдк рдПрдХреНрд╕рдкреНрд░реЗрд╕ рдпрд╛ рдХрд┐рд╕реА рдЕрдиреНрдп рд╕рд░реНрд╡рд░ рдХреЗ рд▓рд┐рдП рдорд╛рд░реНрдЧ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ, рдпрд╣ рдХреЗрд╡рд▓ рдПрд╕рдПрд╕рдЖрд░ рдХреЗ рд▓рд┐рдП рд╣реИред рдХреНрдпрд╛ рдпрд╣ рдХрд░ рджреЗрдЧрд╛ рдорд╛рд░реНрдЧ рдпреВрдЖрд░рдПрд▓ рд╣реИ /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 рдХрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╡реНрдпрд╡рд╣рд╛рд░ рдирд╣реАрдВ рд╣реИред рдЗрд╕рдХреЗ рдмрдЬрд╛рдп, рд╣рдо рдЬрд╝реЛрди рд╕реБрд╡рд┐рдзрд╛ рдХреЗ рд▓рд┐рдП рдкреГрд╖реНрда рдХреЛ рдкреБрдирдГ рд▓реЛрдб рдХрд░рддреЗ рд╣реИрдВред

рд╕рднреА 47 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рд╡рд╣реА рдореБрджреНрджрд╛ +1

рдЖрдк рдЙрд╕ рдпреВрдЖрд░рдПрд▓ рдореЗрдВ рд▓рд┐рдВрдХ рдШрдЯрдХ рдХреИрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣реЗ рд╣реИрдВ? рдХреНрдпрд╛ рдЖрдк <Link href="/post/1"> рдпрд╛ <Link href="/post?id=1" as="/post/1"> ?

рд╡рд░реНрддрдорд╛рди рдореЗрдВ, рдореИрдВ <Link prefetch href={ /blog/${x.id} } /> рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдореИрдВрдиреЗ рдЕрддреАрдд рдореЗрдВ <Link prefetch href={ /blog/${x.id} } as={ /blog/${x.id} } /> рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИ рдФрд░ рдЗрд╕реЗ рдлрд┐рд░ рд╕реЗ рдкреНрд▓рдЧ рдЗрди рдХрд┐рдпрд╛ рд╣реИред рдЕрднреА рднреА рд╡рд╣реА рдореБрджреНрджрд╛ рд╣реИред

рдЖрдкрдХрд╛ href рдФрд░ as рд╕рд╣рд╛рд░рд╛ рдПрдХ рдЬреИрд╕рд╛ рдирд╣реАрдВ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП, href рдЕрд╕рд▓реА рдпреВрдЖрд░рдПрд▓ рд╣реИ, рдЕрдЧрд░ рдЖрдкрдХреЗ рдкрд╛рд╕ pages/blog.js рдФрд░ рдПрдХ рдХреНрд╡реЗрд░реА рдХреЗ рд░реВрдк рдореЗрдВ рдЖрдИрдбреА рдкреНрд░рд╛рдкреНрдд рдХрд░рддреЗ рд╣реИрдВ рддреЛ href рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП /blog?id=${x.id} рдФрд░ as рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рдЖрдкрдХрд╛ рд╕реБрдВрджрд░ рдХрд╕реНрдЯрдо рдпреВрдЖрд░рдПрд▓ рд╣реИ /blog/${x.id} ред

@sergiodxa рдореИрдВрдиреЗ рдЕрднреА рдЗрд╕ рдХреЛрдб рдХреЛ рд░рдЦрд╛ рд╣реИред

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

рдЕрдм рдпрд╣ URL рдореЗрдВ id рдЬреЛрдбрд╝рддреЗ рд╣реБрдП рдкреНрд░рддреНрдпреЗрдХ рдХреНрд▓рд┐рдХ рдкрд░ /blog рдкреГрд╖реНрда рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣рд╛ рд╣реИред

url error gif

@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) рдмрдирд╛рдпрд╛, рд╡рд╣рд╛рдВ рдЖрдк рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ рдкреБрдирдГ рд▓реЛрдб рдХрд┐рдП рдмрд┐рдирд╛ рдХрд╕реНрдЯрдо рдпреВрдЖрд░рдПрд▓ рдФрд░ рдКрдкрд░ рд╡рд░реНрдгрд┐рдд рдЕрдиреБрд╕рд╛рд░ next/link рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ 404ред

@sergiodxa рдореИрдВ рдЗрд╕рдХреА рд╕рд░рд╛рд╣рдирд╛ рдХрд░рддрд╛ рд╣реВрдВ! рдореИрдВрдиреЗ рдЕрднреА рдЗрд╕рдХреА рдЬрд╛рдБрдЪ рдХреА рдФрд░ Google рдмреНрд▓реЙрдЧрд░ API рдореЗрдВ рдХреБрдЫ async рдХреЙрд▓ рдЬреЛрдбрд╝реЗ рдЬреЛ рдХрд┐ рдореИрдВ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдкрд┐рдВрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдБред рдиреАрдЪреЗ, рдЖрдк рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдпрд╣ рдорд╛рд░реНрдЧ рдкрд░ рдХреИрд╕реЗ рдиреЗрд╡рд┐рдЧреЗрдЯ рдХрд░ рд░рд╣рд╛ рд╣реИ рд▓реЗрдХрд┐рди рдпрд╣ рдбреЗрдЯрд╛ рдХреЛ рд╕рд╣реА рдврдВрдЧ рд╕реЗ рд▓реЛрдб рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред

рд╣рдЯрд╛рдпрд╛ рдЧрдпрд╛ рдЬреАрдЖрдИрдПрдл

рдЕрдм рдпрд╣ рдореБрджреНрджрд╛ рдЗрд╕ рдореБрджреНрджреЗ рдХрд╛ рдереЛрдбрд╝рд╛ рдЕрд▓рдЧ рдкреБрдирд░реБрддреНрдкрд╛рджрди рд╣реИ рдЬреЛ рдореЗрд░реА рдкрд╣рд▓реА рдЯрд┐рдкреНрдкрдгреА рдореЗрдВ рджрд┐рдЦрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИред рдЬрдм рдореИрдВрдиреЗ рдкрд╣рд▓реА рдмрд╛рд░ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд┐рдпрд╛, рддреЛ рдореБрдЭреЗ рд▓рдЧрд╛ рдХрд┐ рдРрд╕рд╛ рдЗрд╕рд▓рд┐рдП рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ redux рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рдерд╛ рдФрд░ рдпрд╣ рдХрд┐ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рд╕реНрдерд┐рддрд┐ post/id рдкреГрд╖реНрдареЛрдВ рдкрд░ рдирд╣реАрдВ рд▓реЗ рдЬрд╛ рд░рд╣реА рдереАред рдЗрд╕рдиреЗ рдореБрдЭреЗ рдкреНрд░рддреНрдпреЗрдХ рдкреЛрд╕реНрдЯ рдХреЗ рд▓рд┐рдП рдПрдХ рдирдИ рдПрдкреАрдЖрдИ рдХреЙрд▓ рдХреЛ рдПрдХреАрдХреГрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░реЗрд░рд┐рдд рдХрд┐рдпрд╛, рдЬреИрд╕реЗ рдореИрдВрдиреЗ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдмрдирд╛рдП рдЧрдП рдРрдк рдореЗрдВ рдПрдХреАрдХреГрдд рдХрд┐рдпрд╛ рдерд╛, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореИрдВрдиреЗ рдЕрднреА рднреА рдкрд╛рдпрд╛ рдХрд┐ рдореБрдЭреЗ рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛ рдереАред

рдореИрдВ рдЖрдкрдХреЗ рд░реЗрдкреЛ рдХреЛ рдлреЛрд░реНрдХ рдХрд░рдиреЗ рдореЗрдВ рдХреБрдЫ рдкрд░реЗрд╢рд╛рдиреА рдореЗрдВ рдЪрд▓ рд░рд╣рд╛ рдерд╛ рддрд╛рдХрд┐ рдЖрдк рдореЗрд░рд╛ рдХреЛрдб рдпрд╣рд╛рдВ рдвреВрдВрдв рд╕рдХреЗрдВ -> https://github.com/tgrecojs/next-custom-query-async ред рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдЖрдк рд╡рд┐рдЪрд╛рд░ рд╣реИрдВ! рдореИрдВ

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ 400 рдорд┐рд▓ рд░рд╣реЗ рд╣реИрдВ, рдЬрдм рдЖрдкрдХреА рдкрд░рд┐рдпреЛрдЬрдирд╛ рдХреЛ рдлреЛрд░реНрдХ рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ рддреЛ рдореБрдЭреЗ рд╡рд╣реА рддреНрд░реБрдЯрд┐ рдорд┐рд▓ рд░рд╣реА рд╣реИ рдЬрд┐рд╕рдореЗрдВ рдЙрдкрдпреЛрдЧ рд╕реАрдорд╛ рддреНрд░реБрдЯрд┐ рд╕рдВрджреЗрд╢ рд╣реИред рд╢рд╛рдпрдж рдЗрд╕реАрд▓рд┐рдП рдЖрдкрдХреЛ рд╡рд╣ рддреНрд░реБрдЯрд┐ рдорд┐рд▓ рд░рд╣реА рд╣реИред

рдареАрдХред рдореИрдВ рдХрд▓ рдереЛрдбрд╝реА рдФрд░ рдЬрд╛рдВрдЪ рдХрд░реВрдВрдЧрд╛ рд▓реЗрдХрд┐рди рдореИрдВ рдпрд╣ рдмрддрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЦреЛрд▓рддреЗ рд╕рдордп рдореИрдВрдиреЗ рдЬреЛ рд╡реАрдбрд┐рдпреЛ рдкреЛрд╕реНрдЯ рдХрд┐рдпрд╛ рд╣реИ рд╡рд╣ /blog/:id рдорд╛рд░реНрдЧ рдкрд░ рдПрдкреАрдЖрдИ рдЕрдиреБрд░реЛрдз рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред рдЗрд╕рдХреЗ рдмрдЬрд╛рдп, рдпрд╣ рдореЗрд░реЗ redux рд╕реНрдЯреЛрд░ рд╕реЗ рдкреЛрд╕реНрдЯ рдХреЛ рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░ рд░рд╣рд╛ рд╣реИ рдЬреЛ /blog рд░реВрдЯ рдЯреНрд░рд╛рдВрдЬрд╝рд┐рд╢рди рдкрд░ рдПрдХрддреНрд░ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ рддрд╛рдХрд┐ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рдореЗрд░реЗ рдЖрдиреЗ рдХрд╛ рдХрд╛рд░рдг рди рд╣реЛред рдореИрдВрдиреЗ рдХреЗрд╡рд▓ рджреВрд╕рд░рд╛ рдПрдкреАрдЖрдИ рдХреЙрд▓ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ ( blog/:id рдЕрдВрджрд░ рдмрдирд╛рдпрд╛ рдЧрдпрд╛) рдЬреИрд╕рд╛ рдХрд┐ рдореИрдВрдиреЗ рд╕реЛрдЪрд╛ рдерд╛ рдХрд┐ рдЗрд╕рдХрд╛ рдореЗрд░реЗ рд░реЗрдбрдХреНрд╕-рд╕реНрдЯреЛрд░ рд╕реЗ рдХреБрдЫ рд▓реЗрдирд╛-рджреЗрдирд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рд╡рд╣реА рддреНрд░реБрдЯрд┐ рдорд┐рд▓ рд░рд╣реА рд╣реИ рд▓реЗрдХрд┐рди рдпрд╣ рдореЗрд░реЗ рдХреЛрдб рдореЗрдВ рд╡рд░реНрддрдорд╛рди рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдирд╣реАрдВ рд╣реИред

рдЬреИрд╕реЗ рд╣реА рдореБрдЭреЗ рдПрд╣рд╕рд╛рд╕ рд╣реБрдЖ рдХрд┐ рдЗрд╕рдиреЗ рд╡рд╣реА рдмрдЧ рдлреЗрдВрдХрд╛ рд╣реИ, рдореИрдВрдиреЗ рдХреЗрд╡рд▓ рдПрдХ рдПрдкреАрдЖрдИ рдХреЙрд▓ (рдЕрдВрджрд░ /blog ) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд╛рдкрд╕ рд╕реНрд╡рд┐рдЪ рдХрд┐рдпрд╛ рдФрд░ рдлрд┐рд░ рдЖрдИрдбреА рджреНрд╡рд╛рд░рд╛ рдЖрд╡рд╢реНрдпрдХ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдХреЗ рд▓рд┐рдП рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд┐рдпрд╛ред

@sergiodxa рдореИрдВ рдкреБрд╖реНрдЯрд┐ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдХрд┐ рдпрд╣ рдЙрдкрдпреЛрдЧ рд╕реАрдорд╛ рдирд╣реАрдВ рд╣реИред рдЖрдк рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ id рдХреЛ рд╣рдореЗрд╢рд╛ /blog/:id рд░реВрдЯ рдкрд░ рд╕рд╣реА рддрд░реАрдХреЗ рд╕реЗ рдкрд╛рд╕ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ... рдореИрдВрдиреЗ рдкреНрд░рд╛рдкреНрдд рд╣реЛрдиреЗ рд╡рд╛рд▓реА 400 рддреНрд░реБрдЯрд┐ рд╕рдВрд▓рдЧреНрди рдХреА рд╣реИред рдЖрдк рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ id рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд рд╣реИ рдФрд░ (рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ) рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдореБрдЭреЗ рддреНрд░реБрдЯрд┐ рдХреНрдпреЛрдВ рдорд┐рд▓ рд░рд╣реА рд╣реИред

рдореИрдВрдиреЗ рдиреАрдЪреЗ рдПрдХ рдФрд░ рд╡реАрдбрд┐рдпреЛ рд╢рд╛рдорд┐рд▓ рдХрд┐рдпрд╛ рд╣реИред рдХреЛрдИ рд╡рд┐рдЪрд╛рд░ рдХреНрдпреЛрдВ рдпрд╣ рдЗрд╕ рддрд░рд╣ рд╡реНрдпрд╡рд╣рд╛рд░ рдХрд░ рд░рд╣рд╛ рд╣реИ? рдореИрдВрдиреЗ рдЗрд╕ рднрдВрдбрд╛рд░ рдХреЗ рдЕрдВрджрд░ <Link /> рдЯреИрдЧ рдирд╣реАрдВ рдмрджрд▓реЗ рд╣реИрдВ, рдлрд┐рд░ рднреА рдЕрднреА рднреА рд╕рдорд╕реНрдпрд╛ рд╣реИ ред

next-custom-query err

рдлрд┐рд░ рд╕реЗ, рдореИрдВ рдпрд╣ рдмрддрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдКрдкрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╡реАрдбрд┐рдпреЛ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдмрдирд╛рдП рдЧрдП рдЙрджрд╛рд╣рд░рдг рд░реЗрдкреЛ рдХреЗ рдЕрдВрджрд░ рддреНрд░реБрдЯрд┐ рдХреЛ рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рддрд╛ рд╣реИ - https://github.com/sergiodxa/next-custom-query ред

рдореБрдЭреЗ рдмрд┐рдирд╛ рдХрд┐рд╕реА рдХрд╕реНрдЯрдо рд░реВрдЯ рдХреЗ 404 рдлреНрд▓реИрд╢рд┐рдВрдЧ рднреА рдорд┐рд▓ рд░рд╣реА рд╣реИред рдЗрд╕ рдХреЛрдб рдХреЗ рд╕рд╛рде orders.js рдореЗрдВ pages/ рдирд╛рдордХ рдПрдХ рдлрд╝рд╛рдЗрд▓:

import { Component } from 'react';

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

export default Orders;

рдХрд╛рдлреА рдЧрдВрднреАрд░ рдореБрджреНрджрд╛ рд▓рдЧрддрд╛ рд╣реИ

рдореИрдВрдиреЗ рдЗрд╕реЗ рджреЛрд╣рд░рд╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рдФрд░ рдРрд╕рд╛ рдЗрд╕рд▓рд┐рдП рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдпреВрдЖрд░рдПрд▓ рдХреЗ рдЕрдВрдд рдореЗрдВ рдкрд┐рдЫрд▓рд╛ рд╕реНрд▓реИрд╢, рдпрджрд┐ рдЖрдк /orders рдкрд░ рдЬрд╛рддреЗ рд╣реИрдВ рддреЛ рдЖрдкрдХреЛ 404 рдирд╣реАрдВ рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдпрджрд┐ рдЖрдк /orders/ рддреЛ рдЖрдк рджреЗрдЦрддреЗ рд╣реИрдВ рдХрд┐ 404 рд╕рд╛рдордЧреНрд░реА рд╕реЗ рдкрд╣рд▓реЗ рдЪрдордХрддреА рд╣реИ, рдпрд╣ рдпрд╛ рддреЛ рджреЗрд╡ рдФрд░ рдЙрддреНрдкрд╛рджрди рдореЛрдб рдореЗрдВ рд╣реЛрддрд╛ рд╣реИред

рдЖрд╣ рдпрд╣ рдПрдХ рдЬреНрдЮрд╛рдд рдореБрджреНрджрд╛ рд╣реИред https://github.com/zeit/next.js/issues/1189

рдкрд┐рдЫрд▓реА рд╕реНрд▓реИрд╢ рдХреЗ рдХрд╛рд░рдг рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рдЙрддреНрдкрдиреНрди рдирд╣реАрдВ рд╣реБрдИ, рдЗрд╕рд▓рд┐рдП рдХреБрдЫ рдФрд░ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП, рд╣реИ рдирд╛?

рдореИрдВрдиреЗ рдЕрдкрдиреЗ рдХреЛрдб рдореЗрдВ рдХреБрдЫ рдмрджрд▓рд╛рд╡ рдХрд┐рдП рд╣реИрдВ рдФрд░ рдореИрдВрдиреЗ 2 рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╕рдВрд╕реНрдХрд░рдг рддреИрдирд╛рдд рдХрд┐рдП рд╣реИрдВ, рдПрдХ prefetch рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИ рдФрд░ рдПрдХ рдЬреЛ рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдореИрдВ рдпрд╣ рдиреЛрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рди рддреЛ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдЕрдм post/:id рдорд╛рд░реНрдЧ рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рд▓реЛрдб рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реИред

рдкреНрд░реАрдлреЗрдЪ рдХреЗ рд╕рд╛рде - https://tgrecojs-hltqztsjpx.now.sh/

рдПрдХ рдиреЗ рджреЗрдЦрд╛ рдХрд┐ рдЬрдм рдореИрдВ рд▓рд┐рдВрдХ рдореЗрдВ prefetch рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдЕрдм рдкреНрд░рддреНрдпреЗрдХ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдХреЗ рд▓рд┐рдП рд▓рд┐рдВрдХ рдкреНрд░рджрд╛рди рдХрд░рддреЗ рд╕рдордп Page Does Not Exist Error рдлреЗрдВрдХрддрд╛ рд╣реИред рдЖрдк рдиреАрдЪреЗ рдореЗрд░реЗ рдХрдВрд╕реЛрд▓ рдХрд╛ рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВред

screen shot 2017-08-26 at 1 06 25 pm

рдкреНрд░реАрдлреЗрдЪ рдХреЗ рдмрд┐рдирд╛- https://tgrecojs-qzpspdjrin.now.sh/

рдЬрдм рдореИрдВ рдкреНрд░реАрдлреЗрдЪ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддрд╛, рддреЛ рдКрдкрд░ рджрд┐рдЦрд╛рдИ рдЧрдИ рддреНрд░реБрдЯрд┐ рдЕрдм рдореМрдЬреВрдж рдирд╣реАрдВ рд╣реИ рд▓реЗрдХрд┐рди рдпрд╣ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░рддреА рд╣реИред рдЬрдм рдореИрдВрдиреЗ рд╢реБрд░реВ рдореЗрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдкреЛрд╕реНрдЯ рдХрд┐рдпрд╛ рдерд╛, рддреЛ рдореЗрд░рд╛ рдШрдЯрдХ рдкреНрд░рддреНрдпреЗрдХ post/:id рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдореЗрд░реЗ рдмреНрд▓реЙрдЧ рдХреЛ рдкреНрд░рд╛рд░рдВрдн рдХрд░ рд░рд╣рд╛ рдерд╛ред рдореИрдВрдиреЗ рддрдм рд╕реЗ рд╣рдЯрд╛ рджрд┐рдпрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдЕрдм рд╕реЗ рд╡реНрдпрдХреНрддрд┐рдЧрдд рдкреЛрд╕реНрдЯ рдХрднреА рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред

рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рдореИрдВ рдХреЛрдИ рдФрд░ рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдЬреЛ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдирд┐рджрд╛рди рдХрд░рдиреЗ рдореЗрдВ рдорджрдж рдХрд░ рд╕рдХреЗред рдореИрдВ

@tgrecojs рдореБрдЭреЗ рд▓рдЧрднрдЧ рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИред prefetch рдиреЗ рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рдХрд┐рдпрд╛ред

рдореБрдЭреЗ рдЬреЛ рд╡реНрдпрд╡рд╣рд╛рд░ рдорд┐рд▓рддрд╛ рд╣реИ рд╡рд╣ рдирд┐рдореНрди рд╣реИ:

  • рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд▓рд┐рдВрдХ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддрд╛ рд╣реИ
  • 404 рддреНрд░реБрдЯрд┐ рджрд┐рдЦрд╛рдИ рджреЗрддреА рд╣реИ
  • рдкреГрд╖реНрда рдкреБрдирдГ рд▓реЛрдб (??)
  • рдкреБрдирдГ рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рд╕рд╣реА рдкреГрд╖реНрда рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реЛрддрд╛ рд╣реИ

рдореБрдЭреЗ рдЖрд╢рд╛ рд╣реИ рдХрд┐ рдпрд╣ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдбреАрдмрдЧ рдХрд░рдиреЗ рдореЗрдВ рдорджрдж рдХрд░ рд╕рдХрддрд╛ рд╣реИ!

рдЕрддрд┐рд░рд┐рдХреНрдд рдЬрд╛рдирдХрд╛рд░реА: рдиреЛрдб v6.10.3 , рдХреНрд░реЛрдо Version 60.0.3112.90

рд╕рдВрдкрд╛рджрд┐рдд рдХрд░реЗрдВ: рдРрдк рдХреЛ рддреИрдирд╛рдд рдХрд┐рдпрд╛ рддрд╛рдХрд┐ рдЖрдк рд▓реЛрдЧ рдЗрд╕рдХрд╛ рдкрд░реАрдХреНрд╖рдг рдХрд░ рд╕рдХреЗрдВ https://datahub.now.sh/ , рдпрд╣ рд▓рд┐рдВрдХ /@[рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдирд╛рдо] рд╣реИ рдЬрд┐рд╕рдореЗрдВ рдпрд╣ рд╡реНрдпрд╡рд╣рд╛рд░ рд╣реИ

@ Theo- рдЙрд╕ рдЕрдЧрд▓реЗ/рд▓рд┐рдВрдХ рдореЗрдВ href user?id=1 , рдХреНрдпрд╛ рдЖрдк рдЗрд╕рдХреЗ рдмрдЬрд╛рдп /user?id=1 рдЖрдЬрд╝рдорд╛ рд╕рдХрддреЗ рд╣реИрдВ? рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ 404 рдЗрд╕рд▓рд┐рдП рд╣реИ рдХреНрдпреЛрдВрдХрд┐ Next.js /current/path/user?id=1 рдмрдЬрд╛рдп /user?id=1 рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЬрдм рдкреГрд╖реНрда рдкреБрдирдГ рд▓реЛрдб рд╣реЛрддрд╛ рд╣реИ рддреЛ рд╕рд░реНрд╡рд░ рд░реЗрдВрдбрд░ рдХреЗ рдХрд╛рд░рдг рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

@sergiodxa рдЬрд┐рд╕рдиреЗ рдХрд┐рдпрд╛ред рд╢реБрдХреНрд░рд┐рдпрд╛!

@tgrecojs рдореЗрд░реЗ рдкрд╛рд╕ рд╡рд╣реА рдЪрдордХрддрд╛ 404 рд╡реНрдпрд╡рд╣рд╛рд░ рдерд╛ред рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рдкрд░реНрдпрд╛рд╡рд░рдг рдЪрд░ рдХреЗ рд╕рд╛рде рдПрдХ рд▓рд┐рдВрдХ рдерд╛ рдЬреЛ рдХреНрд▓рд╛рдЗрдВрдЯ рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рдерд╛, рдЗрд╕рд▓рд┐рдП 404 рд▓реЗрдХрд┐рди рд╕рд░реНрд╡рд░ рдкрд░, рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рдерд╛ред рдЗрд╕реЗ https://medium.com/the-tech-bench/next-js-environment-variables-d2f6ea1a1dca рд╕реЗ рд╣рд▓

@andreaskeller рд╣рдореНрдо рдареАрдХ рд╣реИ рдореИрдВ рдЗрд╕реЗ рджреЗрдЦ рд▓реВрдВрдЧрд╛ред рдпрд╣ рдзрдиреНрдпрд╡рд╛рдж !!! рдореИрдВ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХреЗрд╡рд▓ рдЕрдкрдиреЗ .env рдЪрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬрдм рдРрдк рд╕рд░реНрд╡рд░ рдкреНрд░рд╕реНрддреБрдд рдХрд░рддрд╛ рд╣реИред рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рдЙрдЪреНрдЪ рдСрд░реНрдбрд░ рдШрдЯрдХ рд╣реИ рдЬреЛ рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП dotenv рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рд╕реАрдПрд╕рдЖрд░ рдпрд╛ рдПрд╕рдПрд╕рдЖрд░ рд╣реИ, рдпрджрд┐ рдпрд╣ рдПрд╕рдПрд╕рдЖрд░ I рд╣реИ рддреЛ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рд▓реЙрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рдлрд╝рдВрдХреНрд╢рди рдкреНрд░реЗрд╖рд┐рдд рдХрд░реЗрдВред

рд╣рд╛рдБ, рдореБрдЭреЗ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдореЗрд░реЗ рдЪрд░ рдареАрдХ рдХрд╛рдо рдХрд░ рд░рд╣реЗ рд╣реИрдВред рдореИрдВ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ рдореЗрд░рд╛ /blog рдорд╛рд░реНрдЧ рдПрдХ рдПрдЪрдУрд╕реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИ рдЬреЛ рдореЗрд░рд╛ BLOGGER_API_KEY рдЗрд╕рд▓рд┐рдП рдпрд╣ рдЙрди рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ .... рдореЗрд░реЗ /post/:id рдмрд╛рд▓ рдкреГрд╖реНрда рдХрд┐рд╕реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд░рд╣реЗ рд╣реИрдВ env рдЪрд░ред

рдХреБрдЫ рдФрд░ рдЦреБрджрд╛рдИ рдХрд░рдиреЗ рдЬрд╛ рд░рд╣рд╛ рд╣реВрдВ, рдЙрдореНрдореАрдж рд╣реИ рдХрд┐ рдореИрдВ рдЗрд╕рдХреА рддрд╣ рддрдХ рдЬрд╛ рд╕рдХрддрд╛ рд╣реВрдВ!

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣рд╛рдВ рдЬреНрдпрд╛рджрд╛рддрд░ рдореБрджреНрджреЗ рддрдп рд╣реЛ рдЧрдП рд╣реИрдВред рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рднреА рдХрд╛рдо рдХрд░реВрдВрдЧрд╛ https://github.com/zeit/next.js/issues/1189

рдореИрдВ рдЗрд╕реЗ рдЕрднреА рдмрдВрдж рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рд▓реЗрдХрд┐рди рдЕрдЧрд░ рд╣рдореЗрдВ рдореВрд▓ рдореЗрдВ рдХреБрдЫ рдХрд░рдиреЗ рдХреА рдЬрд╝рд░реВрд░рдд рд╣реИ, рддреЛ рдореБрдЭреЗ рдмрддрд╛рдПрдВред

@sergiodxa рдХрд▓ рд░рд╛рдд рд╣рдорд╛рд░реА рдмрд╛рддрдЪреАрдд рдХреЗ рдЕрдиреБрд╕рд╛рд░, рдореИрдВрдиреЗ рдЕрдкрдиреА рд╕рдорд╕реНрдпрд╛ рджрд┐рдЦрд╛рддреЗ рд╣реБрдП рд▓рд┐рд▓ рдмреЗрдпрд░рдмреЛрди рдРрдк рдмрдирд╛рдпрд╛ рд╣реИред рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рдЖрдкрдХреЗ рдкрд╛рд╕ рдЗрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреЛрдИ рдкреНрд░рд╢реНрди рд╣реИрдВ! рдЗрд╕рдХреЗ рд╕рд╛рде рдЬреЛ рдХреБрдЫ рднреА рд╣реЛ рд░рд╣рд╛ рд╣реИ, рдЙрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЖрдкрдХреЛ рдмрддрд╛рдиреЗ рдореЗрдВ рдореБрдЭреЗ рдмрд╣реБрдд рдЦреБрд╢реА рд╣реЛрдЧреА! рдореИрдВ

рдпрд╣ рддрдп рдирд╣реАрдВ рд╣реИред

рдореБрдЭреЗ рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдмрд┐рдирд╛ рдХрд┐рд╕реА рдХрд╕реНрдЯрдо рдорд╛рд░реНрдЧ рдХреЗред рдореЗрд░реЗ рдкрд╛рд╕ /pages/pipeline.tsx рдФрд░ /pipeline url рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдЬрдмрдХрд┐ /pipeline/ 404 рдЪрдордХрддрд╛ рд╣реИ рдФрд░ рдлрд┐рд░ "getInitialProps" рдХреЛ рдХреЙрд▓ рдХрд┐рдП рдмрд┐рдирд╛ рдореЗрд░реЗ рдкреЗрдЬ рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░рддрд╛ рд╣реИ (рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рд╕рд░реНрд╡рд░ рдкрд░ 404 рдерд╛!)ред

@ ex3ndr рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЗрд╕рд╕реЗ рд╕рдорд╕реНрдпрд╛ рдареАрдХ рд╣реЛ рдЬрд╛рдПрдЧреА, рд▓реЗрдХрд┐рди рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рд╕рдорд╛рди рд╕рдорд╕реНрдпрд╛ рдереА рдФрд░ рдЗрд╕рдиреЗ рдЗрд╕реЗ рдареАрдХ рдХрд░ рджрд┐рдпрд╛ред
https://github.com/zeit/next.js#disableing -file-system-routing

рд╕рдВрднрд╛рд╡рдирд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЗ рдХрд╕реНрдЯрдо рд░реВрдЯ рд╣рд┐рдЯ рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдлрд╛рдЗрд▓ рд╕рд┐рд╕реНрдЯрдо рдХреЛ рдЦреАрдВрдЪрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реИред

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

}

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдкрддрд╛ рд▓рдЧрд╛ рд░рд╣рд╛ рд╣реИ рдФрд░ рдореБрдЭреЗ рддреНрд░реБрдЯрд┐ рдЪрдордХрддреА рджрд┐рдЦрд╛рдИ рдирд╣реАрдВ рджреЗ рд░рд╣реА рд╣реИред рд▓реЗрдХрд┐рди рдпрд╣ рдереЛрдбрд╝рд╛ рддреЗрдЬрд╝ рд▓рдЧрддрд╛ рд╣реИред

рдореБрджреНрджрд╛ рдмрдЪрд╛рдУ

рдореБрдЭреЗ рдкрд╣рд▓реЗ рднреА рдпрд╣реА рд╕рдорд╕реНрдпрд╛ рдереА рдФрд░ рдореИрдВ рдЗрд╕реЗ рд╣рд▓ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдерд╛ред рдореИрдВ рдПрдХ рдПрдХреНрд╕рдкреНрд░реЗрд╕ рд╕рд░реНрд╡рд░ рдХреА рд╕реНрдерд╛рдкрдирд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдБред рдореБрдЭреЗ рдкрддрд╛ рдЪрд▓рд╛ рдХрд┐ рд╕рд╣реА рдкреЗрдЬ рдкрд░ рд▓реЛрдб рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ 404 рдкреЗрдЬ рдХреЗ рдлреНрд▓реИрд╢ рд╣реЛрдиреЗ рдХрд╛ рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ рдореЗрд░рд╛ рдкреЗрдЬ рд╕реНрд▓рдЧ рдореЗрд░реЗ рдХрдВрдкреЛрдиреЗрдВрдЯ рдирд╛рдо рд╕реЗ рдореЗрд▓ рдирд╣реАрдВ рдЦрд╛рддрд╛ рд╣реИред

рдЬрдм рдореЗрд░реЗ рдкрд╛рд╕ рдпрд╣ рдХреЛрдб 404 рдЪрдордХрддрд╛ рд╣реИ:

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

рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ /search рдФрд░ рдореЗрд░реЗ actualPage рдорд╛рди рднрд┐рдиреНрди рд╣реИрдВред

404 рдлреНрд▓реИрд╢ рдЧрд╛рдпрдм рд╣реЛ рдЬрд╛рддреЗ рд╣реИрдВ рдЬрдм рдореИрдВ рдЕрдкрдиреЗ рдШрдЯрдХ рдХрд╛ рдирд╛рдо рдмрджрд▓рддрд╛ рд╣реВрдВ рдФрд░ actualPage рдорд╛рди рдореЗрд░реЗ рдкреЗрдЬ рд╕реНрд▓рдЧ рдХреЗ рд╕рдорд╛рди рд╣реЛрддрд╛ рд╣реИ рдЬреЛ search ред рдиреАрдЪреЗ рдХрд╛рд░реНрдп рдХреЛрдб рджреЗрдЦреЗрдВ:

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

рдЕрдм рджреЛрдиреЛрдВ /search рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВред

рдореЗрд░реЗ рдЕрдВрдЧреНрд░реЗрдЬреА рджреЛрд╕реНрддреЛрдВ рдХреЗ рд▓рд┐рдП рдЦреЗрдж рд╣реИред

рдЖрдкрдХреЛ next.config.js useFileSystemPublicRoutes рд╕рдВрдкрддреНрддрд┐ рдХреА рдЬрд╛рдВрдЪ рдХрд░рдирд╛ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╡рд┐рдЪрд╛рд░ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдпрджрд┐ рдпрд╣ рдЧрд▓рдд рд╣реИ, рддреЛ рдЗрд╕рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рд╕рд░реНрд╡рд░ рдореЗрдВ рд╕рднреА рд░реВрдЯ рд╣реИрдВрдбрд▓рд░ рдХреЛ рд╕реНрд╡рдпрдВ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред

рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдЪрдордХрддреА 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 рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдХреЗ рдЕрдВрджрд░ рдкрде + querystring
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. рдЖрдк рдПрдХреНрд╕рдкреНрд░реЗрд╕ рдпрд╛ рдХрд┐рд╕реА рдЕрдиреНрдп рд╕рд░реНрд╡рд░ рдХреЗ рд▓рд┐рдП рдорд╛рд░реНрдЧ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ, рдпрд╣ рдХреЗрд╡рд▓ рдПрд╕рдПрд╕рдЖрд░ рдХреЗ рд▓рд┐рдП рд╣реИред рдХреНрдпрд╛ рдпрд╣ рдХрд░ рджреЗрдЧрд╛ рдорд╛рд░реНрдЧ рдпреВрдЖрд░рдПрд▓ рд╣реИ /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

рдЖрдк рдЙрд╕ рдпреВрдЖрд░рдПрд▓ рдореЗрдВ рд▓рд┐рдВрдХ рдШрдЯрдХ рдХреИрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣реЗ рд╣реИрдВ? рдХреНрдпрд╛ рдЖрдк <Link href="/post/1"> рдпрд╛ <Link href="/post?id=1" as="/post/1"> ?

рдЖрдкрдХреЛ рдЗрд╕реЗ рдбреЙрдХреНрдЯрд░ рдореЗрдВ рд░рдЦрдирд╛ рдЪрд╛рд╣рд┐рдПред :рд╣рд░реНрд╖:

@sergiodxa

рддреЛ рдЗрд╕рдХрд╛ рдПрдХ рдмрд╛рд░ рдФрд░ рд╕рднреА рдХреЗ рд▓рд┐рдП рдЙрддреНрддрд░ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП:

href => pages рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдХреЗ рдЕрдВрджрд░ рдкрде + querystring
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. рдЖрдк рдПрдХреНрд╕рдкреНрд░реЗрд╕ рдпрд╛ рдХрд┐рд╕реА рдЕрдиреНрдп рд╕рд░реНрд╡рд░ рдХреЗ рд▓рд┐рдП рдорд╛рд░реНрдЧ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ, рдпрд╣ SSR рдХреЗ рд▓рд┐рдП _only_ рд╣реИред рдХреНрдпрд╛ рдпрд╣ рдХрд░ рджреЗрдЧрд╛ рдорд╛рд░реНрдЧ рдпреВрдЖрд░рдПрд▓ рд╣реИ /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 рдкрд░ рдЕрдкрдирд╛ рдЕрдЧрд▓рд╛.js рдРрдк рд╣реЛрд╕реНрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рд▓реЗрдХрд┐рди рдЙрд╕рдХреЗ рдкрд╛рд╕ рдПрдХреНрд╕рдкреНрд░реЗрд╕ рд╕рд░реНрд╡рд░ рдЪрд▓рд╛рдиреЗ рдХрд╛ рд╡рд┐рдХрд▓реНрдк рдирд╣реАрдВ рд╣реИред рдХреНрдпрд╛ рдореИрдВ рдЕрдм рдЕрдкрдиреЗ рд╕реБрдВрджрд░ рдпреВрдЖрд░рдПрд▓ рдЦреЛ рджреЗрддрд╛ рд╣реВрдВ рдФрд░ рдХреЗрд╡рд▓ param=value&param=value рд╣реА рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдпрд╛ рдХреЛрдИ рдФрд░ рддрд░реАрдХрд╛ рд╣реИ? рд╕рд░реНрдЬрд┐рдпреЛ рджреНрд╡рд╛рд░рд╛ рдкреЛрд╕реНрдЯ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдЙрджрд╛рд╣рд░рдг рдЖрд╢рд╛рдЬрдирдХ рдирд╣реАрдВ рд▓рдЧрддрд╛

рдореИрдВрдиреЗ рдЧрддрд┐рд╢реАрд▓ рдорд╛рд░реНрдЧреЛрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд▓реЗрдХрд┐рди рдЕрдм рдореЗрд░рд╛ рд╕рд┐рдВрдЧрд▓ рдкреЗрдЬ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдЯреВрдЯрд╛ рд╣реБрдЖ рд╣реИ рдФрд░ рд▓рд┐рдВрдХ рдЬреИрд╕реЗ:

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

рдЕрдм рдПрдХ рдкреВрд░реНрдг рдкреГрд╖реНрда рдкреБрдирдГ рд▓реЛрдб рдХрд░рдиреЗ рдХрд╛ рдХрд╛рд░рдг рдмрдирддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ http://localhost :8080/_next/static/Develop/pages/integration.js рдПрдХ 404 рдирд╣реАрдВ рдорд┐рд▓рд╛ рджреЗрддрд╛ рд╣реИред

@timneutkens рдореИрдВ ZEIT.now рдкрд░ рдЕрдкрдирд╛ рдЕрдЧрд▓рд╛.js рдРрдк рд╣реЛрд╕реНрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рд▓реЗрдХрд┐рди рдЙрд╕рдХреЗ рдкрд╛рд╕ рдПрдХреНрд╕рдкреНрд░реЗрд╕ рд╕рд░реНрд╡рд░ рдЪрд▓рд╛рдиреЗ рдХрд╛ рд╡рд┐рдХрд▓реНрдк рдирд╣реАрдВ рд╣реИред рдХреНрдпрд╛ рдореИрдВ рдЕрдм рдЕрдкрдиреЗ рд╕реБрдВрджрд░ рдпреВрдЖрд░рдПрд▓ рдЦреЛ рджреЗрддрд╛ рд╣реВрдВ рдФрд░ рдХреЗрд╡рд▓ 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')

рдЖрдИрдбреА рдХреЛ рдкреБрдирд░реНрдкреНрд░рд╛рдкреНрдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ, рдФрд░ рдореИрдВ рдЬрд┐рд╕ рдкреЗрдЬ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рд╡рд╣ рд╣реИ [...index].js рдЬреЛ рдПрдХ рдорд▓реНрдЯреА рдбрд╛рдпрдирд╛рдорд┐рдХ рдХреИрдЪ рдСрд▓ рдкреЗрдЬ рд╣реИ, рд▓реЗрдХрд┐рди рдЕрдЧрд░ рдореИрдВ рджреВрд╕рд░реЗ рдкреЗрдЬ рдкрд░ рдЬрд╛рддрд╛ рд╣реВрдВ рдЬреЛ рдбрд╛рдпрдирд╛рдорд┐рдХ рдирд╣реАрдВ рд╣реИ рддреЛ рдпрд╣ рдареАрдХ рд╕реЗ рдХрд╛рдо рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдЙрджрд╛рд╣рд░рдг car.js рд╡рд╛рд╣рди рдХреЛ рдзрдХреНрдХрд╛.рдЬреЗрдПрд╕..
рдХреНрдпрд╛ рдХреЛрдИ рдмреЗрд╣рддрд░ рддрд░реАрдХрд╛ рд╣реИ рдЬрд╣рд╛рдВ рдореИрдВ рдЕрдкрдиреЗ рдбрд╛рдпрдирд╛рдорд┐рдХ рдХреИрдЪ рдХреЛ рд╕рднреА рдкреЗрдЬ рдкрд░ рдзрдХреЗрд▓ рд╕рдХрддрд╛ рд╣реВрдВ рдФрд░ рдлрд┐рд░ рдЖрдИрдбреА рдХреЛ рдорд╛рд╕реНрдХ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдФрд░ рдлрд┐рд░ рднреА рдЗрд╕реЗ рдкреБрдирдГ рдкреНрд░рд╛рдкреНрдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ ..?

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

flybayer picture flybayer  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

irrigator picture irrigator  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

wagerfield picture wagerfield  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

lixiaoyan picture lixiaoyan  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

olifante picture olifante  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ