如何在Next.js中导出页面且不重新生成元素？对接Django变量咨询

方案1：静态导出+Django模板直接注入 #

1. 执行next build && next export将Next项目导出为纯静态HTML文件
2. 把导出的HTML文件改成Django模板，将需要动态控制的内容替换成Django模板变量，比如把页面标题从<h1>固定标题</h1>改成<h1>{{ page_title }}</h1>
3. 调整静态资源路径：将HTML中引用的Next chunks文件路径，替换为Django的{% static %}标签，比如_next/static/chunks/xxx.js改成{% static 'next_static/_next/static/chunks/xxx.js' %}（前提是把Next导出的静态资源放到Django的static目录下）
4. 在Django视图中传递对应变量，渲染这个模板即可。这种方式完全脱离Next编译流程，内容修改只需要操作Django端。

方案2：Next通过REST API从Django拉取内容（前后端分离） #

用Next的数据获取方法在构建或请求时拉取Django API提供的内容，完全解耦内容和前端编译产物：

• 静态生成场景（适合内容不频繁更新）：使用getStaticProps

export async function getStaticProps() {
  // 调用Django的REST接口
  const res = await fetch('http://your-django-domain/api/page-content');
  const contentData = await res.json();
  return {
    props: { content: contentData }, // 传递给组件的动态内容
    revalidate: 300, // 可选：每隔5分钟重新拉取数据生成静态页
  };
}

function DynamicPage({ content }) {
  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
}

export default DynamicPage;

• 服务端渲染场景（适合实时更新内容）：使用getServerSideProps，每次请求都会拉取最新数据

export async function getServerSideProps(context) {
  const res = await fetch('http://your-django-domain/api/page-content');
  const contentData = await res.json();
  return { props: { content: contentData } };
}

注意：确保Django API配置了CORS允许Next服务的域名访问，否则会出现跨域错误。

方案3：Django全局变量注入Next应用 #

1. 在Django模板中引入Next打包后的静态资源，同时通过全局变量传递内容：

<!-- Django模板文件 -->
<html>
<head>
  <!-- 引入Next的CSS资源 -->
  <link rel="stylesheet" href="{% static 'next_static/_next/static/css/main.css' %}">
</head>
<body>
  <!-- Next应用挂载节点 -->
  <div id="__next"></div>
  <!-- 注入Django变量到全局 -->
  <script>
    window.DJANGO_CONTENT = {{ page_content|safe }};
  </script>
  <!-- 引入Next的JS资源 -->
  <script src="{% static 'next_static/_next/static/chunks/main.js' %}"></script>
</body>
</html>

2. 在Next组件中直接读取全局变量：

function HomePage() {
  const content = typeof window !== 'undefined' ? window.DJANGO_CONTENT : {};
  return <h1>{content.title}</h1>;
}

export default HomePage;

关于你之前的无效尝试 #

设置webpack: false是错误的操作——Next框架本身依赖webpack完成构建，这个配置项无法禁用，且和动态内容的需求无关，不需要再尝试这个方向。

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