这一切都在本地工作，但一旦我部署到vercel它不能正常工作!
我对nextJS很陌生。我构建了一个在本地运行良好的应用程序，一旦我部署并点击任何链接……URL改变了，但页面还是一片空白!
如果我重新加载页面，它会正常工作，直到我再次点击任何链接。
注意:如果我在本地构建和运行，它工作得很好…
Nav.js
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
const Nav = () => {
const [navState, setNavState] = React.useState(false);
const handleNavToggle = (e) => {
setNavState(!navState);
};
return (
<div>
<header className="text-gray-600 body-font">
<div className="hidden md:flex container mx-auto flex-wrap p-5 flex-col md:flex-row items-center">
<Link href="/" passHref>
<a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="w-10 h-10 text-white p-2 bg-yellow-600 rounded-full"
viewBox="0 0 24 24"
>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span className="ml-3 text-xl">Adron Investment Company</span>
</a>
</Link>
<nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center">
<Link href="/" passHref>
<a className="mr-5 hover:text-gray-900">Home</a>
</Link>
<Link href="/about" passHref>
<a className="mr-5 hover:text-gray-900">About Us</a>
</Link>
<Link href="/contact" passHref>
<a className="mr-5 hover:text-gray-900">Contact Us</a>
</Link>
</nav>
<button className="flex items-center text-white font-bold bg-yellow-600 border-0 py-2 px-3 focus:outline-none hover:bg-yellow-500 rounded text-base mt-4 md:mt-0">
Get Started
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="w-4 h-4 ml-1 text-white"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
<div className="md:hidden container mx-auto flex justify-between p-5 items-center">
{/*Logo*/}
<Link href="/" passHref>
<a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="w-10 h-10 text-white p-2 bg-yellow-600 rounded-full"
viewBox="0 0 24 24"
>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
{/*<span className="ml-3 text-xl">Adron Investment Company</span>*/}
</a>
</Link>
{/*Nav toggler*/}
<div>
<button onClick={handleNavToggle}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 hover:text-yellow-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
</div>
{/*Mobile Nav*/}
{ navState?
<div className="p-2 bg-gray-700 text-white font-bold ">
<Link href="/" passHref>
<a className="mt-5 block">Home</a>
</Link>
<Link href="/about" passHref>
<a className="mt-5 block">About Us</a>
</Link>
<Link href="/contact" passHref>
<a className="mt-5 block">Contact Us</a>
</Link>
<Link href="#" passHref>
<a className="mt-5 block">Get Started</a>
</Link>
</div> : ""
}
</header>
</div>
);
};
export default Nav;
_app.js
import App from 'next/app';
import Head from 'next/head';
import '../styles/globals.css';
import { createContext } from 'react';
import { getStrapiMedia } from '../lib/media';
import { fetchAPI } from '../lib/api';
// Store Strapi Global object in context
export const GlobalContext = createContext({});
const MyApp = ({ Component, pageProps }) => {
const { global } = pageProps;
return (
<>
<Head>
<link rel="shortcut icon" href={getStrapiMedia(global.favicon)} />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" />
</Head>
<GlobalContext.Provider value={global}>
<Component {...pageProps} />
</GlobalContext.Provider>
</>
);
};
// getInitialProps disables automatic static optimization for pages that don't
// have getStaticProps. So article, category and home pages still get SSG.
// Hopefully we can replace this with getStaticProps once this issue is fixed:
// https://github.com/vercel/next.js/discussions/10949
MyApp.getInitialProps = async (ctx) => {
// Calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(ctx);
// Fetch global site settings from Strapi
const global = await fetchAPI('/global');
// Pass the data to our page via props
return { ...appProps, pageProps: { global } };
};
export default MyApp;
next.config.js
module.exports = {
reactStrictMode: true,
}
好吧，问题是我…我提供的获取数据的URL是HTTP的，而我的应用程序是HTTPS的。
我必须更改URL并重新构建应用程序才能正常工作!