javascript - 下一个 js url 正在更改,但部署到 vercel 后页面为白色
问题描述
这一切都在本地工作,但一旦我部署到 vercel,它就无法正常工作!
我对 nextJS 很陌生。我构建了一个在本地运行良好的应用程序,一旦我部署并单击任何链接... URL 更改,但页面只是空白!
如果我重新加载页面,它会按预期工作,直到我再次单击任何链接。
注意:如果我在本地构建和运行,它运行良好......只是在 vercel
导航.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 并重建应用程序才能正常工作!
推荐阅读
- javascript - CasperjJs找不到变量:获取
- gitlab-ci - 生产/登台在 gitlab-ci 作业中从 registry.gitlab.com 自动安装新的 docker 映像
- python - 通过 PCA 线拟合进行聚类的算法
- sql - WordPress $wpdb 对象对于使用 PHI 信息进行 SQL 调用是否安全?
- amazon-web-services - 如何使 aws 负载均衡器只命中已启动的服务器?
- java - Leetcode 34. 使用 ArrayIndexOutOfBoundsException 查找有序数组中元素的第一个和最后一个位置
- java - 无法打开 LibGDX 游戏的第二个实例?
- python - 正则表达式警告我没有称为组的属性
- r - 防止 R 生成的进程因错误而退出
- javascript - Firestore 批量更新 - 检查文档是否存在