下一个js Link标签无法在生产环境中使用，但在本地可以正常使用

Question

  

nex config     babelrc      home page

我的链接标签遇到了麻烦，我已经阅读了所有可以找到的内容，但没有任何效果。

我正在使用具有Ant设计的Next Js

当我在本地运行时，“前往商店”按钮链接有效（它将您重定向到商店页面） 但是当我构建或部署该按钮时，该按钮将不起作用，但是，如果将URL更改为/ shop，它将起作用。

我还尝试了在商店页面中删除以下内容，并且该按钮起作用了：

  

从'ant导入{消息}   
  从“ ../components/clientComponents/shop/ProductCard”导入

希望有人能帮助我，谢谢你

索引页

import Layout from "../components/clientComponents/Layout";
import Footer from "../components/clientComponents/footer/Footer";
import styled from "styled-components";
import { Button, Icon, Input } from "antd";
import Link from "next/link";

const Cover = styled.div`
  width: 100%;
  height: 85vh;
  background: url("../../static/images/cover.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  .cover-container {
    height: 60vh;
    /* background: red;
    opacity: 0.5; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 6%;
    margin-right: 5.5%;

    .cover-button-container {
      display: flex;
      justify-content: space-around;
      width: 430px;

      .coverButton:hover {
        background: #fff;
        color: #1d1d1d;
      }
    }
  }

  h1 {
    color: #1d1d1d;
    font-size: 6em;
    font-family: "Anton", sans-serif;
  }

  h2 {
    color: #1d1d1d;
    margin-top: -3%;
    margin-bottom: 2%;
  }
`;

const Section1 = styled.div`
  /* background: rgb(249, 250, 252); */
  background: #fff;
  padding: 5%;
  h3 {
    font-family: "Anton", sans-serif;
  }

  button:hover {
    background: #fff;
    color: #1d1d1d;
    border: 0px;
  }

  .tile-1 {
    width: 100%;
    display: flex;
    justify-content: center;
    .left {
      flex: 3;

      img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .right {
      background: #f5f7fa;
      flex: 1;
      padding: 2.6%;
      text-align: center;
      button {
        margin-top: 5%;
      }
      h3 {
        color: #1d1d1d;
        font-size: 3em;
      }
      h4 {
        margin-top: -5%;
      }
    }
  }

  .tile-2 {
    margin-top: 4%;

    width: 100%;
    display: flex;
    justify-content: center;

    .left {
      flex: 1;
      background: #f5f7fa;
      padding: 3.8%;
      text-align: center;

      h3 {
        color: #1d1d1d;
        font-size: 2.6em;
      }
    }

    .right {
      flex: 3;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
`;

const Section2 = styled.div`
  background: #f5f7fa;
  border-bottom: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
  height: 40vh;
  margin-bottom: 5%;
  h1 {
    text-align: center;
    margin-top: 3%;
    margin-bottom: 2%;
  }
  .box-container {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin-left: 10%;

    .box-wrapper {
      background: #fff;
      height: 140px;
      width: 260px;
      text-align: center;
      border: 1px solid #dfdfdf;
      padding-top: 1%;

      h4 {
        margin-top: 2%;
      }
    }
  }
`;

const Section3 = styled.div`
  background: url("../../static/images/cover2.jpg");
  height: 60vh;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 7%;
  h1 {
    font-family: "Anton", sans-serif;
  }

  .subscribe-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 35%;
    height: 60vh;
    margin-left: 6%;

    text-align: center;
    input {
      border-radius: 0px;
      height: 50px;
      margin-bottom: 2%;
    }

    button {
      background: #1d1d1d;
      color: white;
      border: 0px;
      padding-top: 2%;
      border-radius: 0px;
      height: 50px;
    }

    button:hover {
      background: #fff;
      color: #1d1d1d;
    }
    h1 {
      font-size: 2.9em;
      margin-bottom: 1%;
    }

    span {
      margin-bottom: 2%;
    }
  }
`;

const StyledCoverButton = styled(Button)`
  color: white;
  background: #1d1d1d;
  border: 0px;
  font-size: 1.4em;
  padding: 3% 13% 10% 12%;
  border-radius: 0px;
`;

const StyledShopButton = styled(Button)`
  padding: 3% 13% 10% 12%;
  background: #1d1d1d;
  color: white;
  border-radius: 0px;
  margin-bottom: 5%;
`;
const Index = () => {
  return (
    <Layout>
      <Cover>
        <div className="cover-container">
          <h1>Suit Yourself</h1>
          <h2>Tailored Suits and Barong Since 1997</h2>
          <div className="cover-button-container">
            <StyledCoverButton className="coverButton" size="large">
              <Link href="/shop">Go To Shop</Link>
            </StyledCoverButton>

            <StyledCoverButton className="coverButton" size="large">
              <Link href="/customize">Customize</Link>
            </StyledCoverButton>
          </div>
        </div>
      </Cover>

      <Section1>
        <div className="tile-container">
          <div className="tile-1">
            <div className="left">
              <img src={"../../static/images/tile-1.jpg"} alt="" />
            </div>
            <div className="right">
              <h3>Corporate Attire Collection</h3>
              <h4>When professionals look good they feel good</h4>
              <StyledShopButton className="coverButton">
                Shop Now
              </StyledShopButton>
            </div>
          </div>
          <div className="tile-2">
            <div className="left">
              <h3>Make your wedding extra special</h3>

              <StyledShopButton className="coverButton">
                Shop Now
              </StyledShopButton>

              <hr></hr>
            </div>
            <div className="right">
              <img src={"../../static/images/tile-2.jpg"} alt="" />
            </div>
          </div>
        </div>
      </Section1>

      <Section2>
        <h1>What we can do for you?</h1>

        <div className="box-container">
          <div className="box-wrapper">
            <Icon
              type="bg-colors"
              style={{ fontSize: "80px", color: "   #C0C0C0" }}
            />
            <h4>Online Customization</h4>
          </div>
          <div className="box-wrapper">
            <Icon type="car" style={{ fontSize: "80px", color: "    #C0C0C0" }} />
            <h4>Delivered To Your Door</h4>
          </div>
          <div className="box-wrapper">
            <Icon
              type="scissor"
              style={{ fontSize: "80px", color: "   #C0C0C0" }}
            />
            <h4>Altering and Resizing</h4>
          </div>{" "}
          <div className="box-wrapper">
            <Icon type="home" style={{ fontSize: "80px", color: "   #C0C0C0" }} />
            <h4>Walk In Repair</h4>
          </div>
        </div>
      </Section2>

      <Section3>
        <div className="subscribe-container">
          <h1>Subscribe to our newsletter</h1>
          <span>Get the latest news, sale and other rewards</span>
          <Input placeholder="Enter your email address" required></Input>
          <Button>SUBSCRIBE</Button>
        </div>
      </Section3>
      <Footer />
    </Layout>
  );
};

