Next.js在Netlify构建成功但CSS无法加载、路由失效求助

DevOps 小满

2026-7-31

问题详情

Next.js项目在Netlify上构建成功，但网站加载不出CSS，控制台报Uncaught SyntaxError: Unexpected token '<'，路由功能完全失效
本地执行npm run build && npm run start一切正常，Vercel部署也没问题
之前用next build && next export构建，但因为要用到增量静态再生（ISR）（这个特性不被next export支持），移除next export后就出现了上述问题
用next export的时候，访问不在getStaticPaths里的动态页面会跳首页；应用内部跳转正常，但刷新页面还是会回到首页
package.json的脚本配置：

"scripts": {
  "dev": "next dev",
  "start": "next start",
  "build": "next build"
}

动态页面[tag].js核心代码：

import Head from "next/head";
import SearchPage from "../../components/app/SearchPage/SearchPage";
import {
  fetchAllCuratedTopicsToRender,
  fetchTitleAndDescription,
} from "../../services/SearchService";

const Search = ({ title, meta_description }) => {
  const defaultTitle = "default title";
  const defaultMetaDescription = "default meta description";
  return (
    <>
      <Head>
        <title key="title">{title || defaultTitle}</title>
        <meta
          name="description"
          content={meta_description || defaultMetaDescription}
          key="description"
        />
      </Head>
      <SearchPage />
    </>
  );
};

export default Search;

// 生成数据库中所有精选主题的路径
export async function getStaticPaths() {
  const APIresponse = await fetchAllCuratedTopicsToRender();
  const allPaths = APIresponse.map((el) => {
    return { params: { tag: el.keyword } };
  });

  return {
    paths: [...allPaths],
    fallback: "blocking",
  };
}

export async function getStaticProps(context) {
  let titleAndDescription = {
    title: "",
    meta_description: "",
  };

  // 仅当URL中有tag时获取标题和描述
  if (context.params?.tag) {
    const tag = context.params.tag.toString();
    titleAndDescription = await fetchTitleAndDescription(tag);
  }

  return {
    props: {
      title: titleAndDescription.title || "",
      meta_description: titleAndDescription.meta_description || "",
    },
    revalidate: 31536000,
  };
}

解决办法

问题核心是Netlify默认按静态站点部署，而Next.js的ISR需要服务器端支持，必须用Netlify的Next.js插件来处理路由和静态资源逻辑。

配置Netlify插件
在项目根目录新建netlify.toml文件，写入以下内容：

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

这个插件会自动适配Next.js的路由规则、ISR机制，解决资源加载和路由失效的问题。

修正Netlify部署配置
在Netlify后台的部署设置里：

构建命令设为npm run build
发布目录设为.next（别用out，那是next export生成的静态目录）
确保构建流程里没有残留的next export命令

验证效果
重新部署后检查：

CSS能正常加载，控制台的<错误会消失（这个错误一般是因为资源请求返回了HTML页面，插件会修复路由匹配问题）
访问不在getStaticPaths里的tag页面，能正常加载，刷新也不会跳首页

关于fallback: "blocking"
你的代码里设置了fallback: "blocking"，首次访问未预渲染的路径时，服务器会生成页面并缓存，Netlify插件完全支持这个模式，不用额外调整。

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