Next.js部署到Vercel后点击链接URL跳转但页面白屏问题求助

问题根因 #

该问题是客户端路由切换时的API请求异常导致的渲染中断：
你在_app.js中通过getInitialProps请求Strapi的全局配置数据，手动刷新页面时，请求由Vercel服务端发起，可以正常访问到Strapi服务拿到数据，页面渲染正常；点击导航走客户端路由切换时，请求由用户浏览器发起，此时你配置的Strapi接口地址为本地地址，或者没有配置客户端可访问的公网接口地址，请求失败后代码访问global.favicon等属性时直接抛出未定义错误，导致页面渲染中断出现白屏。

解决步骤 #

• 配置正确的环境变量
  进入Vercel项目控制台的环境变量配置页，添加名为NEXT_PUBLIC_STRAPI_API_URL的变量，值为你的线上可公网访问的Strapi服务根地址，注意变量名必须带NEXT_PUBLIC_前缀，只有带此前缀的变量才会被注入到客户端运行环境。修改fetchAPI工具的实现，优先读取该变量作为接口请求前缀。

• 优化_app.js的全局数据获取逻辑
  不要用getInitialProps做全局数据获取，将请求逻辑移到客户端useEffect中，增加加载状态和错误兜底，避免请求失败直接阻塞全页面渲染，参考修改代码如下：

  import Head from 'next/head';
  import '../styles/globals.css';
  import { createContext, useState, useEffect } from 'react';
  import { getStrapiMedia } from '../lib/media';
  import { fetchAPI } from '../lib/api';
  import Nav from './Nav'; // 确认你的Nav组件路径正确，你原来的_app.js没有引入Nav组件，如果每个页面单独引入可以忽略这行
  
  export const GlobalContext = createContext({});
  
  const MyApp = ({ Component, pageProps }) => {
    const [global, setGlobal] = useState({});
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      const getGlobalData = async () => {
        try {
          const res = await fetchAPI('/global');
          setGlobal(res);
        } catch (err) {
          console.error('获取全局配置失败', err);
          // 可以加错误兜底配置，避免属性访问报错
          setGlobal({ favicon: '/default-favicon.ico' });
        } finally {
          setLoading(false);
        }
      };
      getGlobalData();
    }, []);
  
    if (loading) return <div className="loading">加载中...</div>;
  
    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}>
          {/* 如果Nav是全局导航，建议放在这里统一渲染，不需要每个页面单独引入 */}
          <Nav />
          <Component {...pageProps} />
        </GlobalContext.Provider>
      </>
    );
  };
  
  export default MyApp;
  

• 可选路由写法优化
  如果你使用的是Next.js 12及以上版本，next/link已经不需要嵌套<a>标签，直接把属性写到Link组件上即可，避免旧写法引发的路由异常，示例：

  <Link href="/about" className="mr-5 hover:text-gray-900">
    About Us
  </Link>
  

修改完成后重新提交部署到Vercel即可解决白屏问题。

内容的提问来源于stack exchange，提问作者Sheyzi Silver