export default Index;

商店页面

import React, { Component } from "react";
import Layout from "../components/clientComponents/Layout";
import ProductCard from "../components/clientComponents/shop/ProductCard";
import Footer from "../components/clientComponents/footer/Footer";
import styled from "styled-components";
import { message } from "antd";
import testData from "../testData";

const MainWrapper = styled.div`
  background: rgb(249, 250, 252);
  overflow-x: hidden;
  width: 100%;
  display: flex;
  padding: 3% 5% 5% 5%;

  .right {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .left {
    padding: 2%;
    margin-top: 1%;
    display: flex;
    height: 100vh;
    width: 300px;
    background: #fff;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  }
`;

const BackgroundHeader = styled.div`
  background: url("../static/images/shop-cover.jpg");
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0px -200px;
  height: 250px;
`;

class Shop extends Component {
  state = {
    cart: []
  };

  handleAddItemToCart = item => {
    const newCart = [...this.state.cart, item];
    this.setState({
      cart: newCart
    });

    message.success(`You've added ${item.title} to your cart`, 5);
  };
  render() {
    return (
      <Layout>
        <BackgroundHeader />
        <MainWrapper>
          <div className="left">Filter</div>
          <div className="right">
            {testData.map(item => (
              <ProductCard
                item={item}
                addItemToCart={this.handleAddItemToCart}
              />
            ))}
          </div>
        </MainWrapper>
        <Footer />
      </Layout>
    );
  }
}

export default Shop;

产品卡组件

import { Card, Icon, Popconfirm, Select } from "antd";
import styled from "styled-components";

const MainLayout = styled.div`
  .dot {
    position: absolute;
    top: 70%;
    right: 5%;
    height: 45px;
    width: 45px;
    background-color: #607d8b;
    border-radius: 50%;
  }
`;

const ProductCard = props => {
  const { Meta } = Card;
  const { title, price, image } = props.item;

  const renderAddToCartOption = () => {
    const { Option } = Select;
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        <span>Select Size</span>
        <Select
          defaultValue="lucy"
          style={{ width: "100%" }}
          // onChange={handleChange}
        >
          <Option value="jack">Extra Small</Option>
          <Option value="jacssk">Small</Option>
          <Option value="lucy">Medium</Option>
          <Option value="Yiminghe">Large</Option>
          <Option value="Yimissnghe">Extra Large</Option>
        </Select>
      </div>
    );
  };

  return (
    <MainLayout>
      <Card
        hoverable
        style={{
          width: 240,
          marginTop: "5%",
          borderColor: "rgba(0, 0, 0, 0.09)",
          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)"
        }}
        cover={
          <img
            alt="example"
            src={image}
            style={{
              height: "290px",
              width: 205,
              marginLeft: "7%",
              marginTop: "2%"
            }}
          />
        }
      >
        <Popconfirm
          icon={null}
          title={renderAddToCartOption()}
          onConfirm={() => props.addItemToCart(props.item)}
          okText="Quick Add"
          cancelText={"Cancel"}
        >
          <span className="dot">
            <Icon
              type="shopping-cart"
              style={{
                fontSize: "24px",
                position: "absolute",
                top: "24%",
                left: "20%",
                color: "white"
              }}
            />
          </span>
        </Popconfirm>

        <Meta title={title} description={`Price: ₱${price}`} />
      </Card>
    </MainLayout>
  );
};

export default ProductCard;

下一个配置

/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
const withCSS = require("@zeit/next-css");
module.exports = withCSS();

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }
    return config;
  }
});

BABELRC

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ],
    ["styled-components", { "ssr": true }]
  ]
}

Answer 1

您应该放置一个标签以应用Link代码。它可以是a标签，也可以是组件，例如您要使用的ANT组件。

      <div className="cover-button-container">
        <StyledCoverButton className="coverButton" size="large">
          <Link href="/shop">
            <a>Go To Shop</a>
          </Link>
        </StyledCoverButton>

        <StyledCoverButton className="coverButton" size="large">
          <Link href="/customize">
            <a>Customize</a>
          </Link>
        </StyledCoverButton>
      </div>

当我对链接的概念不熟悉时，这发生在我身上。容易错过。希望对您有帮助。