next.js中的云前标头在导航到页面时缺少

发布于 2025-01-30 13:11:15 字数 1703 浏览 2 评论 0 原文

我正在使用 serverless.yml 文件，以便CloudFront将传递可用的各个位置标题：例如：

...
cloudfront:
  defaults:
    forward:
      headers:
        [
          CloudFront-Viewer-Country,
          CloudFront-Viewer-Country-Name,
          CloudFront-Viewer-Country-Region,
          CloudFront-Viewer-Country-Region-Name,
          CloudFront-Viewer-Latitude,
          CloudFront-Viewer-Longitude
        ]
...

在Home Map Component pages/map.tsx 中，我们可以在 getServersideProps 中检索位置标题：

export const getServerSideProps: GetServerSideProps = async (context: GetServerSidePropsContext) => {
  const userLatHeader = context.req.headers['cloudfront-viewer-latitude'];
  const userLngHeader = context.req.headers['cloudfront-viewer-longitude'];
  const userLocation: LatLngLiteral = {
    lat: userLatHeader ? parseFloat(String(userLatHeader)) : DEFAULT_MAP_CENTRE.lat,
    lng: userLngHeader ? parseFloat(String(userLngHeader)) : DEFAULT_MAP_CENTRE.lng,
  };

  return {
    props: {
      userLocation,
    }
  }
}

我们使用位置标题在地图加载时将用户位置中心。我们发现，如果我们直接访问地图页面IE address.com/map ，则找到了正确的云标题值，我们可以使用它们将地图放在当前位置中。组件从其他页面导出到地图页面

index.tsx

<Link href={{ pathname: '/map', query }}>
  <a>Go to map</a>
</Link>

但是，如果我们使用 next/link 在 getServersideProps 中以不确定的。是什么造成这一点？如果我在 getserversideprops 中检索 index.tsx 中的同一标头，然后将它们记录出来，则它们是预期的位置值，但是当导航到> 页面/地图时。 TSX 从那里以未定义的来贯穿。

原文

I'm working on a sizeable Next.js app hosted on AWS using serverless-nextjs. We have set up the serverless.yml file such that CloudFront will pass on the various location headers that are available e.g.:

...
cloudfront:
  defaults:
    forward:
      headers:
        [
          CloudFront-Viewer-Country,
          CloudFront-Viewer-Country-Name,
          CloudFront-Viewer-Country-Region,
          CloudFront-Viewer-Country-Region-Name,
          CloudFront-Viewer-Latitude,
          CloudFront-Viewer-Longitude
        ]
...

In the home map component pages/map.tsx, we can retrieve the location headers in getServerSideProps:

export const getServerSideProps: GetServerSideProps = async (context: GetServerSidePropsContext) => {
  const userLatHeader = context.req.headers['cloudfront-viewer-latitude'];
  const userLngHeader = context.req.headers['cloudfront-viewer-longitude'];
  const userLocation: LatLngLiteral = {
    lat: userLatHeader ? parseFloat(String(userLatHeader)) : DEFAULT_MAP_CENTRE.lat,
    lng: userLngHeader ? parseFloat(String(userLngHeader)) : DEFAULT_MAP_CENTRE.lng,
  };

  return {
    props: {
      userLocation,
    }
  }
}

We use the location headers to centre on the user's location when the map loads. We have found that if we visit the map page directly i.e. address.com/map, the correct CloudFront header values are found and we can use them to centre and zoom the map to the current location. However, if we navigate from a different page to the map page using a next/link component e.g.:

index.tsx

<Link href={{ pathname: '/map', query }}>
  <a>Go to map</a>
</Link>

The map will load using the defaults for the userLocation, because the CloudFront headers are coming through as undefined in getServerSideProps. What could be causing this? If I retrieve the same headers in getServerSideProps in index.tsx and log them out, they are the expected location values, but then when navigating to pages/map.tsx from there they come through as undefined.