Next.js 刷新时，Nextjs页面转到404

我正在使用nextjs和graphql进行shopify POC

我有一个组件，显示产品列表，上面有指向产品页面的链接

<Link
   as={`${handle}/product/${url}`}
   href={`/product?id=${item.id};`}>
   <a>{item.title}</a>
</Link>

但在幕后，它实际上只是使用一个名为products的页面，我正在传递产品id

现在在product.js（粘贴在下面）中，我将获取id的查询字符串值，并执行另一个查询以获取产品。一切正常，但如果我点击刷新或复制并粘贴到一个新窗口的网址，我得到404

我知道这与路由有关，但我不确定我需要做什么来解决这个问题。谢谢

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';


class product extends Component {
  static async getInitialProps({query}) {
    console.log("query", query)
    return query ? { id: query.id.replace(';', '') } : {}
  }

  render() {

    const PRODUCT_FRAGMENT = gql`
        fragment ProductPage on Product {
          title
          description
          descriptionHtml
          id
          images(first: 10, maxWidth: 600) {
            edges {
              node {
                id
                altText
                originalSrc
              }
            }
          }
        }
      `;

    const PRODUCT_FETCH_QUERY = gql`
      query PRODUCT_FETCH_QUERY {
        node(id: "${this.props.id}") {
          __typename
          ...ProductPage
        } 
      }
      ${PRODUCT_FRAGMENT}
    `;

    return (
      <div>
         <Query query={PRODUCT_FETCH_QUERY}>
              {({ data, error, loading }) => {
                console.log("data", data)
                if (loading) return <p>Loading...</p>
                if (error) return <p>Error: {error.message}</p>
                return null}
              }
            </Query>
      </div>
    );
  }
}

product.propTypes = {

};

export default product;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从'react apollo'导入{Query}；
从“graphql标签”导入gql；
类产品扩展组件{
静态异步getInitialProps（{query}）{
日志（“查询”，查询）
返回查询？{id:query.id.replace（'；'，''）}:{}
}
render（）{
常量乘积_片段=gql`
产品片段产品页面{
标题
描述
描述HTML
身份证件
图像（第一个：10，最大宽度：600）{
边缘{
节点{
身份证件
altText
原创RC
}
}
}
}
`;
const PRODUCT\u FETCH\u QUERY=gql`
查询产品\u获取\u查询{
节点（id:“${this.props.id}”）{
__字体名
…产品页
} 
}
${PRODUCT_FRAGMENT}
`;
返回(
{（{数据，错误，加载}）=>{
console.log（“数据”，数据）
如果（加载）返回加载

if（error）返回错误：{error.message}

返回空值}
}
);
}
}
product.propTypes={
};
导出默认产品；
这是因为当您使用
下一个/link
组件时，
href
道具具有指向页面的“真实”URL，其中设置了项目ID的查询参数。这意味着在客户端（浏览器）上，Next.js可以使用数据查询的参数加载正确的页面（product.js页面）

但是，当您从服务器加载时，无论是通过重新加载页面还是在新窗口中打开页面，Next.js都不知道要加载哪个页面，在这种情况下，我认为它会尝试查找文件
/pages/new releases/product/Plattan-2-Bluetooth.js
，而该文件当然不存在

如果您想拥有这些类型的URL，您必须确保请求也被路由到服务器上的正确页面文件（
/pages/product.js
）。您可以通过创建自定义服务器来实现这一点。在Next.js repo中有大量的应用程序，包括一个使用。这也包括在该网站的“学习”部分，在一个名为

如果您决定使用Express，您将得到以下结果：

server.get('/:collection/product/:productUrl', (req, res) => {
  return app.render(req, res, '/product', { productUrl: req.params.productUrl})
})

这将呈现产品页面，您将在
getInitialProps（）
中的
query
对象上获得
productUrl
。当然，现在您需要使用它而不是产品id来获取数据。
您可以在项目根目录下名为next.config.js的文件中尝试这些

module.exports = {
  exportTrailingSlash: true
}

检查
谢谢。我有一个运行“graphql瑜珈”的后端服务器，我应该添加它吗？还是这是一个单独的后端，只用于nextjs？这是一个单独的后端，用于nextjs。那么，这个
server.js
的构建过程是什么？谢谢，这就是我一直在寻找的