рдореИрдВ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдЕрдкрдиреЗ post/:id
рдорд╛рд░реНрдЧреЛрдВ рдХреЗ рд╕рд╛рде рдПрдХ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬрд╣рд╛рдВ рдЕрдЧрд▓рд╛ рдореЗрд░реЗ рдШрдЯрдХ рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ 404
рдкреГрд╖реНрда рдХреЛ рдЪрдордХрддрд╛ рд╣реИред рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рдореИрдВрдиреЗ рд╕реЛрдЪрд╛ рдерд╛ рдХрд┐ рдпрд╣ рдПрдХ redux рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЗ рдереЗ рдХреНрдпреЛрдВрдХрд┐ рдореЗрд░реЗ post/id
рдкреГрд╖реНрда рдРрдк рд╕реНрдерд┐рддрд┐ рдХреА рдЬрд╛рдВрдЪ рдХрд░ рд░рд╣реЗ рд╣реИрдВ filter
рдЬреЛ рднреА рдШрдЯрдХ рдЙрдерд▓реЗ рд░реВрдЯрд┐рдВрдЧ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рджрд┐рдЦрд╛рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред
рд╕реНрд▓реИрдХ рдЪреИрдирд▓ рдореЗрдВ рдЗрд╕ рдкрд░ рдЪрд░реНрдЪрд╛ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдореИрдВрдиреЗ рдПрдХ рдФрд░ рдПрдкреАрдЖрдИ рдХреЙрд▓ рдЬреЛрдбрд╝рд╛ рдЬреЛ рдкреНрд░рддреНрдпреЗрдХ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдХреЛ рдкреБрдирдГ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдЧрд╛ рд▓реЗрдХрд┐рди рдЬрд▓реНрджреА рд╕реЗ рдкрд╛рдпрд╛ рдХрд┐ рдореБрдЭреЗ рдЕрднреА рднреА рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛ рд╣реИред рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдХрдо рд╕реЗ рдХрдо рдПрдХ рдЕрдиреНрдп рдбреЗрд╡рд▓рдкрд░ рдХреЗ рд▓рд┐рдП рд╣реБрдЖ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдореИрдВ рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдХреЛрдИ рдореБрдЭреЗ рд╕рд╣реА рджрд┐рд╢рд╛ рдореЗрдВ рдЗрдВрдЧрд┐рдд рдХрд░ рд╕рдХрддрд╛ рд╣реИ? рдореИрдВ рдЗрд╕ рд╡реНрдпрдХреНрддрд┐рдЧрдд рдкреЛрд░реНрдЯрдлреЛрд▓рд┐рдпреЛ рдХреЛ рд╕рдорд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬрд┐рд╕реЗ рдореИрдВрдиреЗ рдЕрдЧрд▓реЗ рдХреЗ рд╕рд╛рде рдмрдирд╛рдпрд╛ рд╣реИред
рдиреАрдЪреЗ, рдЖрдк рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреНрдпрд╛ рд╣реЛ рд░рд╣рд╛ рд╣реИред рд╕рдм рдХреБрдЫ A1 рджрд┐рдЦрддрд╛ рд╣реИ рд╕рд┐рд╡рд╛рдп рдЙрд╕ 404 рдХреЗ рдЬреЛ рдХрд┐рд╕реА рд╡рд┐рд╢рд┐рд╖реНрдЯ рдкреЛрд╕реНрдЯ рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдП рдЬрд╛рдиреЗ рдкрд░ рдЭрдкрдХрд╛рддрд╛ рд╣реИред
рдореИрдВрдиреЗ рдЬреЛ рд▓рд╛рдн рдкреНрд░рд╛рдкреНрдд рдХрд┐рдпрд╛ рд╣реИ, рд╡рд╣ рдЬрдмрд░рджрд╕реНрдд рд╣реИ, рд▓реЗрдХрд┐рди рдЗрд╕ рддрд░рд╣ рдХреА рдХреБрдЫ рдЫреЛрдЯреА-рдореЛрдЯреА рд╕рдорд╕реНрдпрд╛рдПрдВ рд╣реИрдВ, рдЬрд┐рдиреНрд╣реЛрдВрдиреЗ рдореБрдЭреЗ рдереЛрдбрд╝рд╛ рд╣реИрд░рд╛рди рдХрд░ рджрд┐рдпрд╛ рд╣реИред рд╡реИрд╕реЗ рднреА, рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рдореИрдВ рдХреЛрдИ рдЕрддрд┐рд░рд┐рдХреНрдд рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдзрдиреНрдпрд╡рд╛рдж
рд╡рд╣реА рдореБрджреНрджрд╛ +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
рдкреГрд╖реНрда рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣рд╛ рд╣реИред
@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 />
рдЯреИрдЧ рдирд╣реАрдВ рдмрджрд▓реЗ рд╣реИрдВ, рдлрд┐рд░ рднреА рдЕрднреА рднреА рд╕рдорд╕реНрдпрд╛ рд╣реИ ред
рдлрд┐рд░ рд╕реЗ, рдореИрдВ рдпрд╣ рдмрддрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдКрдкрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╡реАрдбрд┐рдпреЛ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдмрдирд╛рдП рдЧрдП рдЙрджрд╛рд╣рд░рдг рд░реЗрдкреЛ рдХреЗ рдЕрдВрджрд░ рддреНрд░реБрдЯрд┐ рдХреЛ рдкреБрди: рдкреНрд░рд╕реНрддреБрдд рдХрд░рддрд╛ рд╣реИ - 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
рдорд╛рд░реНрдЧ рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рд▓реЛрдб рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реИред
рдПрдХ рдиреЗ рджреЗрдЦрд╛ рдХрд┐ рдЬрдм рдореИрдВ рд▓рд┐рдВрдХ рдореЗрдВ prefetch
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдЕрдм рдкреНрд░рддреНрдпреЗрдХ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдХреЗ рд▓рд┐рдП рд▓рд┐рдВрдХ рдкреНрд░рджрд╛рди рдХрд░рддреЗ рд╕рдордп Page Does Not Exist Error
рдлреЗрдВрдХрддрд╛ рд╣реИред рдЖрдк рдиреАрдЪреЗ рдореЗрд░реЗ рдХрдВрд╕реЛрд▓ рдХрд╛ рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВред
рдЬрдм рдореИрдВ рдкреНрд░реАрдлреЗрдЪ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддрд╛, рддреЛ рдКрдкрд░ рджрд┐рдЦрд╛рдИ рдЧрдИ рддреНрд░реБрдЯрд┐ рдЕрдм рдореМрдЬреВрдж рдирд╣реАрдВ рд╣реИ рд▓реЗрдХрд┐рди рдпрд╣ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░рддреА рд╣реИред рдЬрдм рдореИрдВрдиреЗ рд╢реБрд░реВ рдореЗрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдкреЛрд╕реНрдЯ рдХрд┐рдпрд╛ рдерд╛, рддреЛ рдореЗрд░рд╛ рдШрдЯрдХ рдкреНрд░рддреНрдпреЗрдХ post/:id
рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдореЗрд░реЗ рдмреНрд▓реЙрдЧ рдХреЛ рдкреНрд░рд╛рд░рдВрдн рдХрд░ рд░рд╣рд╛ рдерд╛ред рдореИрдВрдиреЗ рддрдм рд╕реЗ рд╣рдЯрд╛ рджрд┐рдпрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдЕрдм рд╕реЗ рд╡реНрдпрдХреНрддрд┐рдЧрдд рдкреЛрд╕реНрдЯ рдХрднреА рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред
рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рдореИрдВ рдХреЛрдИ рдФрд░ рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдЬреЛ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдирд┐рджрд╛рди рдХрд░рдиреЗ рдореЗрдВ рдорджрдж рдХрд░ рд╕рдХреЗред рдореИрдВ
@tgrecojs рдореБрдЭреЗ рд▓рдЧрднрдЧ рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИред prefetch
рдиреЗ рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рдХрд┐рдпрд╛ред
рдореБрдЭреЗ рдЬреЛ рд╡реНрдпрд╡рд╣рд╛рд░ рдорд┐рд▓рддрд╛ рд╣реИ рд╡рд╣ рдирд┐рдореНрди рд╣реИ:
рдореБрдЭреЗ рдЖрд╢рд╛ рд╣реИ рдХрд┐ рдпрд╣ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдбреАрдмрдЧ рдХрд░рдиреЗ рдореЗрдВ рдорджрдж рдХрд░ рд╕рдХрддрд╛ рд╣реИ!
рдЕрддрд┐рд░рд┐рдХреНрдд рдЬрд╛рдирдХрд╛рд░реА: рдиреЛрдб 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 рд╣реИ
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>
}
}
/products/:id
рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП pages/product.js
рдФрд░ рдЙрдкрд▓рдмреНрдз рдХрд░рд╛рдиреЗ id
рдХреЗ рд╣рд┐рд╕реНрд╕реЗ рдХреЗ рд░реВрдк query
getInitialProps рдореЗрдВ:server.get("/products/:slug", (req, res) => {
return app.render(req, res, "/product", { slug: req.params.slug })
})
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 рд╣реИ
- рдЖрдкрдиреЗ
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> } }
- рдЖрдк рдПрдХреНрд╕рдкреНрд░реЗрд╕ рдпрд╛ рдХрд┐рд╕реА рдЕрдиреНрдп рд╕рд░реНрд╡рд░ рдХреЗ рд▓рд┐рдП рдорд╛рд░реНрдЧ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ, рдпрд╣ 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 }) })
- рдХреНрд▓рд╛рдЗрдВрдЯ рд╕рд╛рдЗрдб рд░реВрдЯрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдЖрдк рдЗрд╕ рддрд░рд╣
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¶m=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¶m=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 рд╡рд╛рд╣рди рдХреЛ рдзрдХреНрдХрд╛.рдЬреЗрдПрд╕..
рдХреНрдпрд╛ рдХреЛрдИ рдмреЗрд╣рддрд░ рддрд░реАрдХрд╛ рд╣реИ рдЬрд╣рд╛рдВ рдореИрдВ рдЕрдкрдиреЗ рдбрд╛рдпрдирд╛рдорд┐рдХ рдХреИрдЪ рдХреЛ рд╕рднреА рдкреЗрдЬ рдкрд░ рдзрдХреЗрд▓ рд╕рдХрддрд╛ рд╣реВрдВ рдФрд░ рдлрд┐рд░ рдЖрдИрдбреА рдХреЛ рдорд╛рд╕реНрдХ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдФрд░ рдлрд┐рд░ рднреА рдЗрд╕реЗ рдкреБрдирдГ рдкреНрд░рд╛рдкреНрдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ ..?
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рддреЛ рдЗрд╕рдХрд╛ рдПрдХ рдмрд╛рд░ рдФрд░ рд╕рднреА рдХреЗ рд▓рд┐рдП рдЙрддреНрддрд░ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП:
href
=>pages
рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдХреЗ рдЕрдВрджрд░ рдкрде + querystringas
=> рдмреНрд░рд╛рдЙрдЬрд╝рд░ url рдмрд╛рд░ рдореЗрдВ рд░реЗрдВрдбрд░ рдХрд┐рдпрд╛ рдЧрдпрд╛рдЙрджрд╛рд╣рд░рдг:
рдЖрдкрдХреЗ рдкрд╛рд╕
/products/:id
рдирд╛рдо рдХрд╛ рдПрдХ url рд╣реИpages/product.js
/products/:id
рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПpages/product.js
рдФрд░ рдЙрдкрд▓рдмреНрдз рдХрд░рд╛рдиреЗid
рдХреЗ рд╣рд┐рд╕реНрд╕реЗ рдХреЗ рд░реВрдкquery
getInitialProps рдореЗрдВ:next/link
рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ:рдЖрдкрдХреЛ рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ
href
рдФрд░as
рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ Next.js рдХреНрд▓рд╛рдЗрдВрдЯ рдкрдХреНрд╖ рдХреЗ рдХрд┐рд╕реА рднреА рдЕрдиреНрдп рдкреЗрдЬ рд╕реЗ рдЕрд╡рдЧрдд рдирд╣реАрдВ рд╣реИред рд╣рдо рдХреНрд▓рд╛рдЗрдВрдЯ рд╕рд╛рдЗрдб рдХреЛ рд╕рднреА рдкреЗрдЬреЛрдВ рдХрд╛ рдПрдХ рдореЗрдирд┐рдлреЗрд╕реНрдЯ рдирд╣реАрдВ рднреЗрдЬрддреЗ рд╣реИрдВ рдФрд░ рдмрд╛рдж рдХреЗ рдорд╛рд░реНрдЧ рдЖрд▓рд╕реА рд╣реЛ рдЬрд╛рддреЗ рд╣реИрдВ, рдЬреЛ рд╕реНрдХреЗрд▓реЗрдмрд▓ рд╣реИредрдПрдХ рд╕рд╛рдореБрджрд╛рдпрд┐рдХ рдкреИрдХреЗрдЬ рд╣реИ рдЬреЛ рд╕рднреА рдорд╛рд░реНрдЧреЛрдВ рдХрд╛ рдкреВрд░реНрд╡-рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдореИрдирд┐рдлреЗрд╕реНрдЯ рднреЗрдЬрдХрд░
href
рдФрд░as
рдкреНрд░рджрд╛рди рдХрд░рддрд╛ рд╣реИ, рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рд╣рдо рдЕрдиреБрд╢рдВрд╕рд╛ рдХрд░рддреЗ рд╣реИрдВ рдХрд┐ рдРрд╕рд╛ рди рдХрд░рдиреЗ рдкрд░ рд╕рднреА рд╕рдВрднрд╛рд╡рд┐рдд рдорд╛рд░реНрдЧреЛрдВ рдХрд╛ рдкреВрд░реНрдг рдореИрдирд┐рдлреЗрд╕реНрдЯ рди рднреЗрдЬреЗрдВред рдЕрдзрд┐рдХ рд╕реНрдХреЗрд▓реЗрдмрд▓ рд╣реИhttps://github.com/fridays/next-routes
рд╕рд╛рде рд╣реА, рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ 404 рд░реЗрдВрдбрд░ рдХрд░рдирд╛ рдЕрдм Next.js рдХрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╡реНрдпрд╡рд╣рд╛рд░ рдирд╣реАрдВ рд╣реИред рдЗрд╕рдХреЗ рдмрдЬрд╛рдп, рд╣рдо рдЬрд╝реЛрди рд╕реБрд╡рд┐рдзрд╛ рдХреЗ рд▓рд┐рдП рдкреГрд╖реНрда рдХреЛ рдкреБрдирдГ рд▓реЛрдб рдХрд░рддреЗ рд╣реИрдВред