Next.js: 마지막으로 페이지를 렌더링하기 전에 사용자 정의 경로 `post/`id`가 404로 깜박입니다.

같은 문제 +1

링크 구성 요소를 해당 URL에 어떻게 렌더링합니까? <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 는 실제 URL입니다. pages/blog.js 있고 id를 쿼리로 수신하면 href 는 /blog?id=${x.id} href 이어야 하고 as 는 이 경우 /blog/${x.id} 귀하의 예쁜 사용자 정의 URL입니다.

@sergiodxa 이 코드를 제자리에 넣었습니다.

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

이제 URL에 id 를 추가하면서 클릭할 때마다 /blog 페이지를 다시 렌더링합니다.

@tgrecojs 이 코드 조각이 도움이

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

https://www.someURL.com/journal/articlePath/morePath/evenMorePath 로 렌더링됩니다.

내 문제가 아닌 @ugiacoman 경로가 어떻게 작동하는지 이해합니다. 내 초기 보고서에서 볼 수 있는 경우 각 블로그 게시물로 성공적으로 이동하고 있지만 문제는 이상한 404 오류입니다.

@tgrecojs 예제 https://github.com/sergiodxa/next-custom-query (배포: https://next-custom-query.now.sh/blog)를 사용하는 방법을 볼 수 있습니다. 위에서 설명한 대로 next/link 구성 요소를 사용하여 다시 로드하지 않고 사용자 정의 URL을 404로 만듭니다.

@sergiodxa 감사합니다! 방금 확인하고 현재 ping 중인 Google 블로거 API에 대한 비동기 호출을 추가했습니다. 아래에서 경로를 탐색하고 있지만 데이터를 올바르게 로드하지 않는 것을 볼 수 있습니다.

제거된 GIF

이제 이 문제는 내 첫 번째 의견에 표시된 것과는 이 문제를 약간 다르게 재현한 것입니다. 처음 이 문제에 부딪쳤을 때 나는 redux를 사용하고 있고 애플리케이션 상태가 post/id 페이지를 전달하지 않기 때문이라고 생각했습니다. 이로 인해 귀하가 만든 앱에 통합한 것처럼 각 게시물에 대해 새로운 API 호출을 통합하게 되었지만 여전히 동일한 문제가 있음을 발견했습니다.

귀하의 리포지토리를 분기하는 데 문제가 발생했습니다 😬 여기에서 내 코드를 찾을 수 있습니다 -> https://github.com/tgrecojs/next-custom-query-async . 당신의 생각을 알려주세요! 😄

프로젝트를 포크할 때 usageLimits 오류 메시지와 함께 동일한 오류가 발생합니다. 아마도 그 오류가 발생하는 이유일 것입니다.

확인. 내일 조금 더 조사해 보겠습니다만, 제가 이슈를 열었을 때 올린 영상이 /blog/:id 라우트에서 API 요청을 하고 있지 않다는 점을 지적하고 싶습니다. 대신 /blog 경로 전환에서 수집된 내 redux 저장소의 게시물을 필터링하므로 이 문제에 도달한 이유가 될 수 없습니다. 내 redux-store와 관련이 있다고 생각했기 때문에 두 번째 API 호출( blog/:id 내부에서 수행됨)만 구현했지만 동일한 오류가 발생했지만 내 코드의 현재 구현은 아닙니다.

동일한 버그가 발생한다는 것을 깨닫자마자 API 호출을 하나만 사용(Inside /blog )한 다음 id로 필요한 블로그 게시물을 필터링하는 것으로 다시 전환했습니다.

@sergiodxa 사용량 제한이 아님을 확인할 수 있습니다. id 이 항상 /blog/:id 경로로 올바르게 전달되는 것은 아님을 알 수 있습니다... 수신 중인 400 오류를 첨부했습니다. id 이 정의되지 않았으며 (이 경우) 오류가 발생하는 것 같습니다.

아래에 다른 동영상을 포함시켰습니다. 왜 이런 식으로 행동하는지에 대한 생각이 있습니까? 이 저장소 내에서 <Link /> 태그를 변경하지 않았지만 여전히 문제가 있습니다 😬 .

다시 말하지만, 위의 비디오는 https://github.com/sergiodxa/next-custom-query에서 생성한 예제 리포지토리 내에서 오류를 재현하는 것을 보여줍니다.

사용자 지정 경로 없이도 404가 깜박입니다. 다음 코드를 사용하여 pages/ orders.js 라는 파일만 있습니다.

import { Component } from 'react';

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

export default Orders;

꽤 중요한 문제인 것 같습니다 😂

나는 그것을 복제하려고 시도했고 URL 끝에 후행 슬래시가 있기 때문에 /orders 로 이동하면 404가 표시되지 않지만 /orders/ 로 이동하면 표시됩니다. 404가 콘텐츠 전에 깜박이며 이는 개발 및 프로덕션 모드에서 발생합니다.

아 이것은 알려진 문제입니다. https://github.com/zeit/next.js/issues/1189

내 문제는 후행 슬래시로 인해 발생하지 않았으므로 다른 것이 있어야 합니다. 맞나요?

내 코드를 약간 변경했으며 prefetch 사용하는 버전과 사용하지 않는 버전의 2가지 버전을 배포했습니다. 두 응용 프로그램 모두 이제 post/:id 경로를 성공적으로 로드할 수 없습니다.

프리페치 사용 - https://tgrecojs-hltqztsjpx.now.sh/

링크에서 prefetch 를 사용하면 이제 각 블로그 게시물에 대한 링크를 렌더링할 때 Page Does Not Exist Error 발생합니다. 아래에서 내 콘솔의 스크린샷을 볼 수 있습니다.

프리페치 없이 - https://tgrecojs-qzpspdjrin.now.sh/

프리페치를 사용하지 않으면 위에 표시된 오류는 더 이상 존재하지 않지만 응용 프로그램을 렌더링하지 않습니다. 이 문제를 처음 게시했을 때 내 구성 요소는 각 post/:id 구성 요소에 대해 블로그를 초기화하고 있었습니다. 그 이후로 개별 게시물이 렌더링되지 않는 것을 제거했습니다.

이 문제를 진단하는 데 도움이 되는 추가 정보를 제공할 수 있는지 알려주세요. 🤔

@tgrecojs 거의 똑같은 문제가 있습니다. prefetch 는 내 문제를 해결하지 못했습니다.

내가 얻는 행동은 다음과 같습니다.

• 사용자가 링크를 클릭합니다.
• 404 오류가 나타납니다
• 페이지가 새로고침(??)
• 다시 로드하면 올바른 페이지가 표시됩니다.

이것이 문제를 디버깅하는 데 도움이 되기를 바랍니다!

추가 정보: 노드 v6.10.3 , Chrome Version 60.0.3112.90

편집: https://datahub.now.sh/ 테스트할 수 있도록 앱을 배포했습니다. 이 동작이 있는 링크는 /@[username]입니다.

@Theo- 그 다음/링크의 href는 user?id=1 /user?id=1 대신 /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를 사용하여 CSR 또는 SSR인지 확인하는 고차 구성 요소가 있습니다. SSR인 경우 블로그 게시물을 기록하는 데 필요한 기능을 전달합니다.

예, 이미 변수가 제대로 작동하고 있습니다. 내 BLOGGER_API_KEY 를 가져오는 HOC를 사용하여 내 /blog 경로를 렌더링하고 있으므로 해당 예제에서 작동합니다.... 내 /post/:id s 하위 페이지는 아무 것도 사용하지 않습니다. 환경 변수.

조금 더 파헤칠 예정입니다. 바라건대 나는 그것의 바닥에 도달할 수 있습니다!

여기에서 발생하는 대부분의 문제가 해결된 것 같습니다. 이 문제에 대해서도 작업하겠습니다 https://github.com/zeit/next.js/issues/1189

지금 닫고 있습니다. 하지만 핵심적으로 해야 할 일이 있으면 알려주십시오.

@sergiodxa 어젯밤 대화에 따라 내 문제를 보여주는 lil barebones 앱을 만들었습니다. 궁금한 점이 있으면 알려주세요! 나는 그것과 관련된 모든 것에 대해 당신을 기쁘게 할 것입니다! 😄

• 다음 블로그 분기 404-err

고정되지 않았습니다.

나는 같은 문제가 있지만 사용자 정의 경로가 없습니다. /pages/pipeline.tsx가 있고 /pipeline url이 제대로 작동하는 동안 /pipeline/이 404로 깜박이고 "getInitialProps"를 호출하지 않고 내 페이지를 로드하려고 합니다(서버에서 404였기 때문에!).

@ex3ndr 이것이 문제를 해결할지 확실하지 않지만 비슷한 문제가 있어서 해결했습니다.
https://github.com/zeit/next.js#disabling -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 값이 다릅니다.

구성 요소 및 actualPage 값의 이름을 search 내 페이지 슬러그와 동일하게 바꾸면 404번의 깜박임이 사라집니다. 아래 작업 코드를 참조하십시오.

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

이제 둘 다 /search 있습니다.

내 영어 친구들에게 미안합니다.

next.config.js useFileSystemPublicRoutes 속성을 확인하는 것이 좋습니다. false이면 server.js의 모든 경로 처리기를 직접 정의해야 함을 의미합니다.

이것은 나를 위해 깜박이는 404를 수정합니다.

링크

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

서버 측

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

페이지의 액세스 매개변수

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

따라서 이 질문에 한 번만 답하자면 다음과 같습니다.

href => pages 디렉토리 내부의 경로 + 쿼리 문자열
as => 브라우저 URL 표시줄에 렌더링됨

예시:

/products/:id 라는 URL이 있습니다.

1. pages/product.js 만들었습니다.

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

1. Express 또는 다른 서버에 경로를 추가합니다. 이는 SSR 에만 해당됩니다 . 이것이 할 것입니다 것은 URL 경로입니다 /products/:id 에 pages/product.js 및 제공 id 의 일환으로 query getInitialProps에서 :

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

1. 클라이언트 측 라우팅의 경우 다음과 같이 next/link 사용합니다.

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

href 및 as 를 명시적으로 제공해야 하는 이유는 Next.js가 클라이언트 측의 다른 페이지를 인식하지 못하기 때문입니다. 우리는 모든 페이지의 매니페스트를 클라이언트 측에 보내지 않으며 후속 경로는 확장 가능한 지연 로드됩니다.

모든 경로의 미리 정의된 매니페스트를 전송하여 href 및 as 를 제공하는 추상화하는 커뮤니티 패키지가 있습니다

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

또한 렌더링 404는 더 이상 Next.js의 기본 동작이 아닙니다. 대신 영역 기능에 대한 페이지를 다시 로드합니다.

Tim, 완전히 명확한 설명 감사합니다!

@timneutkens
링크의 href 및 as. 나는 다른 값을 전달합니다. href 의 값과 as 의 값을 어떻게 얻을 수 있습니까?
나는 데모를 테스트합니다. req.params.slug 가 as 의 값이 될 것이라고 생각합니다. 그러면 href 의 값을 어떻게 얻을 수 있습니까?

@timneutkens 당신은 저를 구해주었습니다 내 문제에 대해 몇 시간 동안 고통스럽게 검색했는지 모릅니다 :D

링크 구성 요소를 해당 URL에 어떻게 렌더링합니까? <Link href="/post/1"> 또는 <Link href="/post?id=1" as="/post/1"> 입니까?

이것을 문서에 넣어야 합니다. :기쁨:

@sergiodxa

따라서 이 질문에 한 번만 답하자면 다음과 같습니다.

href => pages 디렉토리 내부의 경로 + 쿼리 문자열
as => 브라우저 URL 표시줄에 렌더링됨

예시:

/products/:id 라는 URL이 있습니다.

1. pages/product.js 만들었습니다.

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

1. Express 또는 다른 서버에 경로를 추가합니다. 이것은 SSR의 경우 _only_입니다. 이것이 할 것입니다 것은 URL 경로입니다 /products/:id 에 pages/product.js 및 제공 id 의 일환으로 query getInitialProps에서 :

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

1. 클라이언트 측 라우팅의 경우 다음과 같이 next/link 사용합니다.

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

href 및 as 를 명시적으로 제공해야 하는 이유는 Next.js가 클라이언트 측의 다른 페이지를 인식하지 못하기 때문입니다. 우리는 모든 페이지의 매니페스트를 클라이언트 측에 보내지 않으며 후속 경로는 확장 가능한 지연 로드됩니다.

모든 경로의 미리 정의된 매니페스트를 전송하여 href 및 as 를 제공하는 추상화하는 커뮤니티 패키지가 있습니다

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

또한 렌더링 404는 더 이상 Next.js의 기본 동작이 아닙니다. 대신 영역 기능에 대한 페이지를 다시 로드합니다.

다음과 같은 목록 헤더 배열만 있으면 무엇을 할 수 있습니까?
[ home: '/home', about:'/about', post: 'post/:post_id?' ] .
다음에는 as's 값만 얻을 수 있지만 href 어떻습니까? 고마워

당신이 사용하는 경우 router.push() 대신 <Link> 어떻게 동일한 결과를 얻을 수 있습니다?

@justinmchase 방금 같은 문제가있었습니다. 아직 확인하지 않은 경우 다음 라우터 설명서를 확인하십시오.

Router.push(url, as, options) 로 사용할 수 있습니다.

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

@timneutkens ZEIT.now에서 next.js 앱을 호스팅하고 싶지만 익스프레스 서버를 실행할 수 있는 옵션이 없습니다. 지금 내 예쁜 URL을 잃어버리고 param=value&param=value 만 할 수 있습니까 아니면 다른 방법이 있습니까? Sergio가 게시한 예 는 유망해 보이지 않습니다.

동적 경로를 시도했지만 이제 단일 페이지 응용 프로그램이 손상되고 다음과 같은 링크가 있습니다.

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

이제 http://localhost :8080/_next/static/development/pages/integration.js가 404 not found를 반환하기 때문에 전체 페이지를 다시 로드합니다.

@timneutkens ZEIT.now에서 next.js 앱을 호스팅하고 싶지만 익스프레스 서버를 실행할 수 있는 옵션이 없습니다. 지금 내 예쁜 URL을 잃어버리고 param=value&param=value 만 할 수 있습니까 아니면 다른 방법이 있습니까? Sergio가 게시한 예 는 유망해 보이지 않습니다.

동적 경로에는 사용자 지정 서버가 필요하지 않습니다( https://nextjs.org/docs/routing/dynamic-routes 참조).

@timneutkens 빠른 회신에 감사드립니다. 동적 경로를 시도했지만 단일 페이지 응용 프로그램이 중단됩니다(업데이트 참조). 개발 모드의 내 package.json 스크립트에서 next 하여 로컬로 실행합니다.

코드가 있는 pages/integration/index.js 및 다음과 함께 pages/integration/[slug].js 하여 문제를 해결했습니다.

import ProductDetailPage from './index'
export default ProductDetailPage

귀하가 설명한 것을 수행하는 올바른 방법은 pages/integration/[slug].js

그리고 다음과 같이 링크합니다.

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

안녕하세요 제가 이걸 왜 부를지 여쭤봐도 될까요?

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

id를 검색할 수 없고 내가 사용하는 페이지는 [...index].js입니다. 이는 다중 동적 catch all 페이지이지만 동적 페이지가 아닌 다른 페이지로 연결하면 car.js 예제가 제대로 작동할 수 있습니다. Vehicle.js로 푸시..
내 동적 catch all 페이지로 푸시한 다음 ID를 마스크하고 여전히 검색할 수 있는 더 좋은 방법이 있습니까?